Javascript-从contenteditable DIV中选择文本范围

我有这个DIV，我想选择一些文本，然后，当按下一些按钮时，将粗体样式应用到它

<div id="editor" contenteditable="true"></div>
<input type="button" id="bold" value="B" />

好吧，这个代码不起作用，我正在试图理解什么可能是错误的。我希望它是跨浏览器的。我认为问题在于

setStart

和

setEnd

参数。有人能给我一些线索吗

预期结果 当我选择文本的某些部分并单击粗体按钮时，所选文本应更改为粗体

实际结果 看起来

SelectText（）

函数没有正确选择文本，因此当调用

execCommand

时，它不会更改所选文本。它改变了文本的其他部分。这就好像我没有发送正确的起始值和结束值，或者

dom.firstChild

/

dom.lastChild

有问题。 如果我在我的

SelectText（）

函数中执行此操作（将开始改为2，结束改为6）：

然后，当我单击DIV中的文本时，从char 2到char 6被选中并更改。再次单击时，会选择并更改从2到8的字符，依此类推

更新 我最后的代码可以在

---

我设法使它在IE上工作，但在其他浏览器上不工作。此外，我不知道如何找出选择的开始和结束，以便将它们发送到SelectText功能。

什么是不起作用的？预期结果是什么，实际结果是什么？我更新了我的问题以回答您的问题，谢谢。主要问题是，当您单击（鼠标按下）除

编辑器

之外的任何内容时，焦点和当前选择都会丢失。因此，

SelectText

函数中的

getSelection

将始终作为无选择返回。您应该将当前选择对象保存为全局变量，并使用该变量而不是

getSelection

。我更新了我的问题。我可以这样做，但当编辑器未聚焦时，看起来全局变量选择本身是空的。我在JSFIDLE上发布了我的ode：您可以使用

mousedown

而不是

单击

，并通过添加

return false

来防止浏览器的默认操作（即，勾选焦点）：

function CaretPosition(dom) {
    var caretPos = 0, containerEl = null, sel, range;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount) {
            range = sel.getRangeAt(0);
            if (range.commonAncestorContainer.parentNode == dom) {
                caretPos = range.endOffset;
            }
        }
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        if (range.parentElement() == dom) {
            var tempEl = document.createElement("span");
            dom.insertBefore(tempEl, dom.firstChild);
            var tempRange = range.duplicate();
            tempRange.moveToElementText(tempEl);
            tempRange.setEndPoint("EndToEnd", range);
            caretPos = tempRange.text.length;
        }
    }
    return caretPos;
}

function SelectText(dom, start, end) {
    var sel, range;
    if (window.getSelection && document.createRange) {
        range = document.createRange();
        range.setStart(dom.firstChild, start);
        range.setEnd(dom.lastChild, end);
        sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (document.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToElementText(dom);
        range.select();
    }
}

var cp = 0;
var sp;

document.getElementById('editor').onkeyup = function() {
    cp = CaretPosition(document.getElementById('editor'));
    sp = window.getSelection().getRangeAt(0);
}

document.getElementById('editor').onmouseup = function() {
    cp = CaretPosition(document.getElementById('editor'));
    sp = window.getSelection().getRangeAt(0);
}

document.getElementById('bold').onclick = function() {
    document.getElementById('editor').focus();
    SelectText(document.getElementById('editor'), cp, sp);
    document.execCommand('bold', false, null);
}

function SelectText(dom, start, end) {
    var sel, range;
    if (window.getSelection && document.createRange) {
        range = document.createRange();
        range.setStart(dom.firstChild, 2);
        range.setEnd(dom.lastChild, 6);
        sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (document.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToElementText(dom);
        range.select();
    }
}