CKEditor插件设置类

Question

我想要做的是类似于原生前景/背景颜色对话框。 不同的是，它将在工具栏中直接显示带颜色的按钮。 所以一个插件必须有多个按钮，具有不同的样式（颜色）。 另一个问题是，这个本机插件设置了CSS color和background-color属性。 我需要使用类，如下所示：

text <span class="fg red">colored text</span> text

和

text <span class="bg blue">colored background</span> text

点击颜色必须改变跨度的颜色与fg类（和背景颜色 - bg类）

我怎样才能做到这一点？

Answer 1

首先，你必须添加自己的按钮。 检查执行此操作的任何插件的来源 - 例如basicstyles/plugin.js 。 您必须为每个按钮创建命令，然后注册所有按钮。 简单。

然后我建议使用我们的样式实现。 它允许从给定的选择/范围中应用/删除定义的样式。 在样式定义中，您可以指定它将对给定的类应用span元素。 检查此样式定义。

最后一步 - 将这些东西结合在一起。 与按钮关联的命令应该应用/删除此样式。 有准备使用一个-检查CKEDITOR.styleCommand使用这里 。

你需要的一切都是基本basicstyles插件，所以请参考那里。

Pozdrawiam :)

Answer 2

如果您对界面很灵活，可以将样式添加到“样式”选择器中 。

这比创建自己的插件要少。 特别是如果您使用CKEditor 3.6或更高版本，您可以使用新的样式表分析器插件 。

---

欢迎您使用答案中的插件，您要求我查看此问题 。

它基于“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”插件创建一个插件。 它会创建本机前景/背景颜色对话框。