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

但结果如下：

我在做什么w荣？ 我应该创建其他配置吗？ 如何使用自定义样式添加选择元素？

Answer 1

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

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

它应该返回一个对象。

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