如何禁用tinymce编辑器答案

【问题标题】：how to disable tinymce editor如何禁用tinymce编辑器
【发布时间】：2011-03-28 08:25:13
【问题描述】：

我想使用 Javascript 禁用 tinymce 编辑器。实际上，我有两个单选按钮：1）On 和 2）Off。

当用户选择Off 单选按钮时，我的tinymce 编辑器应该是readonly/disabled 并且当用户选择On 单选按钮时，我的tinymce 编辑器应该是enabled。

我怎样才能做到这一点？

已编辑：-（因为它在 IE8 中不起作用）

tinyMCE.init({
    force_p_newlines : false,
    force_br_newlines : false,
    forced_root_block : false,
    convert_newlines_to_brs: false,
    // Not to add br elements.
    remove_linebreaks : true,

    mode : "textareas",
    theme : "advanced",
    plugins : "safari",
    convert_urls : false,
    width : "560",
    height : "15",
    theme_advanced_buttons1 : "fontselect,fontsizeselect, separator, bold,italic,underline,separator,forecolor,backcolor,justifyleft,justifycenter,justifyright,justifyfull",

    theme_advanced_buttons2 : "",
    theme_advanced_buttons3 : "",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left", extended_valid_elements : "a[name|href|target|title|onclick],img[class|src| border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name], hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]"
});

此代码用于禁用：

function tinymce_state(id, disable){
    var state = (disable==true)? 'Off' : 'On'
    tinymce.get(id).getDoc().designMode = state;
    tinymce.get(id).controlManager.get('fontselect').setDisabled(disable);
    tinymce.get(id).controlManager.get('fontsizeselect').setDisabled(disable);
    tinymce.get(id).controlManager.get('bold').setDisabled(disable);
    tinymce.get(id).controlManager.get('italic').setDisabled(disable);
    tinymce.get(id).controlManager.get('underline').setDisabled(disable);
    tinymce.get(id).controlManager.get('forecolor').setDisabled(disable);
    tinymce.get(id).controlManager.get('backcolor').setDisabled(disable);
    tinymce.get(id).controlManager.get('justifyleft').setDisabled(disable);
    tinymce.get(id).controlManager.get('justifycenter').setDisabled(disable);
    tinymce.get(id).controlManager.get('justifyright').setDisabled(disable);
    tinymce.get(id).controlManager.get('justifyfull').setDisabled(disable);
}

【问题讨论】：

你有没有看到关于这个的其他问题？ stackoverflow.com/questions/3455525/…
对于 4.3.13 有效：stackoverflow.com/questions/13881812/…

标签： tinymce wysiwyg javascript

【解决方案1】：

您可以使用以下内容在编辑器中阻止输入：

// blockeditor input
tinymce.get('editor_id').getDoc().designMode = 'Off'; // switches editable off

// turn it on again
tinymce.get('editor_id').getDoc().designMode = 'On'; // switches editable on

您仍然需要找到一种方法来阻止 tinymce 用户界面。您可以使用其中每个控件的一行来停用已加载的每个控件（在 init 函数中）

// example control bold
tinymce.get('editor_id').controlManager.get('bold').setDisabled(true);

// turn it on again
tinymce.get('editor_id').controlManager.get('bold').setDisabled(false);

编辑：

您可以更改 rtes iframe 正文的 contenteditable 属性。缺点是您必须单独禁用 tinymce UI（按钮）

// disable contenteditable
tinymce.get('editor_id').getBody().setAttribute('contenteditable', 'false');

// enable contenteditable
tinymce.get('editor_id').getBody().setAttribute('contenteditable', 'true');

【讨论】：

哇 gr8 东西亲爱的........它对我有用........但我还没有将它标记为已接受，因为可能有更简单的方法来禁用/启用tinymce 编辑器和 UI ............新的一百万 Thariama......
我也想知道是否有更简单的方法（但可能没有）
它不适用于 TinyMCE 3.4.5。 designMode 属性已经等于“off”；从“开”到“关”来回改变几次没有效果。
您使用的是哪个浏览器？我编辑了我的帖子，显示了另一种方式
对于 4.3.13 这工作：stackoverflow.com/questions/13881812/…

【解决方案2】：

由于某种原因，编辑器集合有两种类型的 ID，数字 ID (0,1, ... n) 和 alpha ID (Testing1, testing2, ... xyx) 代码 sn-p 中的命令仅适用于基于 aplha 的 ID，例如“测试1”

我的项目中有 12 个 tinyMCE 4.1.5 版编辑器，可以使用以下代码禁用所有这些编辑器：

for (editor_id in tinyMCE.editors) { 
    if (editor_id.length > 2) { //there are twelve editors in my project so ignore two-digit IDs
        tinyMCE.editors[editor_id].getBody().setAttribute('readonly', '1');
        tinymce.EditorManager.execCommand('mceRemoveControl', true, editor_id);
        tinymce.EditorManager.execCommand('mceRemoveEditor', true, editor_id);
        tinymce.EditorManager.execCommand('mceAddControl', true, editor_id);
        tinymce.EditorManager.execCommand('mceAddEditor', true, editor_id);
    }
}

这个网站帮我弄明白了：http://jeromejaglale.com/doc/javascript/tinymce_jquery_ajax_form

【讨论】：

【解决方案3】：

要禁用编辑器，请使用： tinymce.activeEditor.mode.set('readonly');

要启用编辑器，请使用： tinymce.activeEditor.mode.set('design');

在版本 5.x 上测试

【讨论】：

【解决方案4】：

您可以覆盖白色 div 不透明度 0.7 和更高的 z-index。

【讨论】：

【解决方案5】：

您可以在 3.x 中使用该选项

editor_deselector : "no_mce",

禁用（所以给 textarea 的 css 类 no_mce）。例如，您可以使用 jQuery 切换 CSS 类。

在 4.x 中，您可以使用该选项

选择器：'textarea.not(.no_mce)'

希望对您有所帮助。

（显然您可以将 CSS 类更改为您想要的任何内容）

【讨论】：

【解决方案6】：

对于旧 3 版本，您可以使用：

tinyMCE.getInstanceById(tinyMCE.activeEditor.id).getBody().classList.add("mceNonEditable");

【讨论】：