javascript - TinyMCE Enable button while in read only mode - Stack Overflow

admin管理员组

文章数量:1333184

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?

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?

• javascript
• tinymce

Share Improve this question Follow edited Dec 10, 2014 at 14:22 Sop Killen asked Nov 12, 2014 at 13:34 Sop KillenSop Killen 44522 gold badges66 silver badges1212 bronze badges 2

• Have you found a solution? I am also looking for this. – Asle G Commented Dec 2, 2014 at 21:07
• Nope, not yet. But I haven't really had time to dig into it anymore. I've had more pressing matters. – Sop Killen Commented Dec 10, 2014 at 15:09

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 3

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, mandName) {
    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(mandName);
    };
}

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 mand 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

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

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

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

You can try to run the code below:

$("#tinymce").contentEditable="false";

if you have more than one editors, you can use their id like below

$("#tinymce[data-id='idOfTheEditor']").contentEditable="false";

I am using tinymce-react 4.2.0 and managed to make my custom button always active by doing

editor.ui.registry.addButton('button', {
  text: 'My Fancy Button',
  onAction: () => alert('fancy button clicked'),
  onSetup: (api) => {
    const callback = () => {
      api.setEnabled(true);
    };
    editor.on('init', callback);
    return (api) => {
      editor.off('init', callback);
    };
  },
});

for build in buttons, I think the answer from 'Jérôme MEVEL' still valid.

本文标签： javascriptTinyMCE Enable button while in read only modeStack Overflow