javascript - 向 CKEditor 添加自定义样式

Question

我最近将 CKEditor 添加到我的应用程序中，我想在编辑器中包含我自己的 CSS 样式表，以便我可以在编辑器中选择它们。

我该如何实现？到目前为止，我的代码如下所示:

<script type="text/javascript">

    CKEDITOR.replace( 'editor1',{
        uiColor : '#9AB8F3',
    });

</script>

Answer 1

<script type="text/javascript">
  // This code could (may be should) go in your config.js file
  CKEDITOR.stylesSet.add('my_custom_style', [
    { name: 'My Custom Block', element: 'h3', styles: { color: 'blue'} },
    { name: 'My Custom Inline', element: 'span', attributes: {'class': 'mine'} }
  ]);
  // This code is for when you start up a CKEditor instance
  CKEDITOR.replace( 'editor1',{
    uiColor: '#9AB8F3',
    stylesSet: 'my_custom_style'
  });
</script>

您还可以阅读stylesSet.add 语法的完整文档:

• CKEditor 4 documentation
• CKEditor 3 documentation ，正如文森特提到的。
• CKEditor 4 How Do I Customize the Styles Drop-Down List?
• CKEditor 3 How Do I Customize the Styles Drop-Down List?