CODEWITHSUNDEEP
javascripttinymcetinymce-4
Jonathan Brizio
Jonathan Brizio

Reputation: 1210

TinyMCE Code Plugin - don't want to open code view in a modal dialog

I need help with TinyMCE Text Editor.

Is it possible to open or view the code of the editor inside the editor without opening a modal?

Something like this:

TinyMCE Code Plugin

Upvotes: 3

Views: 1122

Answers (3)

user5770200
user5770200

Reputation:

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.

Upvotes: 0

Greg
Greg

Reputation: 473

You should have a look at how TinyMCE is implemented in WordPress. Code Is editable in a text tab.

Upvotes: 0

Michael Fromin
Michael Fromin

Reputation: 13746

The code plugin that comes with TinyMCE places the HTML code is a separate window - there in no configuration option that will allow the code to appear directly in the editor's main window.

TinyMCE has a place to make such feature requests:

https://community.tinymce.com/communityIdeasHome

...so if you post something there they may add such a feature in a future release of the editor. When you post your idea there make sure you explain why the current code dialog is insufficient for your use case.

Upvotes: 4

Related Questions