Paste as plain text Contenteditable div & textarea (word/excel...)

Question

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?

Answer 1

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:

1. 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 ;).

2. 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.

3. 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.

4. 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
   

   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.

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

   Which parts of formatting do you want to keep? Textarea will keep only basic ones - blocks formatting.

6. 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.

Answer 2

Current solution works perfect in IE/SAF/FF But still i need a fix for "non" keyboard events, when pasting with mouse click... Current solution for keyboard "paste" events:

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