jquery - 如何更改 CKEDITOR 中的 css 样式规则（例如通过 jQuery）

Question

我花了很多时间在 CKEDITOR 中动态修改 CSS 规则。但结果仍然不令人满意:-)。

我想从 CKEDITOR 中选择 DOM 元素并设置 CSS 样式。然后我想保存CSS的信息（以重新使用文档）。

我读过，最好的方法是使用 jQuery。我已经尝试过了，但没有成功。任何想法如何做到这一点？

非常感谢。

Answer 1

我认为您可以为此使用“dataProcessor”：

CKEDITOR.replace('editor1', {
   on: {
      pluginsLoaded: function(event) {
         event.editor.dataProcessor.dataFilter.addRules({
            elements: {
               a: function(element) {
                  var attr = element.attributes;
                  if(attr.href && attr.href.indexOf('#') === -1) {
                     element.attributes.target = '_blank';
                  }
               },
               // remove script
               script: function(element) {
                  return false;
               }
            }
         });
      }
   }
});

文档：http ://docs.ckeditor.com/#!/api/CKEDITOR.editor-property-dataProcessor

Answer 2

例如，对于 CKEDITOR4，您可以将 css 规则附加为文本

     const styles = `
      .example-css-selector {
        padding: 3px 5px;
        color: red;
        border-radius: 3px;
      }`;
    editor.document.appendStyleText(styles);