Javascript 使只读/禁用tinymce textarea
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13881812/
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
make readonly/disable tinymce textarea
提问by Ahmed-Anas
I need to disable or make readonly a tinymce textarea at runtime.
我需要在运行时禁用或只读一个 tinymce textarea。
回答by Thariama
Use the configuration parameter readonly
使用配置参数只读
tinyMCE.init({
...
theme : "advanced",
readonly : 1
});
Here is a link to a demo.
这是一个演示链接。
Update: What you can do to prevent users from editing content in your editor is to set the contenteditable attribute of the editors iframe body to false:
更新：为了防止用户在编辑器中编辑内容，您可以做的是将编辑器 iframe 正文的 contenteditable 属性设置为 false：
tinymce.activeEditor.getBody().setAttribute('contenteditable', false);
回答by grajsek
From version 4.3.x on you can use code below for readonly mode
从 4.3.x 版本开始，您可以使用以下代码进行只读模式
tinymce.activeEditor.setMode('readonly');
and for design mode:
和设计模式：
tinymce.activeEditor.setMode('design');
回答by Makiavelo
IF you only have one editor, this works:
如果您只有一个编辑器，则此方法有效：
tinymce.activeEditor.getBody().setAttribute('contenteditable', false);
If you have multiple editors, you have to select them by the id of the textarea:
如果您有多个编辑器，则必须通过 textarea 的 id 选择它们：
tinyMCE.get('textarea_id').getBody().setAttribute('contenteditable', false);
回答by josephdpurcell
Thariama's solutionwill set all TinyMCE textareas on the page to readonly.
Thariama 的解决方案会将页面上的所有 TinyMCE 文本区域设置为只读。
The best solution I've found was postedby Magnar Myrtveit which will set fields to readonly that have the readonly attribute. Here is the code:
我发现的最好的解决方案是由 Magnar Myrtveit发布的，它会将具有 readonly 属性的字段设置为只读。这是代码：
tinyMCE.init({
...
setup: function(ed) {
if ($('#'+ed.id).prop('readonly')) {
ed.settings.readonly = true;
}
}
});
回答by Gaurav
To disable you can call this command:
要禁用您可以调用此命令：
tinymce.EditorManager.execCommand('mceToggleEditor', true, tinymceId);
And to again enable the editor you can again call this command.
要再次启用编辑器，您可以再次调用此命令。
'mceToggleEditor' command toggles the WYSIWYG mode on or off by displaying or hiding the textarea and editor instance. This is not the same thing as mceAddControl or mceRemoveControl because the instance is still there and uninitialized, so this method is faster.
' mceToggleEditor' 命令通过显示或隐藏文本区域和编辑器实例来打开或关闭 WYSIWYG 模式。这与 mceAddControl 或 mceRemoveControl 不同，因为实例仍然存在且未初始化，因此此方法更快。
Link for above command: http://archive.tinymce.com/wiki.php/TinyMCE3x:Command_identifiers
上述命令的链接：http: //archive.tinymce.com/wiki.php/TinyMCE3x: Command_identifiers
回答by Basheer AL-MOMANI
you can use
您可以使用
this.getBody().setAttribute('contenteditable', false);
take look at full solution,, my server side is Asp.net MVC
看看完整的解决方案，我的服务器端是 Asp.net MVC
setup: function (ed) {
ed.on('init', function () {
this.execCommand("fontSize", false, "17px");
$("html,body").scrollTop(0);
@if (ViewBag.desableEdit != null && ViewBag.desableEdit == true)
{
<text>
this.getBody().setAttribute('contenteditable', false);
</text>
}
});
anather way to do it if you have server side conditionwhich will be removed in the returned HTML
如果您有server side condition将在返回的 HTML 中删除的另一种方法
tinymce.init({
selector: ... ,
....
@if (ViewBag.desableEditExseptExportNumber != null && ViewBag.desableEditExseptExportNumber == true)
{
<text>
readonly: 1,
</text>
}
language: 'ar',
....});
回答by adam.bielasty
That works for ASP.NET MVC Razor
这适用于 ASP.NET MVC Razor
readonly: @(Model.Readonly ? "true" : "false")
while initializing tinyMCE:
在初始化 tinyMCE 时：
tinymce.init({/* put readonly setting here */});
回答by Dakusan
For the latest 5.x version, use
对于最新的 5.x 版本，请使用
editor.mode.set('readonly')
and
和
editor.mode.set('design')
回答by Blair Connolly
You can see this answer here by @rioted: https://stackoverflow.com/a/34764607/1827960.
您可以通过@rioted 在此处查看此答案：https://stackoverflow.com/a/34764607/1827960 。
I used it to come up with this solution:
我用它来提出这个解决方案：
tinymce.settings = $.extend(tinymce.settings, { readonly: 1 });
tinymce.EditorManager.editors.forEach(function (editor) {
tinymce.EditorManager.execCommand('mceRemoveEditor', false, editor.id);
//tinymce.EditorManager.editors = [];
tinymce.EditorManager.execCommand('mceAddEditor', false, editor.id);
});
回答by antoniosanct
Maybe this code line helps in others browsers using iframes.
也许此代码行在使用 iframe 的其他浏览器中有所帮助。
tinymce.activeEditor.getBody().contenteditable = false
Regards!
问候！
