Tinymce Enable Button While In Read Only Mode

I have a TinyMCE 4.x instance where the text should be in read only mode. But I still have some buttons that I want to have enabled. For example, one button could provide a charact

Solution 1:

It's probably too late for you but other people may pass by here.

I came up by writing this function

functionenableTinyMceEditorPlugin(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);
    };
}

It does the trick in 2 steps:

• make the button clickable (remove mce-disabled CSS class and remove the aria-disabled property)
• assign the good command to the click event

And in my editor init event I call the function.

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

Current version of TinyMCE for which I wrote this code is 4.4.3. It may break in a future version, specifically about the selectors to get and modify the good HTML elements.

Command identifiers can be found at this page otherwise you can also find them under tinymce\plugins\PluginName\plugin(.min).js

Solution 2:

Here is a simple way to enable your custom toolbar button and attach a click event handler inside a read only TinyMCE editor using JQUERY:

//Initialize read only Tinymce editor so that Lock button is also disabledfunctioninitReadOnlyTinyMCE() {
    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 trueimage: 'images/lock.png'
                , tooltip: 'Lock Editor'
            });
        }
    });
}

functiondisplayReadOnlyTinyMCEwithLockButtonEnabled() {
    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()");
}

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

Solution 3:

I couldn't find an easy way to do this. The simplest way is to remove the contenteditable attribute from the iframe body instead and substitute a read only toolbar set. It also means that people will still be able to copy content from the editor.

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

Solution 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();
                });
            }
        }
    });