如何将自定义色板添加到所有所见即所得编辑器？

时间：2016-07-28 作者：Clayton Jones

我希望能够在整个网站的所见即所得编辑器中显示的颜色选择器面板底部的样例中添加相同的自定义颜色，以便客户更容易保持其样式的一致性。

我提到的样例是屏幕截图中的最下面一行。

理想情况下，我希望在不安装插件的情况下执行此操作。

Colour chooser

2 个回复
最合适的回答,由SO网友:Max Yudin 整理而成

单击Custom... 文本和颜色选择器将弹出。选择所需颜色，然后按OK. 所选颜色将显示为自定义样例，以供以后使用。

Note! 上述解决方案不是解决方案。请参见下面的评论和编辑。

Edit:

这是一个用自定义样例替换整个默认调色板的函数。

注意，列表中有7种颜色，而不是8种。这是因为也应该有乘法；X（&；10005；）在颜色列表的末尾，删除应用于文本的任何颜色。所以，当再添加一行时，应该有15种颜色，而不是16种。

function my_mce4_options($init) {

    $custom_colours = \'
        "3366FF", "Color 1 name",
        "CCFFCC", "Color 2 name",
        "FFFF00", "Color 3 name",
        "99CC00", "Color 4 name",
        "FF0000", "Color 5 name",
        "FF99CC", "Color 6 name",
        "CCFFFF", "Color 7 name"
    \';

    // build colour grid default+custom colors
    $init[\'textcolor_map\'] = \'[\'.$custom_colours.\']\';

    // change the number of rows in the grid if the number of colors changes
    // 8 swatches per row
    $init[\'textcolor_rows\'] = 1;

    return $init;
}
add_filter(\'tiny_mce_before_init\', \'my_mce4_options\');
此外，您还可以根据颜色编号和UI要求构建自己的样例网格：

$init[\'textcolor_rows\'] = 4;
$init[\'textcolor_cols\'] = 2;
主要基于this WPSE answer.

有关更多信息和自定义，请参见this blog post.

SO网友:JDandChips

除了Max的回答之外，如果您希望添加到现有托盘，以下是默认颜色托盘：

$custom_colours = \'[
      "000000", "Black",
      "993300", "Burnt orange",
      "333300", "Dark olive",
      "003300", "Dark green",
      "003366", "Dark azure",
      "000080", "Navy Blue",
      "333399", "Indigo",
      "333333", "Very dark gray",
      "800000", "Maroon",
      "FF6600", "Orange",
      "808000", "Olive",
      "008000", "Green",
      "008080", "Teal",
      "0000FF", "Blue",
      "666699", "Grayish blue",
      "808080", "Gray",
      "FF0000", "Red",
      "FF9900", "Amber",
      "99CC00", "Yellow green",
      "339966", "Sea green",
      "33CCCC", "Turquoise",
      "3366FF", "Royal blue",
      "800080", "Purple",
      "999999", "Medium gray",
      "FF00FF", "Magenta",
      "FFCC00", "Gold",
      "FFFF00", "Yellow",
      "00FF00", "Lime",
      "00FFFF", "Aqua",
      "00CCFF", "Sky blue",
      "993366", "Red violet",
      "FFFFFF", "White",
      "FF99CC", "Pink",
      "FFCC99", "Peach",
      "FFFF99", "Light yellow",
      "CCFFCC", "Pale green",
      "CCFFFF", "Pale cyan",
      "99CCFF", "Light sky blue",
      "CC99FF", "Plum",
      ... CUSTOM HERE ...
    ]\';

标签： wysiwyg   color-picker   小码农  

相关推荐

为什么WYSIWYG中的HTML评论会破坏页面显示？

这个问题是关于HTML代码注释的<!-- like so --> 而不是关于帖子/页面评论。我指定了所见即所得，但这个问题出现在HTML视图中，而不是视觉视图中。我一直在为一个客户建立一个网站，她来找我时遇到了一个问题——她试图对她的部分页面内容进行评论，这彻底改变了页面的行为！我仔细研究了一下，非常惊讶地发现，在内容的任何地方添加一条评论都会完全删除整个内容块。不仅如此，WordPress似乎对什么感到困惑the_content() 因为那一页甚至是。如果有侧边栏，则来自侧边栏的内容，如果没