向 CKEditor 添加自定义样式

发布于 2024-08-19 02:51:53 字数 256 浏览 3 评论 0原文

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

我该如何实现这个目标？到目前为止我的代码如下所示：

<script type="text/javascript">

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

</script>

原文

I recently added CKEditor to my app and I would like to include my own CSS stylesheets within the editor so that I can select them within the editor.

How do I accomplish this? My code so far looks like this:

<script type="text/javascript">

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

</script>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

琉璃繁缕 2024-08-26 02:51:53

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

<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>

You can also read the full documentation of the stylesSet.add syntax:

回复收藏 0 原文

风筝有风，海豚有海 2024-08-26 02:51:53

这对我有用

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

This works for me

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

回复收藏 0 原文

岁月苍老的讽刺 2024-08-26 02:51:53

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

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

As has already been mentioned, there is a page explaining how to set up a set of custom styles. What the little gem hidden on that page (and not really clear) is that rather than creating a named set of styles, you can define the styles inline in your configuration, like this:

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

回复收藏 0 原文

坐在坟头思考人生 2024-08-26 02:51:53

最好的方法是使用这个插件： 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 混合在一起。

The best way is to use this plugin: http://ckeditor.com/addon/stylesheetparser

Paste it inside the 'ckeditor/plugins' directory, then include something like this in your 'ckeditor/config.js':

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

Where '/css/inline-text-styles.css' is a path to your own css folder in your webroot, outside of ckeditor. That saves you having to mix css with javascript.

回复收藏 0 原文

┼── 2024-08-26 02:51:53

有点晚了，但默认样式位于 _source/plugins/styles/styles/default.js 中。您可以使用它作为样式配置并添加样式，它将有效地附加。

回复收藏 0 原文

九歌凝 2024-08-26 02:51:53

请查看 @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 文件。

Please look at @metavida answer for a better answer than this

<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>

Though if you're using this in more than one place it'd be best to look at putting this into the stylescombo\styles\default.js file and updating your config.js file accordingly as per api.

回复收藏 0 原文

~没有更多了~