Javascript 如何禁用tinymce编辑器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5456363/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to disable tinymce editor
提问by Salil
I want to disable tinymce editor using Javascript. Actually, I have two radio buttons: 1) On& 2) Off.
我想使用 Javascript 禁用 tinymce 编辑器。实际上，我有两个单选按钮： 1) On& 2) Off。
When the user selects the Offradio button, my tinymce editor should be readonly/disabled& when the user selects the Onradio button, my tinymce editor should be enabled.
当用户选择Off单选按钮时，我的 tinymce 编辑器应该是readonly/disabled& 当用户选择On单选按钮时，我的 tinymce 编辑器应该是enabled.
How can I achieve that?
我怎样才能做到这一点？
EDITED:- (As it is not working in IE8)
编辑：-（因为它在 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]"
});
This code is used to disable:
此代码用于禁用：
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);
}
回答by Thariama
You may use the following to block input in the editor:
您可以使用以下内容来阻止编辑器中的输入：
// 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
You still need to find a way to block the tinymce UI. You could deactivate EACH control you have loaded (in the init function) using a line for EACH one of them
您仍然需要找到一种方法来阻止tinymce UI。您可以使用一行来停用您已加载的每个控件（在 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);
EDIT:
编辑：
You could change the contenteditable property of your rtes iframe body. Downside will be that you will have to disable the tinymce UI (buttons) seperatly
您可以更改 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');
回答by user2378769
For some reason the collection of editors has two type of ID, the numeric ID (0,1, ... n) and an alpha ID (Testing1, testing2, ... xyx) the commands in the code snippet only work with the aplha-based ID e.g. "Testing1"
出于某种原因，编辑器集合有两种类型的 ID，数字 ID (0,1, ... n) 和 alpha ID (Testing1, testing2, ... xyx) 代码片段中的命令仅适用于基于 aplha 的 ID，例如“Testing1”
I have twelve tinyMCE version 4.1.5 editors in my project and can disable all of them with this code:
我的项目中有 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);
}
}
This site helped me figure it out: http://jeromejaglale.com/doc/javascript/tinymce_jquery_ajax_form
这个网站帮我弄清楚了：http: //jeromejaglale.com/doc/javascript/tinymce_jquery_ajax_form
回答by Dominic
You can use in 3.x the option
您可以在 3.x 中使用该选项
editor_deselector : "no_mce",
editor_deselector : "no_mce",
to disabled (so give the textarea the css class no_mce). You can toggle the CSS Class with jQuery for example.
禁用（所以给 textarea css 类 no_mce）。例如，您可以使用 jQuery 切换 CSS 类。
In 4.x you can use the option
在 4.x 中，您可以使用该选项
selector:'textarea.not(.no_mce)'
选择器：'textarea.not(.no_mce)'
Hope that helps.
希望有帮助。
(Oviously you can change the CSS Class to whatever you want)
（显然，您可以将 CSS 类更改为您想要的任何内容）
回答by user79871
For old 3 ver you can use:
对于旧版 3 版本，您可以使用：
tinyMCE.getInstanceById(tinyMCE.activeEditor.id).getBody().classList.add("mceNonEditable");
tinyMCE.getInstanceById(tinyMCE.activeEditor.id).getBody().classList.add("mceNonEditable");
回答by jason ionno
You can cover with a white div opacity .7 and higher z-index.
您可以使用白色 div 不透明度 0.7 和更高的 z-index 进行覆盖。
