0

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

以下是我们尝试复制和粘贴的代码：

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

编辑器1.jpg

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

  1. 仅从 chrome 复制和粘贴到 chrome 同一页面。
  2. chrome to FF - 仅在右键单击并粘贴时有效
  3. chrome 到 IE，但它添加了一些内联样式，如边框图像：无；
  4. Firefox 到 FF，FF 到 IE。
  5. IE 到 IE。

它在以下情况下不起作用：

  1. 从chrome复制粘贴到chrome的另一页，chrome到ff，chrome到ie
  2. FF转镀铬
  3. IE 到 chrome，IE 到 FF。

IE = Internet Explorer，FF = 火狐

这也可以在下载的示例页面（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;

请让我知道如何处理这个问题。

4

1 回答 1

1

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

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

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

  • 在同一个编辑器（内部）中复制并粘贴，
  • 从一个编辑器复制并粘贴到另一个（交叉编辑器），
  • 来自所有其他来源，如网站、MS Word 等（外部）。

如果未禁用高级内容过滤器，则它也将应用于粘贴和删除的数据。粘贴过滤器工作是“规范化”外部数据，这些数据通常需要与编辑器生成的内容不同的处理方式。

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

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

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

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

于 2015-07-20T12:41:44.807 回答