16

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

我该如何做到这一点？到目前为止，我的代码如下所示：

<script type="text/javascript">

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

</script>
4

6 回答 6

44 
<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语法的完整文档：

于 2011-06-23T23:35:23.220 回答
17

这对我有用

CKEDITOR.addCss('body{background:blue;}');
于 2013-07-24T20:43:18.020 回答
8

正如已经提到的，有一个页面解释了如何设置一组自定义样式。该页面上隐藏的小宝石（并不是很清楚）是，您可以在配置中定义内联样式，而不是创建一组命名样式，如下所示：

    stylesSet : [
    {
        name : 'Green Title',
        element : 'h3',
        styles :
        {
            'color' : 'Green'
        }
    } ],
于 2012-02-22T17:11:53.893 回答
6

最好的方法是使用这个插件：http ://ckeditor.com/addon/stylesheetparser

将它粘贴到 'ckeditor/plugins' 目录中，然后在你的 'ckeditor/config.js' 中包含类似这样的内容：

config.extraPlugins = 'stylesheetparser';
config.contentsCss = '/css/inline-text-styles.css';
config.stylesSet = [];

其中“/css/inline-text-styles.css”是指向您自己的 webroot 中的 css 文件夹的路径，位于 ckeditor 之外。这使您不必将 css 与 javascript 混合使用。

于 2014-03-05T04:07:34.320 回答
5

在这里聚会有点晚了，但默认样式是_source/plugins/styles/styles/default.js. 您可以将其用作您的样式配置并添加样式，它将有效地附加。

于 2011-01-24T20:14:03.613 回答
-8

请查看@metavida 答案以获得比这更好的答案

<script type="text/javascript">

    CKEDITOR.replace( 'editor1',{

          uiColor : '#9AB8F3',
          stylesSet.add('default', [
               { name: 'My Custom Block', element: 'h3', styles: { color: 'Blue'} },
               { name: 'My Custom inline style', element: 'q'}
          ]);    
    });

</script>

尽管如果您在多个地方使用它，最好将其放入 stylescombo\styles\default.js 文件中，并根据 api 相应地更新您的 config.js 文件。

于 2010-03-29T14:51:35.000 回答