2

我添加了一个按钮，使用 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;
    }
}

使用 Internet Explorer时，document.selection.createRange().text它可以很好地用于换行。在 Firefox 和 Chrome 中，不考虑文本区域的换行符，从文本区域插入到可编辑 div 的所有文本仅在一行上。

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

4

2 回答 2

5

我建议将文本拆分为单独的文本节点，用元素替换换行符<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;
    }
}
于 2013-07-08T13:38:27.800 回答
0

我想我为您的问题找到了更合适的解决方案。有关演示，请参阅此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; });
   }
于 2013-07-08T09:37:50.067 回答