Dán dưới dạng văn bản thuần túy Có thể chỉnh sửa div & textarea (word/excel ...)

Question

Tôi muốn dán văn bản vào div có thể chỉnh sửa được, nhưng phản ứng dưới dạng vùng văn bản.
Lưu ý rằng tôi muốn giữ định dạng như tôi sẽ dán nó vào văn bản của tôi (từ từ, excel ...).
Vì vậy,
1) Dán văn bản trong div contenteditable
2) Tôi nhận được văn bản từ clipboard
3) Tôi đẩy giá trị của tôi từ clipboard để textarea của tôi, (không biết làm thế nào ??)
4) Nhận giá trị từ textarea của tôi và đặt nó trong div có thể chỉnh sửa nội dung của tôi

Bất kỳ đề xuất nào?

Answer 1

giải pháp hiện tại hoạt động hoàn hảo trong IE/SAF/FF Nhưng tôi vẫn cần một sửa chữa cho các sự kiện "không" bàn phím, khi dán với click chuột ... giải pháp hiện tại cho sự kiện bàn phím "dán":

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

Tôi là nhà phát triển cốt lõi của CKEditor và trùng hợp trong 4 tháng qua tôi đã làm việc hỗ trợ clipboard và các công cụ liên quan :) Thật không may là tôi sẽ không thể mô tả cho bạn toàn bộ cách dán được xử lý, vì câu chuyện về impl là quá khó khăn cho tôi ngay cả sau khi viết impl của bản thân mình: D

Tuy nhiên, đây là som các gợi ý điện tử có thể giúp bạn:

1. Không viết trình chỉnh sửa wysiwyg - sử dụng trình chỉnh sửa tồn tại. Nó sẽ tiêu thụ tất cả thời gian của bạn và trình soạn thảo của bạn vẫn sẽ bị lỗi. Chúng tôi và những người khác ... hai biên tập viên chính (đoán tại sao chỉ có ba người tồn tại) đang làm việc này trong nhiều năm và chúng tôi vẫn có danh sách lỗi đầy đủ;).

2. Nếu bạn thực sự cần viết trình soạn thảo của riêng mình, hãy kiểm tra http://dev.ckeditor.com/browser/CKEditor/trunk/_source/plugins/clipboard/plugin.js - đó là hàm cũ, trước khi tôi viết lại, nhưng nó hoạt động ở mọi nơi có thể. Mã này thật khủng khiếp ... nhưng nó có thể giúp bạn.

3. Bạn sẽ không thể xử lý tất cả các trình duyệt chỉ bằng một sự kiện paste. Để xử lý tất cả các cách dán, chúng tôi đang sử dụng cả hai - beforepaste và paste.

4. Có số (số lớn: D) của các trình duyệt mà bạn cần phải xử lý. Tôi không thể miêu tả bạn, bởi vì ngay cả sau vài tuần tôi cũng không nhớ hết. Tuy nhiên, đoạn trích nhỏ từ tài liệu của chúng tôi có thể hữu ích cho bạn:

   Dán lệnh (sử dụng bởi dán phi bản địa - ví dụ như từ thanh công cụ của chúng tôi)

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

   Paste từ menu ngữ cảnh có nguồn gốc & 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 
   

   Phần còn lại của mẹo - Trên IE, chúng tôi lắng nghe cả hai sự kiện dán, phần còn lại chỉ dành cho paste. Chúng tôi cần phải ngăn chặn một số sự kiện trên IE, bởi vì vì chúng tôi đang lắng nghe cho cả hai khi điều này có thể gây ra xử lý gấp đôi. Đây là phần khó nhất tôi đoán.

5. Lưu ý rằng tôi muốn giữ định dạng như tôi sẽ dán nó vào văn bản của tôi (từ từ, excel ...).

   Bạn muốn giữ những phần nào của định dạng? Textarea sẽ chỉ giữ nguyên các khối cơ bản - định dạng khối.

6. Xem http://dev.ckeditor.com/browser/CKEditor/trunk/_source/plugins/wysiwygarea/plugin.js#L120 lên đến dòng 123 - đây là phần cuối cùng của tác vụ - chèn nội dung vào lựa chọn.

Answer 3

Tôi đã đạt được điều này bằng cách sử dụng rangy library để lưu và khôi phục các lựa chọn.

Tôi cũng thực hiện một số công việc khác bằng thư viện có cùng chức năng, mà tôi đã loại bỏ khỏi ví dụ này, vì vậy đây không phải là mã tối ưu.

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