4

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

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

和

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

fg单击颜色必须使用类（和背景颜色 -bg类）更改跨度的颜色

我怎样才能做到这一点？

4

2 回答 2

2

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

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

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

您需要的一切都在basicstyles插件中，所以请参考那里。

波兹德拉姆 :)

于 2012-10-11T22:11:37.360 回答
2

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

这将比创建自己的插件少。特别是如果您使用 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”插件创建一个插件。它创建本机前景色/背景色对话框。

于 2012-10-11T22:53:31.493 回答