Javascript 编辑格式类

我正在编写一个CKEditor插件，将特定类应用于元素。基本上是这个班 正在将文本颜色设置为特定的redish颜色

无论如何，我不知道如何定义包装文本的类

请看我的插件代码：

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/Tutorials/Timestamp_Plugin

也许我读得太多了，但对我来说，这里似乎没有提到这类事情？请证明我错了：）

您可以使用“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';

然后将该按钮添加到工具栏

“红色”

对于标签，您可以创建一个数组，其中为每个语言代码分配了不同的标签，并根据激活的语言代码提取正确的版本。使用

editor.langCode

获取激活的语言代码

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

祝你身体健康，

---

乔

哇，非常感谢你给出了这个非常详细的答案。帮了我很多忙。再次感谢你！顶部不客气，很高兴听到这有帮助Joe@codewaggle如果我的插件有多个按钮，并且必须更改多个颜色，该怎么办？就像这里：@RaphaelDDL在这个答案的插件代码块的末尾是一个注释掉的部分，上面写着“打开对话框窗口”，只要搜索页面就可以找到它。已经有一段时间了，但是我想我把函数放在了配置文件中，这样它就可以放在iframe和相同的名称空间中。您可以将函数放在主页面中，并从父窗口调用它@RaphaelDDL JSFIDLE代码看起来很棒（注释用法不错！）。我想我没有尝试过使用父窗口方法，所以很高兴知道它是有效的。很高兴我能帮忙。我删除了以前的一些评论，因为它们不再需要了。