CKEditor 4-如何将H2，H3等添加到工具栏

问题描述

查看以下文档：https://ckeditor.com/docs/ckeditor4/latest/features/styles.html

因此添加样式集应该是这样，但我无法在工具栏中显示H2或H3项：

CKEDITOR.stylesSet.add( 'my_styles',[
    // Block-level 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',styles: { 'background-color': 'Yellow' } }
] );


CKEDITOR.editorConfig = function( config ) {
    
    config.extraPlugins = 'firstname,MediaEmbed,justify,image';
    
    //config.forcePasteAsPlainText = true;
    
    config.extraAllowedContent = 'iframe[*]';
    
    config.toolbar = 'normal';
    
    config.toolbar_normal = [
        { name: 'basicstyles',items: [ 'Bold','Italic','Underline','Strike' ] },{ name: 'paragraph',items: [ 'NumberedList','BulletedList','JustifyLeft','JustifyCenter','JustifyRight' ] }        
    ];
    
    config.toolbar_Emails = [
        { name: 'basicstyles','JustifyRight' ] }

    ];
    
    config.removeDialogTabs = 'link:advanced;link:target';
    
    config.stylesSet = 'my_styles';

};

解决方法

如docs

中所述

打开config.js目录中可用的ckeditor文件，然后按以下方式编辑config.format_tags条目以显示文本格式工具栏。

// Enable all default text formats:
config.format_tags = 'p;h1;h2;h3;h4;h5;h6;pre;address;div';

// Enable a limited set of text formats:
config.format_tags = 'p;h1;h2;pre;div';