3

考えられるすべての質問と回答をざっと読んだ後、この方法で試してみます。

RTEをプログラミングしていますが、contenteditable要素のテキストを正常に抽出できませんでした。これは、各ブラウザがノードとキープレス（＃13）イベントをわずかに異なる方法で処理するためです（たとえば、一方が「br」、もう一方が「div」、「p」などを作成するなど）。これはすべて一貫しているので、e.preventDefault（）を使用してすべてのデフォルトアクションを強制終了するクロスブラウザーエディターを作成しています。

次のシナリオ：

1）ユーザーが＃13キーを押す（チェック）

2）キャレット位置が検出されました（チェック）

3）ケアレットが入っている要素の後に新しいp（aragraph）を作成します（チェック）

4）caretと要素の終わりの間にtext（node（s））がある場合は、それを抽出します（??？）

5）新しく作成されたp（段落）にtext（node（s））を配置します（チェック）

ご想像のとおり、ポイント4を除いてすべてが機能します。

よく知られているjsrangyライブラリにも同様の機能があり、特定の選択が抽出されます。

必要なものは次のとおりです。コンテンツ編集可能な段落（p、h1、h2、...）要素の最後までのすべてのテキスト（もちろんタグ付き、つまりsplitBoundaries）を取得して抽出します。

手がかり、ヒント、スニペットは大歓迎です！前もって感謝します。

よろしくお願いします、p

4

1 に答える 1

5

これを行うには、カレットから含まれているブロック要素の最後までのコンテンツを含むRangeオブジェクトを作成し、そのextractContents()メソッドを呼び出します。

function getBlockContainer(node) {
    while (node) {
        // Example block elements below, you may want to add more
        if (node.nodeType == 1 && /^(P|H[1-6]|DIV)$/i.test(node.nodeName)) {
            return node;
        }
        node = node.parentNode;
    }
}

function extractBlockContentsFromCaret() {
    var sel = window.getSelection();
    if (sel.rangeCount) {
        var selRange = sel.getRangeAt(0);
        var blockEl = getBlockContainer(selRange.endContainer);
        if (blockEl) {
            var range = selRange.cloneRange();
            range.selectNodeContents(blockEl);
            range.setStart(selRange.endContainer, selRange.endOffset);
            return range.extractContents();
        }
    }
}

これは、範囲または他のブラウザと同じ選択オブジェクトをサポートしないIE<=8では機能しません。Rangy （あなたが言及した）を使用してIEサポートを提供できます。window.getSelection()に置き換えるだけrangy.getSelection()です。

jsFiddle： http: //jsfiddle.net/LwXvk/3/

于 2011-04-21T08:47:23.120 に答える