处于只读模式时的 TinyMCE 启用按钮 [英] TinyMCE Enable button while in read only mode

问题描述

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

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?

推荐答案

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

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

它分两步完成:

• 使按钮可点击(删除 mce-disabled CSS 类并删除 aria-disabled 属性)
• 将好的命令分配给点击事件

• make the button clickable (remove mce-disabled CSS class and remove the aria-disabled property)
• assign the good command to the click event

然后在我的编辑器 init 事件中调用该函数.

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

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

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.

命令标识符可以在这个页面找到，否则你也可以找到它们位于 tinymce\plugins\PluginName\plugin(.min).js

Command identifiers can be found at this page otherwise you can also find them under tinymce\plugins\PluginName\plugin(.min).js

这篇关于处于只读模式时的 TinyMCE 启用按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！