Question

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

我尝试阅读此documentation，但它有很多缺少的信息。它使用了很多CKEditor术语，并没有概述体系结构或执行/初始化管道。

我正在使用一个非常简单的CKEditor（下面），我找不到“Paragraph”和“Normal”下拉列表之间的区别。

enter image description here

文档说使用此代码配置工具栏：

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'，它是否是对其他配置的引用。我也不太明白评论“块级样式”和“内联样式”的目的。似乎无关紧要？配置代码似乎没有区分这两个。

Answer 1

＆＃13;

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

＆＃13;

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

如何在CKEditor中配置样式？

1 个答案: