javascript - TinyMCE - 从 init 方法获取对元素的引用

Question

我在文本区域上使用 TinyMCE 编辑器，我希望能够向文本区域添加数据属性，例如 data-allow-image ，该属性可以是 true 或 false，然后根据该值启用禁用这些工具栏项目。我不确定如何从 tinymce.init 方法中获取对该元素的引用。

任何人都可以向我展示如何实现此目标的示例吗？

我希望能做一些类似的事情......

tinymce.init({
     mode: "textareas",
     editor_selector: "MYTEXTAREAS",
     toolbar1: (getElement().data('allow-image') == 'true' ? 'image' : '')
});

示例文本区域标记如下所示...

<textarea name="whatever" class="MYTEXTAREAS" data-allow-image="true"></textarea>

这将允许上面的文本区域获取带有图像工具栏项的tinyMCE，如果我将其中一项设置为 data-allow-image="false"，它将不会获取图像工具栏项。

Answer 1

在 init/configuration 调用中，您无法动态访问文本区域的属性。

也许最简单的解决方案是根据您是否希望包含该插件在文本区域上使用不同的类？然后您可以有两个配置对象，其中加载的工具栏不同？

我将从一个基本配置开始，其中包含所有文本区域都相同的所有配置选项。

baseConfig = {
  ....
  //everything here except your selector and toolbar options 
  ....
}

然后，您可以使用 JavaScript 在编辑器实例的基础上修改/扩展您的标准 init。由于 baseConfig 只是一个简单的 JavaScript 对象，因此您可以在使用该对象初始化 TinyMCE 之前向该对象注入(inject)其他属性。

例如:

customConfigWithImage = {
  selector: ".editorWithImage"
  toolbar1: "...whatever you need for the toolbar"
}

customConfigNoImage = {
  selector: ".editorWithoutImage"
  toolbar1: "...whatever you need for the toolbar"
}

然后您可以将每个 customConfigXXXImage 和 baseConfig“合并”为一组最终配置。最简单的方法是使用 jQuery 的扩展方法:

$.extend(customConfigNoImage, baseConfig );
$.extend(customConfigWithImage, baseConfig);

...这将从 baseConfig 中获取所有属性，并将它们合并到两个 customConfigXXXImage 对象中。然后您只需使用这些对象初始化编辑器:

tinymce.init(customConfigWithImage);  
tinymce.init(customConfigNoImage);

...由于每个选择器都不同，因此它们只会使用具有适当类的文本区域，例如:

<textarea name="imageTextArea" class="editorWithImage"></textarea>  
<textarea name="noImageTextArea" class="editorWithoutImage"></textarea>