CKEditor 格式类 [英] CKEditor format class

问题描述

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

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.

请看我的插件代码:

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>

非常感谢您帮助我.

我用来达到此目的的来源:http://docs.cksource.com/CKEditor_3.x/Howtohttp://docs.cksource.com/CKEditor_3.x/Tutorials/Timestamp_Pluginhttp://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.command.html#exec

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 : )

推荐答案

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

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

这是您插件的代码(基于 basicstyles 插件)，它是位于此处的 plugin.js 文件的内容:
ckeditor/plugins/red/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

按钮的图标将位于此处:
ckeditor/plugins/red/images

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

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

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

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

And add the button to your toolbar 'Red'

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

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.

好好的，
乔

这篇关于CKEditor 格式类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！