如何添加自定义样式

Question

我无法添加自己的样式，当我在浏览器中重新加载页面时，我的样式没有添加

    CKEDITOR.addCss('a{color: inherit; text-decoration: none}')

    CKEDITOR.stylesSet.add([{
      name: 'My Custom styles',
      element: 'span',
      styles: {
        'padding': '10px',
        'border-radius': '8px',
        'background-color': '#6950ab',
        'color': '#ffffff!important',
        'display': 'inline-block'
      }
    }])

    CKEDITOR.replace('container');
  </script>```

Answer 1

在经典编辑器（带工具栏）中，您可以设置 config.contentsCss

    CKEDITOR.stylesSet.add('myStylesComboBox',[{
      name: 'my span style',
      element: 'span',
      attributes: {
        'class': 'box1',        
        }
    },
     {
      name: 'my span2 style',
      element: 'span',
      attributes: {
        'class': 'box2'          
        }
    }]);

      var ContentsCss = [
'span.box1{padding:10px;border-radius:8px;background-color:#6950ab;color: #ffffff!important;display:inline-block}',
'span.box2{padding:10px;border-radius:8px;background-color:#6770ab;color: #ffffff!important;display:inline-block}'];


    CKEDITOR.replace( 'editor1',{
      stylesSet: 'myStylesComboBox',
      contentsCss: ContentsCss
    } );

示例：

https://codepen.io/edsonperotoni/pen/JjjvZxz

参考文献：

https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-contentsCss

https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-stylesSet

Answer 2

请在 CKEditor 中为特定用例设置样式时使用以下规则（由 CKEditor 支持共享）：

预览和打印

请通过直接更改 contents.css 文件中的规则或通过提供具有 CKEDITOR.config.contentsCss 选项的不同文件来更改默认样式 https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-contentsCss

导出为 PDF 插件：

请使用 https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-exportPdf_stylesheets

提供不同的样式

或使用 CKEDITOR.config.contentsCss 选项 https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-contentsCss 更改默认样式或使用 CKEDITOR.addCss() https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR 对其进行扩展。 html#method-addCss.

如果您无法加载配置中定义的CSS文件，您可以参考下面的link - contentsCss: ckeditor - contentsCss not loading custom styles

如何添加自定义样式

How to add custom styles

javascript

ckeditor