CKEditor格式类

Question

我正在编写一个CKEditor插件来将特定类应用于元素.基本上这个类将文本颜色设置为特定的淡红色.

无论如何,我没有得到如何为包装文本定义一个类.

请看我的插件代码:

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'
        } );
    }
} );

基本上我想要一个输出像:

<span class="red">This is now a red text</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 /符号/ CKEDITOR.command.html#EXEC

也许我在那里覆盖了一些东西,但对我而言,那里似乎没有提到这种东西？请证明我错了:)

Answer 1

您可以使用"basicstyles"插件作为模板,它创建各种样式按钮(粗体,斜体等):
ckeditor/_source/plugins/basicstyles/plugin.js

这是你的插件的代码(基于basicstyles插件),它将是plugin.js文件的内容:
ckeditor/plugins/red/plugin.js

按钮的图标位于此处:
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' } };

除常规样式表外,还将"red"类的样式添加到ckeditor contents.css文件中(除非您将常规表格作为ckeditor中的自定义css文件加载).

在配置文件中添加新插件:

config.extraPlugins = 'red';

并将按钮添加到工具栏 'Red'

对于标签,您可以创建一个数组,其中为每个语言代码分配不同的标签,并根据活动语言代码提取正确的版本.使用editor.langCode得到有效的语言代码.

如果您想避免添加按钮,可以在"格式"选择器中添加新条目.这是带标题的选择器.

好吧,
乔