将文本复制并粘贴到ContentEditable中，无需格式化-JavaScript

我正在制作一个代码，允许我从其他地方复制文本并将其粘贴到可编辑的

内容中，但保留空白和断行

这是我的密码：

// When I paste a text from another place
this.querySelector('*[contenteditable="true"]').addEventListener('paste', function(e){
    // Variables 
    var clipboardData, pastedData;
    // Stop data actually being pasted into div
    e.stopPropagation();
    e.preventDefault();
    // Get pasted data via clipboard API
    clipboardData = e.clipboardData || window.clipboardData;
    pastedData = clipboardData.getData('Text');
    // Change \n to <br>
    // I use this because then I will make another things with the <br> tags
    pastedData = pastedData.replace(/(?:\r\n|\r|\n)/g, '<br />');
    /*
        Here's a function that will get the character offset of the caret within the specified element. However, this is a naive implementation that will almost certainly have inconsistencies with line breaks. It makes no attempt to deal with text hidden via CSS (I suspect IE will correctly ignore such text while other browsers will not). To handle all this stuff properly would be tricky. I've now attempted it for my Rangy library. 
    */
    var caretOffset = 0;
    var doc = this.ownerDocument || this.document;
    var win = doc.defaultView || doc.parentWindow;
    var sel;
    if (typeof win.getSelection != "undefined") {
        sel = win.getSelection();
        if (sel.rangeCount > 0) {
            var range = win.getSelection().getRangeAt(0);
            var preCaretRange = range.cloneRange();
            preCaretRange.selectNodeContents(this);
            preCaretRange.setEnd(range.endContainer, range.endOffset);
            caretOffset = preCaretRange.toString().length;
        }
    } else if ( (sel = doc.selection) && sel.type != "Control") {
        var textRange = sel.createRange();
        var preCaretTextRange = doc.body.createTextRange();
        preCaretTextRange.moveToElementText(this);
        preCaretTextRange.setEndPoint("EndToEnd", textRange);
        caretOffset = preCaretTextRange.text.length;
    }
    // Set the text at the carret position
    this.innerHTML = [this.innerHTML.slice(0, caretOffset), pastedData, this.innerHTML.slice(caretOffset)].join('');                
        // Set the carret to the correct position
        var range = document.createRange();
            sel = window.getSelection();
        // Try to set the range
        try{
            range.setStart(this.firstChild, caretOffset + pastedData.length);
    } catch(err){}
    // Range options
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
});   

//当我从另一个地方粘贴文本时
此.querySelector（'*[contenteditable=“true”]'）。addEventListener（'paste'，函数（e）{
//变数
var剪贴簿数据，粘贴数据；
//停止将数据实际粘贴到div中
e、 停止传播（）；
e、 预防默认值（）；
//通过剪贴板API获取粘贴的数据
clipboardData=e.clipboardData | | window.clipboardData；
pastedData=clipboardData.getData（'Text'）；
//将\n更改为

//我使用它是因为这样我将用
标记制作另一个东西
pastedData=pastedData.replace（/（？：\r\n |\r |\n）/g，“
”）；
/*
这是一个函数，它将获取指定元素中插入符号的字符偏移量。然而，这是一个幼稚的实现，几乎肯定会与换行符不一致。它没有尝试处理通过CSS隐藏的文本（我怀疑IE会正确忽略此类文本，而其他浏览器不会）.要正确处理所有这些东西会很棘手。我现在已经在我的Rangy library中尝试过了。
*/
var caretofset=0；
var doc=this.ownerDocument | | this.document；
var win=doc.defaultView | | doc.parentWindow；
var-sel；
if（typeof win.getSelection！=“未定义”）{
sel=win.getSelection（）；
如果（选择范围计数>0）{
var range=win.getSelection（）.getRangeAt（0）；
var precretange=range.cloneRange（）；
预重排列。选择节点内容（此）；
precretange.setEnd（range.endContainer，range.endOffset）；
CareTofset=precretange.toString（）.length；
}
}如果（（选择=文件选择）&&sel.type！=“控制”）{
var textRange=sel.createRange（）；
var precarteTextRange=doc.body.createTextRange（）；
PrecretTextRange.moveToElementText（此）；
setEndPoint（“EndToEnd”，textRange）；
CareTofset=PrecretTextRange.text.length；
}
//在carret位置设置文本
this.innerHTML=[this.innerHTML.slice（0，caretofset），pastedData，this.innerHTML.slice（caretofset）].join（“”）；
//将卡雷特设置到正确的位置
var range=document.createRange（）；
sel=window.getSelection（）；
//尝试设置范围
试一试{
range.setStart（this.firstChild，caretofset+pastedData.length）；
}捕获（错误）{}
//范围选项
范围。塌陷（真）；
选择removeAllRanges（）；
选择添加范围（范围）；
});   

当我使用它时，它工作正常，但有时会崩溃，以下是它的错误：

1） 当我从一个.txt文件中粘贴一个文本，并将插入符号放在复制文本的末尾时，我尝试再次复制相同的文本。第二个文本复制在中间，而不是插入符号所在的末端

2） 当我在
contenteditable
中有一些文本，并且我用光标选择它以将其替换为另一个文本时，第二个文本不会替换所选部分。它粘贴在文本的末尾，现在保留两个文本

3） 如果我正在写一个文本并按enter键创建一个换行符，此时我粘贴一个文本，这将复制到前一行

有任何解决这些错误的建议吗？
您确定要使用
innerHTML
？它覆盖了路径中的所有内容。如果通过插入符号位置处理文本的细粒度控制，则
createTextNode
可能更适合。这可能就是你得到疯狂结果的原因
innerHTML
将从它的HTML、文本、注释等中提取一个元素。因此每次使用它都可能会撕碎你不知道的标记。@zer00ne使用createTextNode可以很好地选择加载内容的描述Editable，我将尝试使用它，但是，如何将包含所有特征线和空格的文本插入到div中，然后将插入符号放在插入文本的末尾？