我需要在运行时禁用或只读一个tinymce textarea。
13 回答
从 4.3.x 版本开始,您可以将以下代码用于只读模式
tinymce.activeEditor.setMode('readonly');
对于设计模式:
tinymce.activeEditor.setMode('design');
如果您只有一个编辑器,则此方法有效:
tinymce.activeEditor.getBody().setAttribute('contenteditable', false);
如果您有多个编辑器,则必须通过 textarea 的 id 选择它们:
tinyMCE.get('textarea_id').getBody().setAttribute('contenteditable', false);
要禁用,您可以调用此命令:
tinymce.EditorManager.execCommand('mceToggleEditor', true, tinymceId);
要再次启用编辑器,您可以再次调用此命令。
' mceToggleEditor ' 命令通过显示或隐藏 textarea 和编辑器实例来打开或关闭 WYSIWYG 模式。这与 mceAddControl 或 mceRemoveControl 不同,因为实例仍然存在且未初始化,因此此方法更快。
上述命令的链接:http: //archive.tinymce.com/wiki.php/TinyMCE3x :Command_identifiers
我发现的最好方法(这是通过 tinymce-react,但也应该与 js 一起使用)是将控件设置为禁用。使用 tinymce 5.2。
<Editor
initialValue={details}
disabled = {true}
init = {{
height: 300,
menubar: false,
toolbar: false,
readonly: true
}}/>
您可以通过@rioted 在这里看到这个答案:https ://stackoverflow.com/a/34764607/1827960 。
我用它想出了这个解决方案:
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);
});
您可以使用
this.getBody().setAttribute('contenteditable', false);
看看完整的解决方案,我的服务器端是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>
}
});
如果您有另一种方法,它将server side condition
在返回的 HTML 中删除
tinymce.init({
selector: ... ,
....
@if (ViewBag.desableEditExseptExportNumber != null && ViewBag.desableEditExseptExportNumber == true)
{
<text>
readonly: 1,
</text>
}
language: 'ar',
....});
对于最新的 5.x 版本,请使用
editor.mode.set('readonly')
和
editor.mode.set('design')
getInit(): any
{
const result = {
base_url: baseUrl,
menubar: false,
branding: false,
height: '500',
selector: 'textarea', // change this value according to your HTML
toolbar: false,
statusbar: false,
readonly: true,
setup: function(ed)
{
ed.settings.readonly = true;
}
};
return result;
}
也许此代码行有助于其他使用 iframe 的浏览器。
tinymce.activeEditor.getBody().contenteditable = false
问候!
这适用于 ASP.NET MVC Razor
readonly: @(Model.Readonly ? "true" : "false")
在初始化 tinyMCE 时:
tinymce.init({/* put readonly setting here */});
disabled={true} 反应集成