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/symbols/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”类的样式添加到 ckeditorcontents.css 文件中（除非您将常规表作为自定义 css 文件加载到 ckeditor 中）。

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

config.extraPlugins = 'red';

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

对于标签，您可以创建一个数组，其中分配给每种语言代码的不同标签，并根据活动语言代码。使用 editor.langCode 获取活动语言代码。

如果您想避免添加按钮，可以向“格式”选择器添加一个新条目。它是带有标题的选择器。

祝你好运，
乔