我想做的是类似于本机前景色/背景色对话框的东西。不同之处在于，它将直接在工具栏中具有带有颜色的按钮。所以一个插件必须有多个按钮，具有不同的样式（颜色）。另一个问题是，这个原生插件设置了 CSScolor和background-color属性。我需要改用类，如下所示：
text <span class="fg red">colored text</span> text
和
text <span class="bg blue">colored background</span> text
fg单击颜色必须使用类（和背景颜色 -bg类）更改跨度的颜色
我怎样才能做到这一点？
首先，您必须添加自己的按钮。检查执行此操作的任何插件的来源 - 例如basicstyles/plugin.js。您必须为每个按钮创建命令，然后注册所有按钮。简单的。
然后我建议使用我们的样式实现。它允许从给定的选择/范围中应用/删除定义的样式。在样式定义中，您可以指定它将应用span具有给定类的元素。检查此样式定义。
最后一步 - 将这些东西结合在一起。与按钮关联的命令应应用/删除此样式。这里有准备使用的一检查CKEDITOR.styleCommand用法。
您需要的一切都在basicstyles插件中，所以请参考那里。
波兹德拉姆 :)
如果您对界面很灵活，您可以将您的样式添加到“样式”选择器。
这将比创建自己的插件少。特别是如果您使用 CKEditor 3.6 或更高版本，您可以使用新的Stylesheet Parser Plugin。
欢迎您使用您要求我查看此问题的答案中的插件。
它基于“basicstyles”插件。如果您查看我包含的评论，您会发现您可以使用它来添加多个按钮和多种样式。
// This "addButtonCommand" function isn't needed, but
// would be useful if you want to add multiple buttons
您将多次调用该addButtonCommand方法。
addButtonCommand( 'Fg_red' , 'Label' , 'fg_red' , config.coreStyles_fg_red );
addButtonCommand( 'Bg_blue' , 'Label' , 'bg_blue' , config.coreStyles_bg_blue );
插件代码之后的最后一行代码是您添加到配置中的内容。您可以使用任何您喜欢的属性：
CKEDITOR.config.coreStyles_fg_red = { element : 'span', attributes : { 'class': 'fg red' } };
CKEDITOR.config.coreStyles_bg_blue = { element : 'span', attributes : { 'class': 'bg blue' } };
您还可以基于“colorbutton”插件创建一个插件。它创建本机前景色/背景色对话框。