Question

我正在使用容器<div>，其属性contentEditable设置为“true”。我非常高兴以这种方式格式化文本选择：

用鼠标选择文字
检索选择的HTML
制作新字符串：例如<font color = "red"> + HTML选择+ </font>
用上面的字符串

看起来非常好，但是当多次应用此方法时，我收到了类似的HTML文本：

The oldest browsers <font color="Red">support only </font><font color="Red"><font color="Red">one<font color="Red"> way</font></font><font color="Red"> of</font> registering event handlers</font>, the way invented by Netscape.

这真的很难看。我想得到很好的格式化的作品：

The oldest browsers <font color="Red">support only one way of registering event handlers</font>, the way invented by Netscape.

我尝试过apply.normalize（）;在添加开始和结束标签之前，但它没有帮助。

更改HTML的正确方法是什么，以获得“正常”结果“？

感谢

代码示例：

<script>
    function FontRed() {
        embraceSelectionWithTag('<font color=Red>', '</font>');
        }


    function embraceSelectionWithTag(tag1,tag2) {
        var range, html;
        html = tag1 + getSelectionHtml() + tag2;
        range = replaceSelectionWithHtml(html);
        var selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);
    }


    function getSelectionHtml() {
        var html = "";
        if (typeof window.getSelection != "undefined") {
            var sel = window.getSelection();
            if (sel.rangeCount) {
                var container = document.createElement("div");
                for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                    container.appendChild(sel.getRangeAt(i).cloneContents());
                }
                container.normalize();
                html = container.innerHTML;
                return html;
            }
        } else if (typeof document.selection != "undefined") {
            if (document.selection.type == "Text") {
                //container.normalize();
                html = document.selection.createRange().htmlText;
                return html;
            }   
        }
    }



    function replaceSelectionWithHtml(html) {
        var range, html;
        if (window.getSelection && window.getSelection().getRangeAt) {
            range = window.getSelection().getRangeAt(0);
            range.deleteContents();
            var div = document.createElement("div");
            div.innerHTML = html;
            var frag = document.createDocumentFragment(), child;
            while ( (child = div.firstChild) ) {
                frag.appendChild(child);
            }
            range.insertNode(frag);
            return range;
        } else if (document.selection && document.selection.createRange) {
            range = document.selection.createRange();
            range.pasteHTML(html);
            return range;
        }
    }
</script>    

<body>
    <div id="containter2" contentEditable = true>
    The oldest browsers support only one way of registering event handlers, the way invented by Netscape. 
    </div>

    <button onclick="FontRed()">Font Red</button>
</body>

如何格式化HTML内容或选择“正确”？

0 个答案: