向CKEditor添加自定义样式

Question

向CKEditor添加自定义样式

19

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

我该如何实现这一点？我目前的代码看起来像这样：

<script type="text/javascript">

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

</script>

- Elitmiar

4

您可以很容易地向编辑器添加自定义样式。此页面展示了如何操作。 - Vincent Ramdhanie

请选中正确答案，因为当前选中的答案表明另一个答案更好。 - Paul

6个回答

18

这对我有效

CKEDITOR.addCss('body{background:blue;}');

- surtyaar

1

这个函数应该在编辑器实例创建之前被调用（来自文档）。 - Arsen K.

这是一个非常好的、简单的答案。 - Andy Brown

太完美了！正是我所需要的。 - egmfrs

8

如前所述，有一篇页面说明如何设置一组自定义样式。这个页面上隐藏的小宝石（并不是很清楚）是，您可以在配置中内联定义样式，而无需创建命名的样式集，像这样：

    stylesSet : [
    {
        name : 'Green Title',
        element : 'h3',
        styles :
        {
            'color' : 'Green'
        }
    } ],

- Garret Wilson

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' 是你网站根目录外的自己的 css 文件夹的路径，这样就不用将 css 和 javascript 混合在一起了。

- joshua.paling

这似乎很有帮助，但你说“你自己的CSS文件夹”，然后显示一个文件路径。该路径是否取决于ckeditor本身的位置，还是始终从根目录开始？我无法使其工作，我认为问题出在路径上。 - bcsteeve

5

虽然来晚了一些，但是默认样式位于 _source/plugins/styles/styles/default.js。你可以将其作为样式配置并添加样式，这样就相当于在追加。

- ZiggyTheHamster

-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文件。

- dove

9

这甚至不是有效的JS代码！ - Matti Virkkunen

@Matti 什么不是具体的？ - dove

3

您的方法调用位于对象字面量中间是无效的。 - Matti Virkkunen

2

我刚刚添加了一个答案，将CKEDITOR.stylesSet.add和stylesSet选项分成了两个调用。我在自己的网站上使用了我的答案中的代码变体。 - metavida

3

给所有那些给我点踩的人，我不能删除这个回答因为它是被接受的答案！ - dove

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- metavida · Accepted Answer

<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语法文档：