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

Question

我希望将文本粘贴到一个可信的div中,但作为textarea进行反应.
请注意,我想保留格式,因为我会将其粘贴到我的textarea中(来自word,excel ...).
所以.
1)在contenteditable div中粘贴文本
2)我从剪贴板中获取文本
3)我将我的值从剪贴板推送到我的textarea,(不知道怎么做？)
4)从我的textarea获取值并将其放在我的contenteditable div

任何建议？

Answer 1

我是CKEditor的核心开发人员,巧合过去4个月我一直致力于剪贴板支持和相关的东西:)不幸的是,我无法描述你如何处理粘贴,因为impl的故事也是如此在我自己写完impl之后,对我来说很棘手:D

但是,这里有一些提示可以帮助您:

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行 - 这是任务的最后一部分 - 将内容插入到选择中.

Answer 2

当前的解决方案在 IE/SAF/FF 中工作完美，但我仍然需要修复“非”键盘事件，当用鼠标单击粘贴时...键盘“粘贴”事件的当前解决方案：

$(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>