如何在TinyMce编辑器中更改默认字体颜色调色板？

Question

我有一些预设颜色，想要添加到我的网站主题中。如何更改TinyMce的默认字体颜色调色板？

screenshot-with-shadow.png http://img407.imageshack.us/img407/4526/screenshotwithshadow.png

- cwd

Answer 1

A. 简单但不太干净的方法是编辑源代码。找到文件tiny_mce.js并搜索字符串"000000,993300,333300," - 这是SplitButton颜色定义的开头。现在您可以根据自己的喜好编辑颜色。这将调整所有ColorSplitButton实例的颜色设置。

B. 另一种不像混合源代码那样肮脏的方法是在编辑器初始化后调整颜色。您需要向tinymce配置添加设置参数（或将其放置在您自己的tinymce插件中）：

   setup : function(ed) {
      ed.onInit.add(function(ed) {

         $('.mceColorSplitMenu').find('#_mce_item_2').get(0).setAttribute('data-mce-color','#0202FF');
         $('.mceColorSplitMenu').find('#_mce_item_3').get(0).setAttribute('data-mce-color','#0203FF');
          ...
         $('.mceColorSplitMenu').find('#_mce_item_41').get(0).setAttribute('data-mce-color','#0241FF');
      });
   }

请注意，您可能需要更改SplitButton的其他属性（例如标题，背景颜色等）

C. 最干净但耗时的解决方案是开发自己的插件，使用自己的ColorSplitButton，其中包含您选择的控件元素的设置中的颜色（查看tinymce开发人员版本），有一个名为ColorSplitButton.js的文件。以下是一些包含颜色设置的代码：

    ColorSplitButton : function(id, s, ed) {
        var t = this;

        t.parent(id, s, ed);

        /**
         * Settings object.
         *
         * @property settings
         * @type Object
         */
        t.settings = s = tinymce.extend({
            colors : '000000,993300,333300,003300,003366,000080,333399,333333,800000,FF6600,808000,008000,008080,0000FF,666699,808080,FF0000,FF9900,99CC00,339966,33CCCC,3366FF,800080,999999,FF00FF,FFCC00,FFFF00,00FF00,00FFFF,00CCFF,993366,C0C0C0,FF99CC,FFCC99,FFFF99,CCFFCC,CCFFFF,99CCFF,CC99FF,FFFFFF',
            grid_width : 8,
            default_color : '#888888'
        }, t.settings);

- Thariama

---

嗯，也许可以看看这个：http://www.tinymce.com/wiki.php/Configuration:theme_advanced_text_colors - 刚刚发现的。 - cwd

Answer 2

尝试在您的编辑器配置中使用“textcolor_map”设置？

tinymce.init({
  textcolor_map: [
    'D7C0D0', 'color1',
    'F7C7DB', 'color2',
  ]
})

我也在寻找如何更改Tinymce中默认字体颜色调色板的方法。大多数答案都指向使用基于'theme_advanced_'的配置属性。然而，'高级'主题没有捆绑在第4版中，并且第4版默认使用的'modern'主题不暴露相同的属性。一个与主题无关的解决方案将更可取。

噢！快速查看“textcolor”插件，发现当插件设置其颜色映射表时，它首先查找编辑器设置中提到的属性。

- Puckey

Answer 3

嗯，有点晚了，但我的解决方案是：

1.假设您正在使用“textcolor”插件，请将“textcolor”文件夹复制到“plugins”目录中，并给它一个新名称（比如说“mytextcolor”）。这将是您的新插件名称（mytextcolor）。

2.在您的“mytextcolor”文件夹中打开plugin.min.js，在第12行找到默认颜色调色板。用新的颜色名称和代码修改它。

3.在您的tinymce配置中，将插件参数中的“textcolor”重命名为“mytextcolor”。

希望能对您有所帮助。

- Vahid PG

Answer 4

theme_name_text_colors: "#hexhex, #hexhex, #hexhex"

将其放入init()函数中，您的颜色板将变为自定义。而且您仍然可以获得更多颜色按钮。

参考：https://www.youtube.com/watch?v=dySkwdZG9J0

- Button 108

---

你如何添加颜色名称？当你在选择器上悬停在颜色上时，它会显示十六进制值，但我更想显示颜色名称。 - Connie DeCinko