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 character count for the part of the text I've selected. But when I turn on read only mode for TinyMCE all buttons are disabled. Can I enable just my buttons while still retaining read only mode?

回答1:

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

I came up by 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);
    };
}

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

回答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 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...
}

回答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");

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

来源：https://stackoverflow.com/questions/26888276/tinymce-enable-button-while-in-read-only-mode

标签

javascript

tinymce