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

但结果如下：

enter image description here

我做错了吗？我应该创建其他配置吗？如何使用自定义样式添加select选项元素？

Answer 1

我尝试了你的配置，一切都没问题。只需确保您加载了stylescombo插件。加载编辑器后，调用（在控制台中）：

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

它应该返回一个对象。

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

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

1 个答案: