ckeditor 5 禁用内容过滤

Question

我注意到，当从编辑器中提取数据时，它会过滤一些类和样式。 我想使用与编辑器完全相同的样式。

所以，我有两个问题需要解决。

1. 如何防止发生类和样式过滤。
2. 如何将 CSS 提取到单独的文件中？

我知道在使用以前的 ckeditor 版本时，您可以使用以下内容来防止其过滤：

config.allowedContent = true;

Answer 1

您可以使用 CKEditor 5 中的常规 HTML 支持插件。更多信息请参阅 docs

这就是我用来根据我的需要启用某些功能的方法。您可以根据您的实施进行定制。

ClassicEditor.create(richEditorElem, {
  htmlSupport: {
    allow: [
      {
        name: /^(div|ul|li|ol|a|button|p|h[1-6])$/,
        classes: true,
        styles: true
      }
    ]
  }
}).then( editor => {

}).catch( error => {
    console.error( error );
});

Answer 2

要完成 Whip 的答案，现在有一个记录的解决方案，请参阅：常规 HTML 支持

首先，您需要导入 GeneralSupport 模块并将其添加到实例的插件列表中：

import { ClassicEditor, GeneralHtmlSupport } from 'ckeditor5';

ClassicEditor
.create( document.querySelector( '#editor' ), {
    plugins: [ GeneralHtmlSupport, /* ... */ ],
} )
.then( /* ... */ )
.catch( /* ... */ );

然后您可以使用

htmlSupport

属性将 CKEditor 配置为接受所有内容：

ClassicEditor
.create( document.querySelector( '#editor' ), {
    plugins: [ GeneralHtmlSupport, /* ... */ ],
    htmlSupport: {
    allow: [
        {
            name: /.*/,
            attributes: true,
            classes: true,
            styles: true
        }
    ]
  }
} )