使TinyMCE文本框只读/禁用

Question

我需要在运行时禁用或使tinymce文本区域只读。

- Ahmed-Anas

Answer 1

使用配置参数readonly

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

这里有一个演示链接。

更新： 防止用户在您的编辑器中编辑内容的方法是将编辑器的 iframe body 的 contenteditable 属性设置为 false：

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

- Thariama

---

谢谢，但我需要在运行时而不是初始化期间执行此操作。 - Ahmed-Anas

请参考以下这个Stack Overflow的问题：https://dev59.com/J2ox5IYBdhLWcg3wzno0。 - Thariama

Answer 2

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

tinymce.activeEditor.setMode('readonly');

并且对于设计模式：

tinymce.activeEditor.setMode('design'); 

- grajsek

---

这似乎也是4.3.x中唯一可行的解决方案，因为其他建议根本不起作用。 - Jacek Prucia

问题在于它不仅禁用编辑，还禁用了所有插件，包括预览和查看源代码。 - Jérôme MEVEL

这是唯一对我有效的解决方案。同时也是提出的最干净的解决方案。 - BrianLegg

好的！你也可以使用tinyMCE.get('editor_ID').setMode('readonly');来使编辑器只读。 - Стас Пишевский

此代码仅适用于页面上仅有1个tinyemc字段的情况。我有2个Textarea，它只适用于其中一个文本区域，而另一个是可编辑的。 - blazetango

Answer 3

如果你只有一个编辑器，这个方法可以使用：

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

如果您有多个编辑器，您需要通过文本区域的ID进行选择：

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

- Makiavelo

---

尽管文本区域被禁用，仍然可以通过工具栏进行修改，或者通过双击选择所有内容。 - Rumpelstinsk

Answer 4

Thariama的方案将使页面上所有的TinyMCE文本区域只读。

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

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

- josephdpurcell

Answer 5

我发现最好的方法（这是通过tinymce-react实现的，但也适用于js），是将控件设置为禁用状态。使用tinymce 5.2版本。

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

- Sat Thiru

---

是的，React版本有些不同。文档提到了readonly被覆盖的情况：https://www.tiny.cloud/docs/integrations/react/#init - cyclingLinguist

Answer 6

如果您想禁用它，可以调用此命令：

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

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

'mceToggleEditor' 命令通过显示或隐藏文本区域和编辑器实例来切换所见即所得模式的开启或关闭。这与 mceAddControl 或 mceRemoveControl 不同，因为实例仍然存在但未初始化，所以此方法更快。

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

- Gaurav

Answer 7

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

editor.mode.set('readonly')

并且

editor.mode.set('design')

- Dakusan

Answer 8

您可以通过 @rioted 的答案 https://dev59.com/xG445IYBdhLWcg3w4-Be#34764607 在此处查看。

我使用它来得出这个解决方案：

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

- Blair Connolly

Answer 9

你可以使用

标签

。

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

        });

如果您有服务器端条件，并且它将在返回的HTML中被删除，则可以使用另一种方法来执行此操作。

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

- Basheer AL-MOMANI

Answer 10

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

- Tawani Anyangwe

---

当您回答一个8年前的问题时，请用简短的语言解释，并描述为什么它与其他答案不同。 - Michael Rovinsky