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

Posted 2023-03-22

【中文标题】TinyMCE - 从 init 方法获取对元素的引用

【英文标题】：TinyMCE - Get reference to element from init method

【发布时间】：2018-07-19 05:30:11

【问题描述】：

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

谁能告诉我如何做到这一点的例子？

我希望做一些类似......

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

一个示例 textarea 标签看起来像这样...

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

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

【问题讨论】：

实际上您希望配置中的某些设置根据原始文本区域的属性在同一页面上的不同文本区域中有所不同？你能举例说明 textarea 标签的外观吗？

@MichaelFromin - 根据请求更新

【参考方案1】：

在 init/configuration 调用中，您无法动态访问 textarea 的属性。

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

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

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

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

例如：

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


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

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

$.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> 

【讨论】：

感谢您的回复。有没有办法可以在初始化后删除 TinyMCE 工具栏中的项目？就像现在一样创建它们，然后在初始化后的一些回调循环中通过已启动的 tinymce 编辑器并根据 textareas 数据属性从工具栏中删除项目？

满足我的需要，如果我能做到，那对我来说会更好。我的 tinymce 在全局范围内启动一次，我不希望对多个配置对象进行多次 init 调用。

TinyMCE 初始化后不支持修改工具栏或其他配置选项。

【参考方案2】：

我明白了。基本上，我像这样在 textarea 上添加我想要删除的图标...

<textarea name="whatever" class="MYTEXTAREA" data-remove-icons="mce-i-chart"></textarea>

...然后在init_instance_callback 中调用下面的函数，它将遍历页面上所有创建的tinymce 实例，获取它们的父文本区域元素并通过删除指定的图标来调整工具栏。该函数被编码为在数据属性中的 PIPE 上拆分，这样我可以指定多个图标进行删除。

function updateTinyMCE() 
     // Adjust the toolbar items based on the textarea attributes
     for (i=0; i<tinymce.editors.length; i++) 
        var thisElement = $(tinymce.editors[i].getElement());
        if (typeof thisElement.data('remove-icons') != 'undefined') 
            var thisRemoveIcons = thisElement.data('remove-icons').toString().split("|");
            for (x=0; x<thisRemoveIcons.length; x++) 
                $(tinymce.editors[i].editorContainer).find('.mce-ico.' + thisRemoveIcons[x]).closest('.mce-btn').remove();
            
        
               

可在此处获取概念证明https://jsfiddle.net/mnn75tmp/。这将从工具栏中删除粗体图标。

【讨论】：

请注意，虽然这确实使按钮消失了，但键盘快捷键仍将起作用，因此当我无法单击 B 按钮时，我仍然可以使用此解决方案使事情变得大胆。

@MichaelFromin 谢谢你，这是真的。我还可以始终包括覆盖相应的 keydown 事件以防止它发生，但出于我的目的，我目前不需要它，因为我隐藏的图标是未连接到键事件的自定义图标。