make readonly / disable tinymce textarea

Question

我需要在运行时禁用或只读一个tinymce textarea。

Answer 1

使用配置参数readonly

tinyMCE.init({
        ...
        theme : "advanced",
        readonly : 1
});

这是一个link to a demo。

更新：阻止用户编辑编辑器内容的方法是将编辑器iframe体的contenteditable属性设置为false：

tinymce.activeEditor.getBody().setAttribute('contenteditable', false);

Answer 2

从版本4.3.x开始，您可以使用以下代码进行只读模式

tinymce.activeEditor.setMode('readonly');

对于设计模式：

tinymce.activeEditor.setMode('design'); 

Answer 3

如果您只有一个编辑器，则可以：

tinymce.activeEditor.getBody().setAttribute('contenteditable', false);

如果您有多个编辑器，则必须通过textarea的id选择它们：

tinyMCE.get('textarea_id').getBody().setAttribute('contenteditable', false);

Answer 4

Thariama的solution将页面上的所有TinyMCE textareas设置为只读。

我发现的最好的解决方案是Magnar Myrtveit的posted，它将字段设置为readonly，具有readonly属性。这是代码：

tinyMCE.init({
    ...
    setup: function(ed) {
        if ($('#'+ed.id).prop('readonly')) {
            ed.settings.readonly = true;
        }
    }
});

Answer 5

要禁用，您可以调用此命令：

tinymce.EditorManager.execCommand('mceToggleEditor', true, tinymceId);

要再次启用编辑器，您可以再次调用此命令。

'mceToggleEditor'命令通过显示或隐藏textarea和编辑器实例来打开或关闭WYSIWYG模式。这与mceAddControl或mceRemoveControl不同，因为实例仍然存在且未初始化，因此此方法更快。

以上命令的链接：http://archive.tinymce.com/wiki.php/TinyMCE3x:Command_identifiers

Answer 6

您可以使用

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',
    ....});

Answer 7

也许这个代码行可以帮助其他使用iframe的浏览器。

tinymce.activeEditor.getBody().contenteditable = false

问候！

Answer 8

你可以在@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);
});

Answer 9

这适用于ASP.NET MVC Razor

readonly: @(Model.Readonly ? "true" : "false")

在初始化tinyMCE时：

tinymce.init({/* put readonly setting here */});