Question

我有一个TinyMCE 4.x实例，其中文本应该处于只读模式。但是我仍然有一些我希望启用的按钮。例如，一个按钮可以为我选择的文本部分提供字符数。但是当我打开TinyMCE的只读模式时，所有按钮都被禁用。我可以在保持只读模式的同时启用我的按钮吗？

Answer 1

对你来说可能为时已晚，但其他人可能会经过这里。

我写这个函数

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

它分两步完成：

点击按钮（删除mce-disabled CSS类并删除aria-disabled属性）
将好的命令分配给点击事件

在我的编辑init事件中，我调用了函数。

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

我编写此代码的当前版本的TinyMCE是4.4.3。它可能会在未来版本中出现问题，特别是关于获取和修改好HTML元素的选择器。

可以在this page找到命令标识符，否则您也可以在tinymce\plugins\PluginName\plugin(.min).js下找到它们

Answer 2

这是一种启用自定义工具栏按钮并使用JQUERY在只读TinyMCE编辑器中附加Click事件处理程序的简单方法：

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

我找不到一个简单的方法来做到这一点。最简单的方法是从iframe体中删除contenteditable属性，并替换只读工具栏集。这也意味着人们仍然可以从编辑器中复制内容。

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

Answer 4

这个怎么样：

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

处于只读模式时，TinyMCE启用按钮

4 个答案: