Showing TinyMCE code plugin into the editor, not in popup

user_1827846 0
Viewed 279

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

tinymce-plugins tinymce-5 tinymce
2 Answers

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.

user_16037460

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.

user_57702000
Related