-->

粘贴为纯文本CONTENTEDITABLE DIV&textarea的(字/ EXCEL ...)(

2019-06-25 20:44发布

我想粘贴在CONTENTEDITABLE DIV文字,但作为一个textarea反应。
请注意,我想保留原来的格式我会把它贴在我的textarea(从Word,EXCEL ...)。
所以。
1)在CONTENTEDITABLE DIV粘贴文字
2)我从剪贴板文本
3)我把我的价值从剪贴板到我的textarea的,(不知道如何?)
4)从我的textarea获取价值并把它放在我的CONTENTEDITABLE DIV

有什么建议?

Answer 1:

我为过去4个月我工作的剪贴板支持和相关的东西:)不幸的是我无法描述你的整个方式粘贴是如何处理的CKEditor的核心开发者和巧合,因为IMPL的故事太棘手我甚至自己写IMPL后:d

不过,我这里还有一些提示,可以帮助你:

  1. 不要写所见即所得的编辑器 - 使用一个存在。 这将消耗所有的时间和仍然编辑器将是马车。 我们和其他...两个主要编辑人(猜为什么只有三个存在)这个是工作多年,我们仍然有充分的错误列表)。

  2. 如果你真的需要编写自己的编辑器检查http://dev.ckeditor.com/browser/CKEditor/trunk/_source/plugins/clipboard/plugin.js -这是老IMPL,之前我重写了它,但它的工作原理无处不在的地方是可能的。 该代码是可怕的......但它可以帮助你。

  3. 你不可能只由一个事件来处理所有的浏览器paste 。 为了处理我们使用这两种粘贴的所有方式- beforepastepaste

  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 ...)。

    你想要哪个格式的部分,以保持? 多行文本将只保留基本的 - 块格式。

  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>


Answer 3:

我一直在使用达到了这个瘦长库来保存和恢复的选择。

我也执行使用相同的功能,我已经去掉了这个例子中的图书馆借了一些其他工作,所以这不是最佳的代码。

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


文章来源: Paste as plain text Contenteditable div & textarea (word/excel…)