CKEditor插件来设置类 [英] CKEditor plugin to set classes
问题描述
我想做的是类似于本机前景/背景颜色对话框。不同的是，它将在工具栏中直接显示具有颜色的按钮。所以一个插件必须有多个按钮，具有不同的样式（颜色）。另一个问题是，这个本地插件设置CSS color 和 background-color 属性。我需要使用类，如下：
What I want to do is something similar to the native foreground / background colors dialog. The difference is, it will have buttons with colors directly in a toolbar. So one plugin has to have multiple buttons, with different styles (colors). The other problem is, that this native plugin sets CSS color and background-color properties. I need to use classes instead, like this:
text <span class="fg red">colored text</span> text
和
text <span class="bg blue">colored background</span> text
点击颜色必须更改跨度的颜色 fg class（and background colors - bg class）
Clicking into colors have to change color of a span with fg class (and background colors - bg class)
p>
推荐答案
如果您对界面非常灵活，可以将样式添加到样式选择器。
If you're flexible about the interface, you could just add your styles to the "Styles" selector.
这比创建自己的插件要少。特别是如果您使用CKEditor 3.6或更高版本，您可以使用新的样式表解析器插件
It would be less work than creating your own plugin. Especially if you're using CKEditor 3.6 or later where you could use the new Stylesheet Parser Plugin.
欢迎使用你问我要看看这个问题。
它基于basicstyles插件。如果你看看我的评论，你会看到你可以使用它来添加多个按钮和多个样式。
It's based on the "basicstyles" plugin. If you look at the comments I included, you'll see that you can use it to add multiple buttons and multiple styles.
// 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 );
插件代码后的最后一行代码是您添加到配置中的代码。您可以使用任何您喜欢的属性：
The last line of code after the plugin code is what you add to your configuration. You can use any attributes that you like:
CKEDITOR.config.coreStyles_fg_red = { element : 'span', attributes : { 'class': 'fg red' } };
CKEDITOR.config.coreStyles_bg_blue = { element : 'span', attributes : { 'class': 'bg blue' } };
您也可以根据 colorbutton插件。它创建本机前景/背景颜色对话框。
You could also create a plugin based on the "colorbutton" plugin. It creates the native foreground / background colors dialog.
这篇关于CKEditor插件来设置类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
