Question

我们正在使用CKEditor版本4.5.1，并且在使用背景和内联样式粘贴表时会出现问题。

以下是我们正在尝试复制的代码＆amp;粘贴：

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

在以下情况下工作正常：

复制＆amp;从Chrome到Chrome仅粘贴相同的页面。
chrome to FF - 仅在右键单击并粘贴时才起作用
chrome到IE，但它添加了一些内联样式，如border-image：none;
Firefox到FF，FF到IE。
IE到IE。

在以下情况下无效：

从Chrome复制并将其粘贴到另一页Chrome，Chrome到FF，Chrome到IE
FF to chrome
IE到Chrome，IE到FF。

IE = Internet Explorer，FF = Firefox

这也可以在下载的样本页面（ckeditor \ samples \ index.html）中重现。

我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选项的文档，所以让我引用我写的部分内容：

请注意，粘贴过滤器仅适用于外部数据。有三个数据源：


复制并粘贴在同一编辑器（内部），

从一个编辑器复制并粘贴到另一个编辑器（交叉编辑器），

来自所有其他来源，如网站，MS Word等（外部）。


如果未禁用高级内容过滤器，则它也将应用于粘贴和删除的数据。粘贴过滤器的工作是＆＃34;标准化＆＃34;外部数据通常需要以与编辑器生成的内容不同的方式处理。

此设置默认为Chrome，Opera和Safari（所有基于Blink和Webkit的浏览器）中的'semantic-content'，因为这些浏览器在剪贴板中保留了混乱的HTML。在其他浏览器中，默认为null。

如果您将此文档与您拥有的结果进行比较，则应该看到匹配项。因此，解决方案是通过访问config.pasteFilter来扩展editor.pasteFilter设置，甚至可以动态执行的操作：

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

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

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

1 个答案: