Ckeditor 4 - 删除 nbsp；和 从 Word 粘贴后答案

【问题标题】：Ckeditor 4 - removing nbsp; and after paste from WordCkeditor 4 - 删除 nbsp；和 从 Word 粘贴后
【发布时间】：2013-07-01 02:25:05
【问题描述】：

从 Word 粘贴时，Ckeditor 4 中的清理通常非常出色。但是，当 Word 文档的格式不理想时，我注意到了两件事：

如果 Word 文档包含“&nbsp;&nbsp;”，则会在 Ckeditor 中进行复制。我想在粘贴时简单地插入“”。
从 Word 中粘贴通常会创建“&nbsp;”。我已经通过使用fillEmptyBlocks = false 部分解决了这个问题，这意味着我只剩下“”。

我不确定如何添加额外的 javascript 函数来扩展 Ckeditor 的功能来解决这些问题。 Ckeditor 4 提供了一个高级内容过滤器，但坦率地说，文档让我感到困惑，不清楚它是否可以做到以上。

这是我当前的 CKeditor config.js：

CKEDITOR.editorConfig = function( config ) {
    config.toolbar = <removed>;
    config.format_tags = 'p;h2;h3;div';
    config.contentsCss = '/css/site.min.css';
    config.height = 500;
    config.removePlugins = 'elementspath';
    config.resize_enabled = false;
    config.allowedContent = true;
    config.fillEmptyBlocks = false;
};

我尝试过这种 Ckeditor 3 风格的方法，但似乎不起作用。 evt.data.dataValue 确实包含来自编辑器的 HTML。

CKEDITOR.on('instanceReady', function(ev) {
  ev.editor.on('paste', function(evt) { 
    evt.data.dataValue = evt.data.dataValue.replace('&nbsp;','');
    evt.data.dataValue = evt.data.dataValue.replace('<p></p>;','');
    console.log(evt.data.dataValue);
  }, null, null, 9);
});

答案必须包括通过某种形式的 Ckeditor on paste 事件、与 Ckeditor 交互的函数或通过 ACF 使这项工作。请不要建议在 PHP on-save 中执行此操作，我认为这是最后的手段，我自己可以这样做。

谢谢！

【问题讨论】：

你的意思是Word中的实际文本类似于“This is an example of an entity: ”吗？在这种情况下，将其保留为文本是正确的。或者当粘贴时生成到内容中？对我来说，我用config.removePlugins = 'elementspath, entities'; 处理这个问题，但这只是因为我真的不想要任何实体，这可能不适合你。
Word 文档有时包含 nsbp（看起来像空格），粘贴时在 Ckeditor 源视图中显示为 &nbsp;。虽然 Word 确实有问题，但我只是将其视为 Ckeditor 粘贴阶段的自定义清理阶段。
在那种情况下不会实际上是正确的吗？如果您不想要实体，我将再次完全删除实体插件。我将我的内容保存为 Unicode XML，所以对我来说，实体实际上完全破坏了内容。据我所知，ACF 在这里帮不了你，因为它不涉及内容和有部分内容。
刚刚尝试了删除实体插件。而不是得到 nbsp 它只是一个空白的 nbsp char 但这仍然意味着我在一些如此宽的单词之间有差距 ` ` 而不是 ` `。根本原因是 Word 文档，我认为多次粘贴有时会导致对齐的文本在空格旁边转换为多个 nbsps。这完全是一个 Word 问题，但我想拦截并修复粘贴到 Ckeditor 中的问题。基本上我只是想把它们全部去掉，不管是否有任何 nbsp。

标签： javascript ckeditor

【解决方案1】：

经过大量调试后想通了。问题中的方法实际上是正确的，但我错误地认为 JS 替换函数进行了全局替换。所以发生的事情只是第一个实例被删除了。这是使用正则表达式样式语法的修改版本，全局替换：

CKEDITOR.on('instanceReady', function(ev) {
  ev.editor.on('paste', function(evt) { 
    evt.data.dataValue = evt.data.dataValue.replace(/&nbsp;/g,'');
    evt.data.dataValue = evt.data.dataValue.replace(/<p><\/p>/g,'');
    console.log(evt.data.dataValue);
  }, null, null, 9);
});

【讨论】：

我们遇到了同样的问题。感谢您解决这个问题。

【解决方案2】：

我使用的是 CKEditor 4.7，就我而言，当我从 Gmail 粘贴时，它会在最终结果中添加  。在编辑器中显示为一个大的空白区域。为了解决这个问题，我在下面使用了CSS。

p:not(:first-child):empty {
    display:none
}
p:not(:first-child) > br {
    display:none
}

【讨论】：