配置 CKEditor pasteFilter 以去除某些内联样式答案

【问题标题】：configuring CKEditor pasteFilter to strip out certain inline styles配置 CKEditor pasteFilter 以去除某些内联样式
【发布时间】：2019-08-18 11:37:30
【问题描述】：

我的利益相关者在 Drupal (8.6.13) 中使用 CKEditor 版本 4.10.1。

他们有一个用例，他们经常从 Google Docs 复制并粘贴到 WYSIWYG 文本区域。 Google 使用内联 CSS 属性。这是一个示例：

<span style="font-size:36pt;font-family:Merriweather;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Your Name</span></p>

他们经常需要更改文本的大小以及字体。在上面的示例中，它们是style 标记中的font-size:36pt;font-family:Merriweather;。

我正在查看pasteFilter 配置指令。在示例中，他们展示了如何过滤某些标签，以及具有某些属性的标签：

config.pasteFilter = 'h1 h2 p ul ol li; img[!src, alt]; a[!href]';

但是，我要删除的只是某些 css 样式。例如，如果粘贴输入是

 <span style="font-size:36pt;font-family:Merriweather;vertical-align:baseline;">Hello</span>

那么我要阅读源代码

 <span style="vertical-align:baseline;">Hello</span>

即仅删除 font-size:36pt;font-family:Merriweather;。（而且我想删除任何 font-size 和 font-family 规范。）

pasteFilter 可以吗？如果是这样，我该如何表达？

编辑白名单解决方案不符合我们的接受标准，因为我的利益相关者希望保留其他指令，例如粗体、斜体等。我们不想剥离所有样式，或整个span 标签；我们只想删除font-size 和font-family。

【问题讨论】：

这行得通吗？ config.disallowedContent = '*{font*}';
插件是一个选项？ ckeditor.com/docs/ckeditor4/latest/examples/removeformat.html
您尝试过高级内容过滤器吗？ allowedContent: 'span{vertical-align};' ckeditor.com/docs/ckeditor4/latest/examples/removeformat.html
@Pat_Morita 我不确定这是否可行——我想允许一切除了font-size 和font-family。
已将其添加到我的网站 ckeditor 配置中。有用。因此，我假设您的配置中的另一个设置停用了不允许的内容，例如“CKEDITOR.config.allowedContent = true”，或者您安装了字体插件，或者......或者......或者......我们可能会在聊天中继续这样做

标签： ckeditor

【解决方案1】：

根据How to Allow Everything Except…，可以使用：

config.allowedContent = {
    $1: {
        // Use the ability to specify elements as an object.
        elements: CKEDITOR.dtd,
        attributes: true,
        styles: true,
        classes: true
    }
};
config.disallowedContent = '*{font*}';
// if you want to be more specific: config.disallowedContent = 'span{font-size,font-family}';

我对其进行了测试，它可以正常工作，请在我创建的 JSFiddle 中亲自查看。

【讨论】：