如何在 CKEditor 中配置样式？答案

【问题标题】：How to configure styles in CKEditor?如何在 CKEditor 中配置样式？
【发布时间】：2014-11-06 03:41:42
【问题描述】：

请问有人有在 CKEditor 中配置样式的适当指南吗？ 我的目标是自定义下拉列表（我真的只需要一个下拉列表）以提供同一个HTML标签的多种样式。例如，P 标记可以具有以下样式：<p>、<p class="excerpt">、<p class="highlight">，可以从下拉列表中选择。

我试图阅读这个documentation，但它有很多缺失的信息。它使用了很多 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”是如何使用的，它是否是对其他配置的引用。我也不太了解 cmets“块级样式”和“内联样式”的目的。似乎无关紧要？配置代码似乎并没有区分这两个。

【问题讨论】：

标签： ckeditor

【解决方案1】：

  CKEDITOR.replace( 'ckeditor', {
 height: 500, 
 contentsCss: '.helloworld { background-color:#C0C0C0;}.helloworld2 { background-color:#5555C0;}',
 docType: '<!DOCTYPE HTML>',
toolbar: [
		{ name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
{ name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', ] },
{ name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
{ name: 'insert', items: [ 'Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] },
'/',
{ name: 'styles', items: [ 'Styles'  ] },
{ name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] },
{ name: 'others', items: [ '-' ] },
{ name: 'about', items: [ 'About' ] }
		],
stylesSet: [
    { name: 'Paragraph', element: 'p', attributes: { 'class': 'helloworld' } },
    { name: 'Paragraph2', element: 'p', attributes: { 'class': 'helloworld2' } },
  
]
} );

http://jsfiddle.net/zf9w6tmm/5/

【讨论】：