53

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

4

13 回答 13

64

使用配置参数readonly

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

这是一个演示的链接。

更新：为了防止用户在编辑器中编辑内容，您可以将编辑器 iframe 正文的 contenteditable 属性设置为 false：

tinymce.activeEditor.getBody().setAttribute('contenteditable', false);
于 2012-12-14T15:43:53.090 回答
53

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

tinymce.activeEditor.setMode('readonly');

对于设计模式：

tinymce.activeEditor.setMode('design');
于 2016-03-14T08:40:25.560 回答
25

如果您只有一个编辑器，则此方法有效：

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

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

tinyMCE.get('textarea_id').getBody().setAttribute('contenteditable', false);
于 2014-03-17T16:31:26.990 回答
15

Thariama 的解决方案会将页面上的所有 TinyMCE 文本区域设置为只读。

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

tinyMCE.init({
    ...
    setup: function(ed) {
        if ($('#'+ed.id).prop('readonly')) {
            ed.settings.readonly = true;
        }
    }
});
于 2013-08-16T16:54:16.137 回答
2

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

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

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

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

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

于 2016-01-13T12:55:37.810 回答
2

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

                <Editor 
                initialValue={details}
                disabled = {true}
                init = {{
                    height: 300,
                    menubar: false,
                    toolbar: false,
                    readonly: true
                }}/>
于 2021-03-11T23:01:04.373 回答
1

您可以通过@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);
});
于 2016-02-18T03:55:28.897 回答
1

您可以使用

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',
    ....});
于 2016-10-19T12:24:24.557 回答
1

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

editor.mode.set('readonly')

和

editor.mode.set('design')
于 2019-10-02T10:35:09.477 回答
1 
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;
}
于 2021-05-04T18:46:04.430 回答
0

也许此代码行有助于其他使用 iframe 的浏览器。

tinymce.activeEditor.getBody().contenteditable = false

问候！

于 2013-10-04T06:23:11.477 回答
0

这适用于 ASP.NET MVC Razor

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

在初始化 tinyMCE 时：

tinymce.init({/* put readonly setting here */});
于 2018-01-03T16:40:19.967 回答
0

disabled={true} 反应集成

于 2022-01-29T18:39:48.293 回答