CKEditor 4.5.1 - 避免在粘贴到不同页面和浏览器时删除样式属性

Question

我们使用的是 CKEditor 版本 4.5.1，粘贴带有背景和内联样式的 table 时出现问题。

下面是我们正在尝试复制和粘贴的代码：

<table border="0" cellpadding="50" cellspacing="0" style="border: 3px solid #545454;" width="100%">
<tbody>
    <tr>
        <td style="background:#000">
        <table border="0" cellpadding="25" cellspacing="0" style="background: #fff; border: 2px solid #FF9900;" width="100%">
            <tbody>
                <tr>
                    <td>Test Table</td>
                </tr>
            </tbody>
        </table>
        </td>
    </tr>
</tbody>

这在以下情况下工作正常：

仅从 chrome 复制并粘贴到 chrome 同一页面。
chrome 到 FF - 仅在右键单击并粘贴时有效
chrome 到 IE，但它添加了一些内联样式，如 border-image: none;
Firefox 转 FF，FF 转 IE。
IE 到 IE。

在以下情况下不起作用：

从chrome复制并粘贴到chrome的另一页，Chrome到FF，chrome到IE
FF 到 chrome
IE 转 chrome，IE 转 FF。

IE = Internet Explorer，FF = Firefox

这也可以在下载的示例页面 (ckeditor\samples\index.html) 中重现。

Link 我的 build-config.js.

以下是 CKEditor 配置设置：

 CKEDITOR.disableAutoInline = true;
    CKEDITOR.config.height = 100;
    CKEDITOR.config.width = '15%';
    CKEDITOR.config.autoParagraph = false;
    CKEDITOR.config.enterMode = CKEDITOR.ENTER_BR;
    CKEDITOR.config.shiftEnterMode = CKEDITOR.ENTER_P;
    CKEDITOR.config.allowedContent = true;
    CKEDITOR.config.protectedSource.push(/<(script)[^>]*>.*<\/script>/ig);
    CKEDITOR.config.extraAllowedContent = 'script(*)[*]{*};';
    CKEDITOR.config.title = false;

请告诉我如何处理这个问题。

Answer 1

在众多功能中，CKEditor 4.5 引入了一个特殊的 paste filter（独立于 ACF 工作）。它本身是一个有用的功能，但由于 Chrome 糟糕的剪贴板集成而变得至关重要。一般来说，基于 Blink 和 Webkit 的浏览器会在剪贴板 HTML 中放入充满内联样式的内容（原始 HTML 中不存在）。并且 CKEditor 稍后必须清理这个混乱，因此需要这个过滤器。好处是它必须仅在内容 CKEditor 无法将复制的内容放入剪贴板本身时应用。这是 CKEditor 4.5 引入的另一件事——只要浏览器允许，它就会自行处理复制和剪切。

我自己写了 config.pasteFilter 选项的文档，所以让我引用我写的部分内容：

Note that the paste filter is applied only to external data. There are three data sources:

copied and pasted in the same editor (internal),

copied from one editor and pasted into another (cross-editor),

coming from all other sources like websites, MS Word, etc. (external).

If Advanced Content Filter is not disabled, then it will also be applied to pasted and dropped data. The paste filter job is to "normalize" external data which often needs to be handled differently than content produced by the editor.

This setting defaults to 'semantic-content' in Chrome, Opera and Safari (all Blink and Webkit based browsers) due to messy HTML which these browsers keep in the clipboard. In other browsers it defaults to null.

如果您将此文档与您得到的结果进行比较，您应该会看到一个匹配项。所以解决方案是扩展 config.pasteFilter 设置，你甚至可以通过访问 editor.pasteFilter:

动态地做些什么

editor.pasteFilter.allow( 'table{background*,border*}' );

注意：我使用 * 来匹配所有 background-* 和 border-* 属性，因为您无法判断浏览器会将哪些内容放入剪贴板。你可以期待那里的一切。

CKEditor 4.5.1 - 避免在粘贴到不同页面和浏览器时删除样式属性

CKEditor 4.5.1 - Avoid removing style attributes while pasting into different page and browser

ckeditor

ckeditor4.x