Question

我需要在运行时禁用或只读一个简单的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);

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

＆＃39;的 mceToggleEditor ＆＃39;命令通过显示或隐藏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

中删除，那么

anather方法就可以了

 tinymce.init({
    selector: ... ,
    ....
    @if (ViewBag.desableEditExseptExportNumber != null && ViewBag.desableEditExseptExportNumber == true)
    {
         <text>
              readonly: 1,
         </text>
    }
    language: 'ar',
    ....});

Answer 7

我发现的最好方法（这是通过 tinymce-react，但也应该与 js 一起使用）是将控件设置为禁用。使用 tinymce 5.2。

                <Editor 
                initialValue={details}
                disabled = {true}
                init = {{
                    height: 300,
                    menubar: false,
                    toolbar: false,
                    readonly: true
                }}/>

Answer 8

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

tinymce.activeEditor.getBody().contenteditable = false

问候！

Answer 9

你可以在@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 10

适用于ASP.NET MVC Razor

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

初始化tinyMCE时

：

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

Answer 11

对于最新的5.x版本，请使用

editor.mode.set('readonly')

和

editor.mode.set('design')

Answer 12

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;
}

make readonly / disable tinymce textarea

12 个答案: