如何添加自定义样式

debugcn 发表于 Dev

丹尼尔

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

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

埃德森·佩罗托尼（Edson Perotoni）

在经典编辑器（带有工具栏）中，您可以设置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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。