在 angular 4 中将 tinymce 编辑器内容设置为只读

Question

我的表单中有两个编辑器。我正在使用 angular 4. 我已应用以下代码将编辑器设置为只读：

tinymce.activeEditor.getBody().setAttribute('contenteditable', false);
tinymce.activeEditor.getBody().style.backgroundColor = '#ecf0f5';

但是从上面的代码来看，只有一个编辑器内容设置为只读。如何在所有编辑器上执行此操作？

Answer 1

您可以使用

获取页面上所有编辑器的数组

tinymce.editors

这个 returns 一个包含对每个编辑器的引用的数组。然后您可以遍历数组并在每个编辑器实例上执行这些命令。

Answer 2

我从@Michel的回答中得到灵感，写了如下代码：

var result = tinymce.editors;
      result.forEach(element => {
        tinymce.get(element.id).getBody().setAttribute('contenteditable', false);
        tinymce.get(element.id).getBody().style.backgroundColor = '#ecf0f5';
      });

Answer 3

您可以简单地禁用编辑器：

<editor [disabled]="someCondition"></editor>

Answer 4

好像其他人已经成功禁用了控件。当我尝试时，它不允许任何键盘或鼠标交互。因此，我改用了这种对我来说效果很好的方法，它允许 ctrl/a、ctrl/c 和鼠标选择，但会阻止用户编辑文本。

tinyInitROI: any = {
base_url: '/hvbi/tinymce',
suffix: '.min',
resize: true,
plugins: "autoresize fullscreen print preview",
autoresize_bottom_margin: 10,
menubar: false,
toolbar: 'selectall copy print fullscreen',
fullscreen_native: true,

setup: function (editor) {
  editor.on('keydown', function (e, evt) {
    if (e.ctrlKey && (e.key == 'a' || e.key == 'c' || e.key == 'Control')) {
      return;
    } else {
      e.preventDefault();
    }
  }),
  editor.on('contextmenu', function (e, evt) {
    e.preventDefault();
  });
}

}

在 angular 4 中将 tinymce 编辑器内容设置为只读

Set tinymce editor content as readonly in angular 4

angular

tinymce

angular4-forms