粘贴为纯文本 Contenteditable div &文本区域(word/excel...) [英] Paste as plain text Contenteditable div & textarea (word/excel...)
问题描述
我希望将文本粘贴到可编辑的 div 中，但作为文本区域做出反应.
请注意，我想保留格式，因为我会将其粘贴到我的文本区域中(来自 word、excel...).
所以.
1) 在 contenteditable div 中粘贴文本
2)我从剪贴板中获取文本
3)我将我的值从剪贴板推送到我的文本区域，(不知道如何??)
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 个月我一直在研究剪贴板支持和相关的东西:) 不幸的是我无法描述你是如何处理粘贴的整个方式，因为即使在我自己编写 impl 之后，impl 的故事对我来说也太棘手了: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:
不要编写所见即所得的编辑器——使用已经存在的编辑器.它会占用您所有的时间，而您的编辑器仍然会出错.我们和其他人...两个主要编辑(猜猜为什么只有三个存在)已经为此工作多年，我们仍然有完整的错误列表;).
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.
您不可能仅通过一个事件 paste 来处理所有浏览器.为了处理所有粘贴方式，我们同时使用了 beforepaste 和 paste.
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 上，我们侦听两个粘贴事件，其余的仅侦听 paste.我们需要防止 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.
请注意，我想保留格式，因为我会将其粘贴到我的文本区域中(来自 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 &文本区域(word/excel...)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
