1

我有这个 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论点。谁能给我一些线索？

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

实际结果 看起来该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 函数。

4

0 回答 0