TinyMCE Enable Button Read Only

Question

I have an instance of TinyMCE 4.x where the text should be in read-only mode. But I still have buttons that I want to enable. For example, a single button can provide the number of characters for a piece of text that I have selected. But when I turn on read-only mode for TinyMCE, all buttons are disabled. Can I turn on only my buttons while maintaining read-only mode?

Answer 1

It may be too late for you, but other people can come here.

I came up with writing this function

function enableTinyMceEditorPlugin(editorId, pluginName, commandName) {
    var htmlEditorDiv = document.getElementById(editorId).previousSibling;
    var editor = tinymce.get(editorId);
    var buttonDiv = htmlEditorDiv.querySelectorAll('.mce-i-' + pluginName.toLowerCase())[0].parentElement.parentElement;
    buttonDiv.className = buttonDiv.className.replace(' mce-disabled', '');
    buttonDiv.removeAttribute('aria-disabled');
    buttonDiv.firstChild.onclick = function () {
        editor.execCommand(commandName);
    };
}

This does the trick in 2 steps:

• make the button pressed (remove mce-disabledCSS mce-disabledand remove property aria-disabled)
• click

init .

editor.on('init', function () {
    if (readOnly) {
        editor.setMode('readonly');
        enableTinyMceEditorPlugin(htmlEditorId, 'preview', 'mcePreview');
        enableTinyMceEditorPlugin(htmlEditorId, 'code', 'mceCodeEditor');
    }
});

TinyMCE, , - 4.4.3. , , HTML.

, tinymce\plugins\PluginName\plugin(.min).js

Answer 2

TinyMCE JQUERY:

//Initialize read only Tinymce editor so that Lock button is also disabled
function initReadOnlyTinyMCE() {
    tinymce.init({
        selector: '#main'
        , toolbar: 'myLockButton'
        , body_class: 'main-div'
        , content_css: 'stylesheets/index.css'
        , readonly: true
        , setup: function (readOnlyMain) {
            readOnlyMain.addButton('myLockButton', { //Lock button is disabled because readonly is set to true
                image: 'images/lock.png'
                , tooltip: 'Lock Editor'
            });
        }
    });
}

function displayReadOnlyTinyMCEwithLockButtonEnabled() {
    var edContent = $('main').html();
    $("#main").empty();
    initReadOnlyTinyMCE(true);
    tinyMCE.activeEditor.setContent(edContent);
    //enable the lock button and attach a click event handler
    $('[aria-label="Lock Editor"]').removeClass("mce-disabled");
    $('[aria-label="Lock Editor"]').removeAttr("aria-disabled");
    $('[aria-label="Lock Editor"]').attr("onclick", "LockEditor()");
}

function LockEditor() {
    alert("Tiny mce editor is locked by the current user!!");
    //Write your logic to lock the editor...
}

Answer 3

. - contenteditable iframe . , .

$("iframe").contents().find("body").removeAttr("contenteditable");

Answer 4

How about this:

editor.addButton('yourButton', {
        title: 'One can Enable/disable TinyMCE',
        text: "Disable",
        onclick: function (ee) {
            editor.setMode('readonly');
            if($(ee.target).text() == "Disable"){
                var theEle = $(ee.target).toggle();
                var edit = editor;
                var newBut = "<input type='button' style='opacity:1;color:white; background-color:orange;' value='Enable'/>";
                $(newBut).prependTo($(theEle).closest("div")).click(function(e){
                    edit.setMode('design');
                    $(e.target).remove();
                    $(theEle).toggle();
                });
            }
        }
    });