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

如文档中所述

打开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';

Answer 2

我们在本地下载的CKEditor库中遇到了问题，作为解决方案，我们选择从在线内容交付网络(CDN(中使用CKEditor库。下面提供的代码片段演示了成功的实现：

<script src="https://cdn.ckeditor.com/4.16.0/standard/ckeditor.js"></script>

<textarea name="editor" id="editor" rows="10" cols="80"></textarea>

<script>
CKEDITOR.replace('editor', {
toolbarGroups: [
{ name: 'editing',     groups: [ 'find', 'selection' ] },
{ name: 'forms' },
{ name: 'basicstyles', groups: [ 'basicstyles' ] },
{ name: 'paragraph',   groups: [ 'list', 'align', 'bidi' ] },
{ name: 'links' },
{ name: 'styles' }
],
removeButtons: 'Cut,Copy,Paste,Undo,Redo,Anchor,Underline,Strike,Subscript,Superscript,Styles',
removeDialogTabs: 'link:advanced',
format_tags: 'p;h1;h2;h3;h4',
format_h1: { element: 'h1', name: 'Heading 1' },
format_h2: { element: 'h2', name: 'Heading 2' },
format_h3: { element: 'h3', name: 'Heading 3' },
format_h4: { element: 'h4', name: 'Heading 4' }
});
</script>