TinyMCE 在只读模式下启用按钮

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 编辑器中附加单击事件处理程序的简单方法：

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

Answer 5

您可以尝试运行以下代码：

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

如果你有多位编辑，你可以像下面这样使用他们的id

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

Answer 6

我正在使用 tinymce-react 4.2.0 并设法让我的自定义按钮始终处于活动状态

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

对于内置按钮，我认为“Jérôme MEVEL”的答案仍然有效。