javascript - document.execCommand 在具有折叠范围的 IE 中无法正常工作(用户选择)

Question

我面临以下问题:

When I put cursor to some position and then apply execCommand('bold') in all browsers except IE next typed text will be bold, but in IE it makes all word bold.

这里有一些图片可以让它更清楚。 正常/预期行为(Crhome、Firefox 等):

IE 中的行为:

下面是代码片段，也可以在 jsfiddle 上找到。 .

var lastCaretIndex = null;
    document.addEventListener('selectionchange', function(event) {
        var taget = event.target;
        if (taget.activeElement.id == 'main-input') {
            lastCaretIndex = getSelectionRange();

            console.log(typeof lastCaretIndex);
            console.log(lastCaretIndex);
        }
    });

    function afterFocus() {
        var s = null;
        if (window.getSelection) {
            s = window.getSelection();
        } else {
            s = document.getSelection();
        }

        if (lastCaretIndex == null) {
            lastCaretIndex = document.createRange();
        } else if (s.rangeCount > 0) {
            s.removeAllRanges();
            s.addRange(lastCaretIndex);
        }
    }

    function getSelectionRange() {
        var sel;
        if (window.getSelection) {
            sel = window.getSelection();
            if (sel.rangeCount) {
                return sel.getRangeAt(0);
            }
        } else if (document.selection) {
            return document.createRange();
        }

        return null;
    }

    $(document).on('click', '.icon-bold', function () {
        document.getElementById('main-input').focus();
        afterFocus();
        document.execCommand('bold');
        handleButtonActiveState($(this));
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="main-input" contenteditable="true">Hello world!</div>
<button type="button" class="icon-bold">Bold</button>

有人可以帮助我吗？我试图在互联网上寻找解决方案，但没有得到任何结果。好像和TextRange没有关系。

附注如果需要其他东西，请告诉我。

Answer 1

您可以使用Andibioticum's workaround在 Internet Explorer 中获得与 Chrome 和 Firefox 中相同的行为。他在空的选定范围中插入一个虚拟字符，执行该操作，然后删除该虚拟字符。

我使用 IE browser detection technique 对其进行了调整以适应您的情况Royi 建议，并结合检查 document.all 是否有较旧的 IE 版本。您可以在this jsFiddle中看到结果以及下面的代码片段。

var range = null;

document.addEventListener('selectionchange', function(event) {
    var taget = event.target;
    if (taget.activeElement.id == 'main-input') {
        range = getSelectionRange();
    }
});

function isIE() {
    return document.all || (!!window.MSInputMethodContext && !!document.documentMode);
}

function execBoldCommand() {
    if (document.getSelection() != "") {
        document.execCommand('bold');
    } else {
        var s = null;
        if (window.getSelection) {
            s = window.getSelection();
        } else {
            s = document.getSelection();
        }

        if (isIE()) {
            var selRange = s.getRangeAt(0);

            //Insert node with dummy text 'd'
            var newNode = document.createTextNode('d');
            selRange.insertNode(newNode);
            s.removeAllRanges();
            s.addRange(selRange);

            //Execute command on dummy
            document.execCommand('bold');

            //Delete dummy from range
            selRange.setStart(newNode, 0);
            selRange.setEnd(newNode, 1);
            selRange.deleteContents();

            s.removeAllRanges();
            s.addRange(selRange);
        } else {
            if (range == null) {
                range = document.createRange();
            }
            s.removeAllRanges();
            s.addRange(range);
            document.execCommand('bold');
        }
    }
}

function getSelectionRange() {
    var sel;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount) {
            return sel.getRangeAt(0);
        }
    } else if (document.selection) {
        return document.createRange();
    }

    return null;
}

$(document).on('click', '.icon-bold', function() {
    $('#main-input').focus();
    execBoldCommand();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="main-input" contenteditable="true">Hello world!</div>
<button type="button" class="icon-bold">Bold</button>