Question

我使用我的文字区域TinyMCE的编辑，我希望能够增加数据属性像数据使图像textarea的这将是真的还是假的，然后启用禁用基于该值的工具栏项目。我不确定如何从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 =＆＃34; false＆＃34;它不会得到图像工具栏项。

Answer 1

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

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

我将从包含所有textareas相同的所有配置选项的基本配置开始。

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

然后，您可以使用JavaScript在编辑器实例的基础上修改/扩展标准init。由于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);

...因为每个选择器都不同，所以他们只会将textareas与相应的类一起使用，如下所示：

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

Answer 2

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

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

...然后在init_instance_callback我调用下面的函数，它将遍历页面上所有创建的tinymce实例，获取它们的父textarea元素并通过删除指定的图标来调整工具栏。该函数被编码为在数据属性中的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/。这将从工具栏中删除BOLD图标。

TinyMCE - 从init方法

2 个答案: