如何在CKEditor中添加自定义段落格式

Question

在我的项目中,我需要从下拉列表中删除"地址"和"格式化"之类的段落格式,并添加一个名为"链接"的新自定义格式,即Arial,14px,粗体,红色.是否可以在CKEditor中添加自定义段落格式？

Answer 1

使用CKEDITOR.config.formatTags指定一些新的格式:

CKEDITOR.replace( 'editor1', {
    format_tags: 'p;h2;h3;pre;links', // entries is displayed in "Paragraph format"
    format_links: {
        name: 'Links',
        element: 'span',
        styles: {
            color: 'red',
            'font-family': 'arial',
            'font-weight': 'bold'
        }
    }
} );

要了解有关样式的更多信息,请参阅CKEDITOR.styleSet的工作原理.另请注意,从CKEditor 4.1开始,从"段落格式"中删除样式会对高级内容过滤器产生影响.

Answer 2

由于您正在使用Drupal,ckeditor.styles.js是您要查找的文件,这将允许您在样式菜单中添加/编辑/删除条目.

注释掉您不想要的任何条目,并使用类似的内容添加新的段落格式:

{ name : 'Links', element : 'p', attributes : { 'class' : 'links' } },

这会将CSS类添加links到您想要的任何段落,您可以在主题样式表中定义该类.ckeditor.css如果您没有看到CKEditor实例中应用的更改,请确保定义类.

或者,您也可以直接应用内联样式:

{ name : 'Links', element : 'p', attributes : { 'style' : 'font: bold 14px Arial, sans-serif; color: red;' } },

但第一种方法显然更灵活/更干净.

如果您没有立即看到更改,请务必清除Drupal和/或浏览器缓存.