Tinymce-从Init方法中获取元素

Question

我正在使用TextaReas上的Tinymce编辑器，我希望能够将数据属性添加到TextAarea(例如Data-Allow-imimage(，这将是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-wall-image =" false"，它将无法获得图像工具栏项目。

Answer 1

您在初始/配置调用中无法动态地访问TextArea的属性。

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

我将从一个基本配置开始，该配置包含所有textareas的所有配置选项。

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(customConfigNoImage, baseConfig );
$.extend(customConfigWithImage, baseConfig);

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

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

...由于每个选择器都不同，因此他们只会将Textareas与类似的适当类一起使用：

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

Answer 2

我弄清楚了。基本上，我添加了要在文本中删除的图标，就像这样...

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

...然后在init_instance_callback中，我调用下面的功能，该功能将在页面上所有创建的Tinymce实例上循环，获取其父textarea元素并通过删除指定的图标来调整工具栏。该函数被编码为在数据属性中的管道上拆分，我可以指定多个图标以删除。

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/。这将从工具栏上删除粗体图标。