CKEditor格式类 [英] CKEditor format class
问题描述
我正在编写一个CKEditor插件来将一个特定的类应用到一个元素。基本上这个类
将文本颜色设置为特定的红色。
无论如何，我没有得到如何为包装的文本定义一个类。 / p>
请查看我的插件代码：
CKEDITOR.plugins.add （'red'，
{
init：function（editor）
{
editor.addCommand（'red'，
{
exec：function编辑器）
{
var format = {
element：'span'
};
var style = new CKEDITOR.style（format）;
style.apply（editor.document）;
}
}）;
editor.ui.addButton（'red'，
{
label：红色'，
命令：'red'，
图标：this.path +'images / red.png'
}）;
}
}
基本上我想要一个输出：
< span class =red>现在是红色文字< / span>
非常感谢您的帮助。
我用来获得这个的源：
http：// docs .cksource.com / CKEditor_3.x / Howto
http://docs.cksource.com/CKEditor_3.x/Tutorials/Timestamp_Plugin
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.command.html#exec
也许我在那里重写了一些东西，但对我来说，似乎没有提到这种东西。请证明我错了：）
您可以使用basicstyles插件作为模板，它创建各种样式按钮（粗体，斜体等）：
ckeditor / _source / plugins / basicstyles / plugin.js
这是代码在basicstyles插件），它将是位于这里的plugin.js文件的内容：
ckeditor / plugins / red / plugin.js
按钮的图标位于此处：
ckeditor / plugins / red / images
CKEDITOR.plugins.add（'red'，
{
要求：['styles'，'button']，
init：function（editor）
{
//不需要这个addButtonCommand函数，但如果你想添加多个按钮
//将很有用
var addButtonCommand = function（buttonName，buttonLabel，commandName，styleDefiniton ）
{
var style = new CKEDITOR.style（styleDefiniton）;
editor.attachStyleStateChange（style，function（state）
{
！editor.readOnly& & editor.getCommand（commandName）.setState（state）;
}）;
editor.addCommand（commandName，new CKEDITOR.styleCommand（style））;
editor.ui.addButton（buttonName，
{
label：buttonLabel，
command：commandName，
icon：CKEDITOR.plugins.getPath（'red'）+ 'images / red.png'
}）;
};
var config = editor.config，
lang = editor.lang;
//此版本使用basicstyles中使用的语言功能
//您需要为每个语言定义文件添加标签
addButtonCommand（'Red '，lang.red，'red'，config.coreStyles_red）;
//这个版本通过用'Red'替换`lang.red`来硬编码按钮的标签
addButtonCommand（'Red'，'Red'，'red'，config。 coreStyles_red）;
}
}）;
//您请求的基本配置
CKEDITOR.config.coreStyles_red = {element：'span'，attributes：{'class'：'red'}};
//你也可以分配多个属性
CKEDITOR.config.coreStyles_red = {element：'span'，attributes：{'class'：'red'，'style'：'background -color：yellow;'，'title'：'自定义格式条目'}};
将red类的样式添加到ckeditor contents.css文件中，
在配置文件中添加新的插件：
config.extraPlugins ='red';
并将按钮添加到工具栏'Red'
对于标签，您可以创建一个数组，为每个语言代码分配不同的标签，并根据活动的语言代码获取正确的版本。使用 editor.langCode 获取活动的语言代码。
如果您想避免添加按钮，您可以向格式选择器中添加新条目。这是带有标题的选择器。
好，
Joe
I am writing a CKEditor plugin to apply a specific class to an element. Basically this class is setting the text colour to a specific redish colour.
Anyways, I am not getting how to define a class for the wrapped text.
Please look at my plugin code:
CKEDITOR.plugins.add( 'red',
{
init: function( editor )
{
editor.addCommand( 'red',
{
exec : function( editor )
{
var format = {
element : 'span'
};
var style = new CKEDITOR.style(format);
style.apply(editor.document);
}
});
editor.ui.addButton( 'red',
{
label: 'red',
command: 'red',
icon: this.path + 'images/red.png'
} );
}
} );
Basically I want to have an output like:
<span class="red">This is now a red text</span>
Thank you very much in advance for helping me.
The sources I have used to get this far: http://docs.cksource.com/CKEditor_3.x/Howto http://docs.cksource.com/CKEditor_3.x/Tutorials/Timestamp_Plugin http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.command.html#exec
Maybe I overread something there, but for me it does not seem that this kind of things are mentioned there ? Please proof me wrong : )
You can use the the "basicstyles" plugin as a template, it creates the various style buttons (bold, italic, etc):
ckeditor/_source/plugins/basicstyles/plugin.js
Here's the code for your plugin (based on the basicstyles plugin), it would be the contents of the plugin.js file located here:
ckeditor/plugins/red/plugin.js
The icon for the button would be located here:
ckeditor/plugins/red/images
CKEDITOR.plugins.add( 'red',
{
requires : [ 'styles', 'button' ],
init : function( editor )
{
// This "addButtonCommand" function isn't needed, but
// would be useful if you want to add multiple buttons
var addButtonCommand = function( buttonName, buttonLabel, commandName, styleDefiniton )
{
var style = new CKEDITOR.style( styleDefiniton );
editor.attachStyleStateChange( style, function( state )
{
!editor.readOnly && editor.getCommand( commandName ).setState( state );
});
editor.addCommand( commandName, new CKEDITOR.styleCommand( style ) );
editor.ui.addButton( buttonName,
{
label : buttonLabel,
command : commandName,
icon: CKEDITOR.plugins.getPath('red') + 'images/red.png'
});
};
var config = editor.config,
lang = editor.lang;
// This version uses the language functionality, as used in "basicstyles"
// you'll need to add the label to each language definition file
addButtonCommand( 'Red' , lang.red , 'red' , config.coreStyles_red );
// This version hard codes the label for the button by replacing `lang.red` with 'Red'
addButtonCommand( 'Red' , 'Red' , 'red' , config.coreStyles_red );
}
});
// The basic configuration that you requested
CKEDITOR.config.coreStyles_red = { element : 'span', attributes : {'class': 'red'} };
// You can assign multiple attributes too
CKEDITOR.config.coreStyles_red = { element : 'span', attributes : { 'class': 'red', 'style' : 'background-color: yellow;', 'title' : 'Custom Format Entry' } };
Add the style for the "red" class to the ckeditor contents.css file in addition to your regular style sheet (unless you load the regular sheet as a custom css file in ckeditor).
Add the new plugin in your config file:
config.extraPlugins = 'red';
And add the button to your toolbar 'Red'
For the label, you could create an array with different labels assigned to each language code and pull the correct version based on the active language code. Use editor.langCode to get the active language code.
If you'd like to avoid adding a button, you could add a new entry to the "Format" Selector instead. It's the selector with the headings.
Be Well,
Joe
这篇关于CKEditor格式类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
