Question

我添加了一个按钮，使用stakoverflow上的此功能将textarea中的某些文本插入到可编辑的DIV中。

function insertAtCursor(){
    document.getElementById('myInstance1').focus() ; // DIV with cursor is 'myInstance1' (Editable DIV)
    var sel, range, html;
    var text = document.getElementById('AreaInsert').value ; // Textarea containing the text to add to the myInstance1 DIV
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();
            range.insertNode( document.createTextNode(text) );
        }
    } else if (document.selection && document.selection.createRange) {
        document.selection.createRange().text = text;
    }
}

使用document.selection.createRange().text的Internet Explorer，它适用于换行符。使用Firefox和Chrome时，不会考虑textarea的换行符，从textarea插入可编辑div的所有文本都只在一行上。

如何修改insertAtCursor（）以使其适用于使用Firefox和Chrome的换行符？

Answer 1

我建议将文本拆分为单独的文本节点，用<br>元素替换换行符，创建包含文本和DocumentFragment节点的<br>并调用insertNode()插入它。

演示：http://jsfiddle.net/timdown/zfggy/

代码：

function insertAtCursor(){
    document.getElementById('myInstance1').focus() ; // DIV with cursor is 'myInstance1' (Editable DIV)
    var sel, range;
    var text = document.getElementById('AreaInsert').value ; // Textarea containing the text to add to the myInstance1 DIV
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();

            var lines = text.replace("\r\n", "\n").split("\n");
            var frag = document.createDocumentFragment();
            for (var i = 0, len = lines.length; i < len; ++i) {
                if (i > 0) {
                    frag.appendChild( document.createElement("br") );
                }
                frag.appendChild( document.createTextNode(lines[i]) );
            }

            range.insertNode(frag);
        }
    } else if (document.selection && document.selection.createRange) {
        document.selection.createRange().text = text;
    }
}

Answer 2

我认为我为您的问题找到了更合适的解决方案。有关演示，请参阅此Fiddle。另请参阅css属性word-wrap。

Java脚本：

var button = document.getElementById('insertText');

button.onclick = function() {
    var text = document.getElementById('textarea').value;
    document.getElementById('insertHere').innerText = document.getElementById('insertHere').textContent = text 
};

要实现跨浏览器兼容性，您还可以执行此操作：

   var isIE = (window.navigator.userAgent.indexOf("MSIE") > 0);

   if (! isIE) {
      HTMLElement.prototype.__defineGetter__("innerText", 
              function () { return(this.textContent); });
      HTMLElement.prototype.__defineSetter__("innerText", 
              function (txt) { this.textContent = txt; });
   }

可编辑的DIV在光标处添加一些文本

2 个答案: