如何使 tinyMCE 4.x 中的 readonly 工作？答案

【问题标题】：How to make readonly in tinyMCE 4.x work?如何使 tinyMCE 4.x 中的 readonly 工作？
【发布时间】：2013-09-23 10:12:47
【问题描述】：

我在这里看到了很多帖子，但是每个帖子都太旧了，并且与 tinyMCE 4.x 无关模式。

此时我只是隐藏了工具栏和菜单栏，但我仍然可以删除文本等等...

【问题讨论】：

请参阅回答 stackoverflow.com/a/35982854/2614103 了解 TinyMCE v4.3.x

标签： tinymce tinymce-4

【解决方案1】：

这就是我将其设为只读的方式。

tinymce.init({
  selector: "#id",
  readonly: true,
  toolbar: false,
  menubar: false,
  statusbar: false
  // more inits...
});

您可能需要调整样式以修复编辑器边框。

【讨论】：

是的，但是当我这样做时我无法选择文本...文章中有代码片段，用户可以像在 tinymce 版本 3 中一样复制/粘贴代码片段tinymce.com/tryit/3_x/read_only_mode.php

【解决方案2】：

这需要我一些时间来研究如何在只读模式下制作 tinymce。

这里的关键点是将readonly设置为1或0，而不是true或false。例如这里是我的初始化代码：

tinymce.init({
            selector: "#html-textarea",
            menubar: false,
            statusbar: false,
            resize: "both",
            plugins: [
                "textcolor image link preview code table media noneditable"
            ],
            readonly: status, // **status hold value 0 or 1, NOT true or false**
            toolbar: 'preview | undo redo | removeformat | cut copy paste | formatselect fontselect fontsizeselect | forecolor backcolor | bold italic underline strikethrough subscript superscript | alignleft aligncenter alignright alignjustify | link unlink image media | code table | bullist numlist | outdent indent blockquote'
        });

【讨论】：

【解决方案3】：

正如通过此链接https://www.tiny.cloud/docs-3x/reference/configuration/Configuration3x@readonly/ 看到的 TinyMCE 文档中所述，只读属性应设置为“1”而不是“真”。

// Move focus to specific element
tinyMCE.init({
  theme : "advanced",
  readonly : 1
});

希望对你有帮助

【讨论】：