Question

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

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

我的JavaScript“像这样工作”

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);
}

嗯，这段代码不起作用，我试图理解可能出错的地方。我希望它是跨浏览器的。我认为问题在于setStart和setEnd参数。谁能给我一些线索？

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

实际结果 看起来SelectText()函数未正确选择文本，因此在调用execCommand时，它不会更改所选文本。它改变了文本的其他部分。这就像我没有发送正确的开始和结束值，或者dom.firstChild / dom.lastChild可能出错。如果我在SelectText()函数中执行此操作（从2开始更改并以6结束）：

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();
    }
}

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

更新我的上一个代码可以在http://jsfiddle.net/wjjvH/15/

进行测试

我设法让它在IE上工作，但在其他浏览器上却没有。另外，我不知道如何找出选择的开始和结束，所以我可以将它们发送到SelectText函数。

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

0 个答案: