Incolla come testo normale Div e texted contented (word/excel ...)

Question

Vorrei incollare il testo in un div contentedit, ma reagire come una textarea.
Nota che voglio mantenere la formattazione come vorrei incollarla nella mia textarea (da word, excel ...).
così.
1) incollare testo in div contenteditable
2) ottengo il testo dalla clipboard
3) I spingere il mio valore dagli appunti al mio textarea, (non so come ??)
4) Ottenere valore dal mio textarea e inseriscilo nel mio divisore contentedabile

Qualche suggerimento?

Answer 1

soluzione attuale funziona perfettamente in IE/SAF/FF Ma ancora ho bisogno di una correzione per gli eventi della tastiera "non", quando si incolla con un clic del mouse ... soluzione attuale per tastiera eventi "Incolla":

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

Answer 2

Sono lo sviluppatore principale di CKEditor e per coincidenza per gli ultimi 4 mesi stavo lavorando al supporto degli appunti e roba correlata :) Purtroppo non sarò in grado di descriverti per intero come viene gestito l'incollaggio, perché i racconti del impl è troppo complicato per me anche dopo aver scritto impl da solo: D

Tuttavia, ecco alcuni e suggerimenti che possono essere d'aiuto:

1. Non scrivere editor wysiwyg: utilizzare quello esistente. Sta andando a consumare tutto il tuo tempo e il tuo editore continuerà a essere bacato. Noi e ragazzi di altri ... due redattori principali (indovinate perché esistono solo tre) lavoriamo su questo da anni e abbiamo ancora elenchi completi di errori;).

2. Se hai davvero bisogno di scrivere il tuo editor, controlla http://dev.ckeditor.com/browser/CKEditor/trunk/_source/plugins/clipboard/plugin.js - è il vecchio impl, prima che lo riscrivo, ma funziona ovunque sia possibile. Il codice è orribile ... ma potrebbe aiutarti.

3. Non sarà possibile gestire tutti i browser con un solo evento paste. Per gestire tutti i modi di incollare, stiamo utilizzando entrambi: beforepaste e paste.

4. C'è numero (numero enorme: D) di stranezze browser che è necessario gestire. Non posso descriverli, perché anche dopo poche settimane non li ricordo tutti. Tuttavia, piccolo estratto dai nostri documenti può essere utile per voi:

   comando Incolla (utilizzato da pasta non nativi - ad esempio dalla nostra barra degli strumenti)

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

   Incolla dal menu di scelta rapida nativo & barra dei menu

   (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 
   

   Il resto del trucco: su IE, ascoltiamo entrambi gli eventi Incolla, sul resto solo per paste. Abbiamo bisogno di evitare alcuni eventi su IE, perché dal momento che stiamo ascoltando entrambi, a volte questo può causare una gestione raddoppiata. Questa è la parte più difficile immagino.

5. Nota che voglio mantenere la formattazione come vorrei incollarla nella mia textarea (da word, excel ...).

   Quali parti di formattazione vuoi conservare? Textarea manterrà solo quelli di base - blocca la formattazione.

6. Vedere http://dev.ckeditor.com/browser/CKEditor/trunk/_source/plugins/wysiwygarea/plugin.js#L120 fino alla riga 123 - questa è l'ultima parte dell'attività - inserimento del contenuto nella selezione.

Answer 3

ho raggiunto questo utilizzando rangy library per salvare e ripristinare le selezioni.

Eseguo anche altri lavori utilizzando la libreria nelle stesse funzioni, che ho rimosso da questo esempio, quindi questo non è un codice ottimale.

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); 
}