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

Question

查看这些文档：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', element: 'span', 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', items: [ 'Bold', 'Italic','Underline','Strike' ] },
        { name: 'paragraph', items: [ 'NumberedList', 'BulletedList', 'JustifyLeft', 'JustifyCenter', 'JustifyRight' ] }

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

};

Answer 1

如docs

中所述

打开 ckeditor 目录中的 config.js 文件，然后按以下方式编辑 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';

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

CKEditor 4 - How to add H2, H3, etc to toolbar

ckeditor

ckeditor4.x

如docs