TinyMCE Enable button while in read only mode

Question

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?

Answer 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