excel - 粘贴为纯文本 Contenteditable div & textarea (word/excel...)

Question

我想将文本粘贴到内容可编辑的 div 中，但作为文本区域使用react。
请注意，我想保留格式，因为我会将其粘贴到我的文本区域(来自 word、excel ...)。
所以。
1) 在 contenteditable div 中粘贴文本
2)我从剪贴板中获取文本
3)我将我的值从剪贴板推送到我的文本区域，(不知道如何？？)
4) 从我的 textarea 中获取值(value)并将其放入我的 contenteditable div

有什么建议么？

Answer 1

我是 CKEditor 的核心开发人员，巧合的是，在过去的 4 个月里，我一直在从事剪贴板支持和相关工作 :) 不幸的是，我无法向您描述如何处理粘贴的整个方式，因为 impl 的故事太即使我自己写了 impl 对我来说也很棘手:D

但是，这里有一些提示可能会对您有所帮助:

不要编写所见即所得的编辑器——使用现有的编辑器。它会消耗你所有的时间，你的编辑器仍然会出错。我们和其他人......两个主要编辑(猜猜为什么只有三个存在)多年来一直在努力，我们仍然有完整的错误列表;)。

如果您真的需要编写自己的编辑器，请查看 http://dev.ckeditor.com/browser/CKEditor/trunk/_source/plugins/clipboard/plugin.js - 这是旧的 impl，在我重写它之前，但它在任何可能的地方都有效。代码很糟糕......但它可能会对你有所帮助。

您将无法仅通过一个事件处理所有浏览器 paste .为了处理所有粘贴方式，我们同时使用 - beforepaste和 paste .

您需要处理许多(大量:D)浏览器的怪癖。我无法向您描述它们，因为即使几周后我也不记得所有这些了。但是，我们文档中的一小段摘录可能对您有用:

粘贴命令(由非本地粘贴使用 - 例如，从我们的工具栏中)

* fire 'paste' on editable ('beforepaste' for IE)
* !canceled && execCommand 'paste'
* !success && fire 'pasteDialog' on editor

从 native 上下文菜单和菜单栏中粘贴

(Fx & Webkits are handled in 'paste' default listner.
Opera cannot be handled at all because it doesn't fire any events
Special treatment is needed for IE, for which is this part of doc)
* listen 'onpaste'
* cancel native event
* fire 'beforePaste' on editor
* !canceled && getClipboardDataByPastebin
* execIECommand( 'paste' ) -> this fires another 'paste' event, so cancel it
* fire 'paste' on editor
* !canceled && fire 'afterPaste' on editor

其余的技巧 - 在 IE 上，我们监听两个粘贴事件，其余的仅监听 paste .我们需要阻止 IE 上的一些事件，因为我们同时监听两者，有时这可能会导致双重处理。这是我猜最棘手的部分。

Note that I want to keep the formatting as I would paste it in my textarea (from word, excel...).

您想保留格式的哪些部分？ Textarea 将只保留基本的 - block 格式。

见 http://dev.ckeditor.com/browser/CKEditor/trunk/_source/plugins/wysiwygarea/plugin.js#L120直到第 123 行 - 这是任务的最后一部分 - 将内容插入选择。