粘贴为纯文本Contenteditable div& textarea（word / excel ...） [英] Paste as plain text Contenteditable div & textarea (word/excel...)
问题描述
我希望将文本粘贴到一个可供内容的div中，但是作为一个textarea作出反应。
请注意，我想保留格式，因为我将其粘贴到我的textarea（从word，excel ...）
So.
1）将内容粘贴到contenteditable div中
2）我从剪贴板获取文字
3）我把我的价值从剪贴板推到我的textarea，（不知道如何??）
4）从我的textarea获取值并将其放在我的contenteditable div中
任何建议？
I would like the to paste text in a contenteditable div, but reacting as a textarea.
Note that I want to keep the formatting as I would paste it in my textarea (from word, excel...).
So.
1) Paste text in contenteditable div
2) I get the text from clipboard
3) I push my value from clipboard to my textarea, (dont know how??)
4) Get value from my textarea and place it in my contenteditable div
Any suggestions?
推荐答案
我是CKEditor的核心开发人员，最后是巧合4个月我正在剪贴板支持和相关的东西:)不幸的是，我将无法描述你如何处理粘贴的整个方式，因为对我来说，即使在写了自己之后，我的故事对我来说太棘手：D
I'm CKEditor's core developer and by coincidence for last 4 months I was working on clipboard support and related stuff :) Unfortunately I won't be able to describe you the entire way how pasting is handled, because the tales of the impl are too tricky for me even after writing impl by myself :D
但是，这里有一些可能会帮助您的提示：
However, here're some hints that may help you:
-
不要写wysiwyg编辑器 - 使用存在的编辑器。它将消耗所有的时间，仍然你的编辑将是错误的。我们和其他人...两个主要编辑（猜测为什么只有三个存在）正在这个工作多年，我们还有完整的错误列表;）。
Don't write wysiwyg editor - use one that exists. It's going to consume all your time and still your editor will be buggy. We and guys from other... two main editors (guess why only three exist) are working on this for years and we still have full bugs lists ;).
如果您真的需要编写自己的编辑器，请查看 http：// dev .ckeditor.com / browser / CKEditor / trunk / _source / plugins / clipboard / plugin.js - 这是旧的，在我重写之前，它可以在任何可能的地方工作。该代码是可怕的...但它可能会帮助您。
If you really need to write your own editor check out http://dev.ckeditor.com/browser/CKEditor/trunk/_source/plugins/clipboard/plugin.js - it's the old impl, before I rewrote it, but it works everywhere where it's possible. The code is horrible... but it may help you.
您将无法通过一个事件处理所有浏览器糊。要处理所有粘贴方式，我们使用 beforepaste 和粘贴。
You won't be possible to handle all browsers by just one event paste. To handle all ways of pasting we're using both - beforepaste and paste.
您需要处理的浏览器怪异号码（巨大数量：D）。我不能形容你，因为即使在几个星期之后，我也不记得他们了。但是，我们的文档中的小部分可能对您有用：
There's number (huge number :D) of browsers' quirks that you'll need to handle. I can't to describe you them, because even after few weeks I don't remember all of them. However, small excerpt from our docs may be useful for you:
粘贴命令（由非本地粘贴使用 - 例如从我们的工具栏中使用）
Paste command (used by non-native paste - e.g. from our toolbar)
* fire 'paste' on editable ('beforepaste' for IE)
* !canceled && execCommand 'paste'
* !success && fire 'pasteDialog' on editor
从本机上下文菜单&菜单栏
Paste from native context menu & menubar
(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上我们收听粘贴事件，其余仅限于粘贴。我们需要防止IE上的一些事件，因为我们有时候听这些事情可能会导致双倍的处理。这是我猜想的最棘手的部分。
The rest of the trick - On IEs we listen for both paste events, on the rest only for paste. We need to prevent some events on IE, because since we're listening for both sometimes this may cause doubled handling. This is the trickiest part I guess.
请注意，我想保留格式，因为我将其粘贴到我的textarea从word，excel ...）。
Note that I want to keep the formatting as I would paste it in my textarea (from word, excel...).
你想保留哪些部分的格式？ Textarea将只保留基本的块格式。
Which parts of formatting do you want to keep? Textarea will keep only basic ones - blocks formatting.
请参阅 http://dev.ckeditor.com/browser/CKEditor/trunk/_source/plugins/wysiwygarea/plugin.js#L120 第123行 - 这是任务的最后一部分 - 将内容插入到选择中。
See http://dev.ckeditor.com/browser/CKEditor/trunk/_source/plugins/wysiwygarea/plugin.js#L120 up to line 123 - this is the last part of the task - inserting content into selection.
这篇关于粘贴为纯文本Contenteditable div& textarea（word / excel ...）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
