javascript - 内联 CKEditor - 无法显示自定义样式集

Question

我是 CKEditor 的新手，我尝试设置内联编辑器。

在config.js中我放置了以下代码:

/**
* @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.html or http://ckeditor.com/license
*/

CKEDITOR.stylesSet.add(
    'my_styles',
    [
        // Block Styles
        {
            name    :   'Blue Title',
            element :   'h2',
            styles  :   {
                'color' :   'Blue'
            }
        },
        {
            name    :   'Red Title',
            element :   'h3',
            styles  :   {
                'color' :   'Red'
            }
        },

        // Inline Styles
        {
            name        :   'CSS Style',
            element     :   'span',
            attributes  :   {
                'class' :   'my_style'
            }
        },
        {
            name    :   'Marker: Yellow',
            element :   'span',
            styles  :   {
                'background-color'  :   'Yellow'
            }
        }
    ]
);

CKEDITOR.editorConfig   =   function(config)
    {
        // The toolbar groups arrangement, optimized for a single toolbar row.
        config.toolbarGroups    =   [
        {
            name    :   'document',
            groups  :   [
                'mode',
                'document',
                'doctools'
            ]
        },
        {
            name    :   'clipboard',
            groups  :   [
                'clipboard',
                'undo'
            ]
        },
        {
            name    :   'editing',
            groups  :   [
                'find',
                'selection',
                'spellchecker'
            ]
        },
        {
            name    :   'forms'
        },
        {
            name    :   'basicstyles',
            groups  :   [
                'basicstyles',
                'cleanup'
            ]
        },
        {
            name    :   'paragraph',
            groups  :   [
                'list',
                'indent',
                'blocks',
                'align',
                'bidi'
            ]
        },
        {
            name    :   'links'
        },
        {
            name    :   'insert'
        },
        {
            name    :   'styles'
        },
        {
            name    :   'colors'
        },
        {
            name    :   'tools'
        },
        {
            name    :   'others'
        }
    ];

    // The default plugins included in the basic setup define some buttons that
    // are not needed in a basic editor. They are removed here.
    config.removeButtons            =   'Cut,Copy,Paste,Undo,Redo,Anchor,Underline,Strike,Subscript,Superscript';

    // Dialog windows are also simplified.
    config.removeDialogTabs         =   'link:advanced';

    config.skin                     =   'moono-dark';
    config.contentLanguage          =   'el';
    config.defaultLanguage          =   'el';
    config.language                 =   'el';
    config.dialog_buttonsOrder      =   'OS';
    config.forcePasteAsPlainText    =   true;
    config.htmlEncodeOutput         =   true;

    config.linkShowAdvancedTab      =   false;
    config.linkShowTargetTab        =   false;
    config.removeButtons            =   '';
    config.stylesSet = 'my_styles';
};

我使用以下代码运行内联 CKEditor:

CKEDITOR.disableAutoInline  =   true;
CKEDITOR.inline('profile_description');

但结果如下:

我做错了什么吗？我应该创建其他配置吗？如何添加具有自定义样式的选择选项元素？

Answer 1

我尝试了你的配置，一切正常。只需确保您加载了 stylescombo 插件即可。加载编辑器后，调用(在控制台中):

console.log( CKEDITOR.instances[ 'profile_description' ].plugins.stylescombo );

它应该返回一个对象。

如果没有，请检查 stylescombo 在您的 CKEditor 版本 ( there are different builds ) 中是否可用，并使用 CKEDITOR.config.plugins调整加载的插件列表。