javascript - Javascript-contenteditableDIVからテキスト範囲を選択します

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引数にあると思います。誰かが私にいくつかの手がかりを与えることができますか？

期待される結果 テキストの一部を選択して[太字]ボタンをクリックすると、選択したテキストが太字に変わります。

実際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内のテキストを一度クリックすると、char2から6までが選択されて変更されます。もう一度クリックすると、2から8までの文字が選択され、変更されます。

更新私の最後のコードはhttp://jsfiddle.net/wjjvH/15/ でテストできます

私はそれをIEで動作させることができましたが、他のブラウザーでは動作しませんでした。また、SelectText関数に送信できるように、選択の開始と終了を確認する方法がわかりません。