JS实现pasteHTML兼容ie,firefox,chrome的方法

实现pasteHTML方法兼容IE、Firefox和Chrome浏览器的关键是要理解Range和Selection对象。下面是实现的详细攻略：

第一步：获取Selection对象

要实现跨浏览器的pasteHTML方法，我们需要获取当前页面的Selection对象。下面是具体的代码：

var sel = window.getSelection();

第二步：判断用户是否有选中文字

在用户执行pasteHTML方法之前，我们需要检查用户是否已经选中了一些文本。如果用户没有选中文字，我们就不能以光标的位置作为插入点。下面是具体的代码：

if (sel.rangeCount) {
    var range = sel.getRangeAt(0);
    var node = range.createContextualFragment(html);
    range.insertNode(node);
}

第三步：创建Range对象

如果用户已经选中了一些文本，那么我们就需要基于当前的选择来创建一个新的Range对象。下面是具体的代码：

var range = sel.getRangeAt(0);
range.deleteContents();
var node = range.createContextualFragment(html);
range.insertNode(node);

第四步：插入HTML代码

现在，我们已经有了一个Range对象和用户提供的HTML代码。下面是将HTML代码插入到Range对象中的代码：

range.deleteContents();
var node = range.createContextualFragment(html);
range.insertNode(node);

第五步：完整代码实现

下面是完整的代码实现，其中html为用户传入的HTML代码：

function pasteHtmlAtCaret(html) {
    var sel, range;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();
            var node = range.createContextualFragment(html);
            range.insertNode(node);
        }
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        range.pasteHTML(html);
    }
}

示例说明

示例一：在选中文本的位置插入HTML代码

在这个示例中，我们将创建一个按钮，当用户选中文本并单击按钮时，会在选中的文本位置插入HTML代码。

HTML代码：

<div>
    <p>请选中文本并单击按钮：</p>
    <p contenteditable="true">
        这是一段可编辑的文本。
    </p>
    <button onclick="pasteHtmlAtCaret('<strong>强调文本</strong>');">插入HTML代码</button>
</div>

JavaScript代码：

function pasteHtmlAtCaret(html) {
    var sel, range;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();
            var node = range.createContextualFragment(html);
            range.insertNode(node);
        }
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        range.pasteHTML(html);
    }
}

示例二：在输入框中插入HTML代码

在这个示例中，我们将创建一个输入框，用户可以向其中输入文本，也可以点击按钮在光标位置插入HTML代码。

HTML代码：

<div>
    <input type="text" id="myInput" placeholder="在这里输入文本">
    <button onclick="pasteHtmlAtCaret('<strong>强调文本</strong>');">插入HTML代码</button>
</div>

JavaScript代码：

function pasteHtmlAtCaret(html) {
    var sel, range;
    var el = document.getElementById('myInput');
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();
            var node = range.createContextualFragment(html);
            range.insertNode(node);
        }
    } else if (document.selection && document.selection.createRange) {
        el.focus();
        range = document.selection.createRange();
        range.pasteHTML(html);
        range.collapse(false);
        range.select();
    }
}