粘贴为纯文本Contenteditable div＆textarea（word / excel …）

我想粘贴文本在contenteditable div，但作为textarea反应。
请注意，我想保持格式，因为我将它粘贴到我的textarea（从word，excel …）。
所以。
1）粘贴文本contenteditable div
2）我从剪贴板中获取文本
3）我把我的价值从剪贴板到我的textarea，（不知道如何??）
4）从我的textarea获取价值，并将其放在我的contenteditable股利

有什么build议么？

我是CKEditor的核心开发人员，过去4个月，我正在处理剪贴板支持和相关的东西:)不幸的是，我不能描述如何处理粘贴的整个方式，因为impl的故事也是如此D，即使在自己写了impl之后，也是很棘手的

但是，这里有一些提示可以帮助你：

  1. 不要写wysiwyg编辑器 – 使用一个存在的。 它会消耗你所有的时间，而你的编辑器将是越野车。 我们和其他人…两个主要编辑（猜猜为什么只有三个）正在这个工作多年，我们仍然有完整的错误列表;）。

  2. 如果你真的需要编写你自己的编辑器，请查看http://dev.ckeditor.com/browser/CKEditor/trunk/_source/plugins/clipboard/plugin.js – 这是旧的impl，然后我重写它，但它的作品到处都有可能。 代码是可怕的…但它可以帮助你。

  3. 您将无法通过一个事件paste处理所有浏览器。 为了处理粘贴的所有方法，我们使用了两种方法 – beforepaste和paste 。

  4. 有数量（巨大的数字：D）的浏览器的怪癖，你需要处理。 我不能把他们形容，因为即使几个星期后，我也不记得他们。 但是，从我们的文档中摘录的一小段文字可能对您有用：

    粘贴命令（由非本地粘贴使用 – 例如从我们的工具栏） 

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

    从本机上下文菜单和菜单栏粘贴 

     (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上的一些事件，因为既然我们正在倾听这两种情况，这可能会导致一倍的处理。 这是我猜的最棘手的部分。

  5. 请注意，我想保持格式，因为我将它粘贴到我的textarea（从word，excel …）。

    格式化的哪些部分要保留？ Textarea将保留只有基本的 – 块格式。

  6. 请参阅http://dev.ckeditor.com/browser/CKEditor/trunk/_source/plugins/wysiwygarea/plugin.js#L120直到第123行 – 这是任务的最后一部分 – 将内容插入select。

目前的解决scheme在IE / SAF / FF完美的工作但是我仍然需要修复“非”键盘事件，当粘贴鼠标点击…当前键盘“粘贴”事件的解决scheme： 

 $(document).ready(function() { bind_paste_textarea(); }); function bind_paste_textarea(){ var activeOnPaste = null; $("#mypastediv").keydown(function(e){ var code = e.which || e.keyCode; if((code == 86)){ activeOnPaste = $(this); $("#mytextarea").val("").focus(); } }); $("#mytextarea").keyup(function(){ if(activeOnPaste != null){ $(activeOnPaste).focus(); activeOnPaste = null; } }); } <h2>DIV</h2> <div id="mypastediv" contenteditable="true" style="width: 400px; height: 400px; border: 1px solid orange;"> </div> <h2>TEXTAREA</h2> <textarea id="mytextarea" style="width: 400px; height: 400px; border: 1px solid red;"></textarea>

我已经实现了这个使用rangy库来保存和恢复select。

我也用相同的函数库来执行一些其他的工作，我已经从这个例子中剥离出来了，所以这不是最优的代码。

HTML 

 <div><div id="editor"contenteditable="true" type="text"></div><div>

使用Javascript 

 var inputArea = $element.find('#editor'); var debounceInterval = 200; function highlightExcessCharacters() { // Bookmark selection so we can restore it later var sel = rangy.getSelection(); var savedSel = sel.saveCharacterRanges(editor); // Strip HTML // Prevent images etc being pasted into textbox inputArea.text(inputArea[0].innerText); // Restore the selection sel.restoreCharacterRanges(editor, savedSel); } // Event to handle checking of text changes var handleEditorChangeEvent = (function () { var timer; // Function to run after timer passed function debouncer() { if (timer) { timer = null; } highlightExcessCharacters(); } return function () { if (timer) { $timeout.cancel(timer); } // Pass the text area we want monitored for exess characters into debouncer here timer = $timeout(debouncer, debounceInterval); }; })(); function listen(target, eventName, listener) { if (target.addEventListener) { target.addEventListener(eventName, listener, false); } else if (target.attachEvent) { target.attachEvent("on" + eventName, listener); } } // Start up library which allows saving of text selections // This is useful for when you are doing anything that might destroy the original selection rangy.init(); var editor = inputArea[0]; // Set up debounced event handlers var editEvents = ["input", "keydown", "keypress", "keyup", "cut", "copy", "paste"]; for (var i = 0, eventName; eventName = editEvents[i++];) { listen(editor, eventName, handleEditorChangeEvent); }
Interesting Posts