如何在CKEditor中配置样式？

是否有人有在CKEditor中配置样式的正确指南我的目标是定制下拉列表（我只需要一个下拉列表），以提供相同HTML标记的多种样式。例如，

P

标记可以具有以下样式：

，

，

，可以从下拉列表中选择

我试着读了这篇文章，但它有很多遗漏的信息。它使用了大量的CKEditor术语，没有给出架构或执行/初始化管道的概述

我使用的是一个非常简单的CKEditor（如下），我找不到“段落”和“正常”下拉列表之间的区别

文档说明使用以下代码配置工具栏：

config.toolbarGroups = [
    { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
    { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
    { name: 'links' },
    { name: 'insert' },
    { name: 'forms' },
    { name: 'tools' },
    { name: 'document',    groups: [ 'mode', 'document', 'doctools' ] },
    { name: 'others' },
    '/',
    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
    { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
    { name: 'styles' },
    { name: 'colors' },
    { name: 'about' }
];

我在其中一行代码中看到了“样式”，但它没有解释“名称”是什么，以及

{name:styles'}

的作用。删除它将同时删除两个下拉列表，并且没有关于如何自定义下拉列表的提示

然后我发现

config.format_tags = 'p;h1;h2;h3;pre';

但这只允许我删除下拉项，而不是组合框本身

还有

CKEDITOR.styleSet.add

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

同样，它没有解释在初始化管道中放置此代码或执行序列的位置。它没有解释“my_style”值是如何使用的，它是否是对其他配置的引用。我也不太明白注释“块级样式”和“内联样式”的目的。似乎无关紧要？配置代码似乎无法区分这两个选项。

CKEDITOR.replace（'CKEDITOR'{
身高：500，
contentsCss:“.helloworld{背景色：#C0C0C0；}.helloworld2{背景色：#5555C0；}”，
docType:“”，
工具栏：[
{name:'document'，组：['mode'，'document'，'doctools']，项：['Source'，'-'，'Save'，'NewPage'，'Preview'，'Print'，'-'，'Templates']}，
{name:'clipboard'，组：['clipboard'，'undo']，项：['Cut'，'Copy'，'Paste'，'PasteText'，'PasteFromWord'，'-'，'undo'，'Redo']}，
{name:'editing'，组：['find'，'selection'，'spellchecker']，项：['find'，'Replace'，'-'，'SelectAll'，'-'，'Scayt']}，
{name:'forms'，items:['Form'，'Checkbox'，'Radio'，'TextField'，'textare'，'Select'，'Button'，'ImageButton'，'HiddenField']}，
'/',
{name:'basicstyles'，组：['basicstyles'，'cleanup']，项：['Bold'，'Italic'，'Underline'，'Strike'，'Subscript'，'Superscript'，'-'，'RemoveFormat']，
{name:'段落'，组：['list'，indent'，'blocks'，'align'，'bidi']，项：['NumberedList'，'BulletedList'，'-'，'Outdent'，'indent'，'-'，'Blockquote'，]}，
{name:'links'，项：['Link'，'Unlink'，'Anchor']}，
{name:'insert'，项：['Image'，'Flash'，'Table'，'HorizontalRule'，'Smiley'，'SpecialChar'，'PageBreak'，'Iframe']}，
'/',
{name:'styles'，项：['styles']}，
{name:'tools'，items:['Maximize'，'ShowBlocks']}，
{name:'其他'，项：['-']}，
{name:'about'，items:['about']}
],
样式集：[
{name:'段落'，元素：'p'，属性：{'class'：'helloworld'}，
{name:'Paragraph2'，元素：'p'，属性：{'class'：'helloworld2'}，
]
} );