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

Question

我有一些我想添加的预设颜色,这与我网站的主题一致.如何更改TinyMce中的默认字体调色板？

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

Answer 1

答：简单但肮脏的方法是编辑源代码。获取文件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);