Question

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

当用户选择Off单选按钮时，我的tinymce编辑器应为readonly/disabled＆amp;当用户选择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);
}

Answer 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

你仍然需要找到一种方法来阻止这个UI。您可以使用一行中的每一个

来停用已加载的EACH控件（在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 body的contenteditable属性。缺点是你必须单独禁用tinymce UI（按钮）

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

Answer 2

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

我的项目中有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

Answer 3

您可以使用白色div不透明度.7和更高的z-index进行覆盖。

Answer 4

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

editor_deselector：＆＃34; no_mce＆＃34;，

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

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

选择器：＆＃39; textarea.not（.no_mce）＆＃39;

希望有所帮助。

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

Answer 5

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

tinyMCE.getInstanceById（tinyMCE.activeEditor.id）.getBody（）。classList.add（“ mceNonEditable”）;

Answer 6

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

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

在5.x版上测试

如何禁用tinymce编辑器

6 个答案: