Photoshop Question posted in
The official user guide can be found here.

Showing TinyMCE code plugin into the editor, not in popup – Photoshop

I am designing an HTML editor for Windows Forms. I use Geckofx 60.64 and TinyMCE 5.2.0 for this. When everything runs smoothly, this will be a usercontrol.
Here is the screenshot:
enter image description here
And I don’t want anything that pops up as a popup in this usercontrol. However, TinyMCE’s code plugin opens as a popup.
enter image description here
As in the TinyMCE editor in WordPress, I want the contents of the HTML code to be displayed in the editor when you click on the code icon and return it when you click the code icon again. But I have no idea how I can do it.
In order to better explain what I want, I also designed a simple image in Photoshop.
enter image description here

Tags:

2

Answers


  1. 0

    The code view in WordPress is not actually using the TinyMCE code view plugin. Rather it extracts the editor contents, loads it into a textarea, allows you to edit, and then it re-invokes TinyMCE and reloads the updated HTML.

    If you want a similar experience to WordPress you will have to create the code view behavior yourself.

    If you want to use the code viewer that TinyMCE provides it works as a dialog.

    Login or Signup to reply.
  2. 0

    I had a similar request (displaying html source in editor) and achieved a pretty simple and (for me) sufficient solution by modifying the initial (open source) code plugin:

    var e = tinymce.util.Tools.resolve("tinymce.PluginManager"),
    p = tinymce.util.Tools.resolve("tinymce.dom.DOMUtils"),
    o = function (o) {
        var e = o.getContent({source_view: !0});
        var b = o.getBody();
        if (b.getAttribute("code") === "true") {
            b.setAttribute("code", "false");
            b.style.backgroundColor = "white";
            b.style.color = "black";
            b.style.fontFamily = "Helvetica";
            o.setContent(p.DOM.decode(e));
        } else {
            b.setAttribute("code", "true");
            b.style.backgroundColor = "black";
            b.style.color = "white";
            b.style.fontFamily = "Monaco";
            o.setContent(p.DOM.encode(e));
        }
    };

    Instead of opening a new window, it just changes the css of the editor (background, color, font) and sets a data-attribute (enables toggling between the initial view and the code view). The p.DOM.encode(e) then allows to display the html tags.

    I’m not very experienced in javascript, but it works good so far. Anyway, feel free to correct / improve things.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search