1

別のWYSIWYGエディターを作成したいと思います。Firefoxの複数の選択に対しても、現在の選択の周りにタグをラップするスクリプトがすでにありますが、htmlを編集した後、範囲が再選択されません。これはどのように起こりますか？

これは私のコードです：

function wrap(tagName)
{
    var selection;
var elements = [];
var ranges = [];
var rangeCount = 0;
if (window.getSelection)
{
    selection = window.getSelection();
    if (selection.rangeCount)
    {
        rangeCount = selection.rangeCount;
        for (var i=0; i<rangeCount; i++)
        {
            ranges[i] = selection.getRangeAt(i).cloneRange();
            elements[i] = document.createElement(tagName);
            elements[i].appendChild(ranges[i].extractContents());
            ranges[i].insertNode(elements[i]);
            selection.addRange(ranges[i]);
        }
    }
}
}

オランダからの私の悪い英語のimをお詫び申し上げます。

4

1 に答える 1

2

<p>あるブロック要素 (または など)で開始し、別のブロック要素で終了する範囲では望ましくない動作が発生する可能性がありますが、現在のコードはそう遠くありません<div>。欠けている重要なビットは、ラップされたコンテンツを包含するように各範囲を設定する必要があること ( を使用selectNode())、および選択範囲からすべての範囲を削除して別の手順でそれらを再度追加する必要があることです。

ライブデモ: http://jsfiddle.net/timdown/dmPH/1/

コード：

function wrap(tagName)
{
    var selection;
    var elements = [];
    var ranges = [];
    var rangeCount = 0;
    var frag;
    var lastChild;
    if (window.getSelection)
    {
        selection = window.getSelection();
        if (selection.rangeCount)
        {
            var i = selection.rangeCount;
            while (i--)
            {
                ranges[i] = selection.getRangeAt(i).cloneRange();
                elements[i] = document.createElement(tagName);
                elements[i].appendChild(ranges[i].extractContents());
                ranges[i].insertNode(elements[i]);
                ranges[i].selectNode(elements[i]);
            }

            // Restore ranges
            selection.removeAllRanges();
            i = ranges.length;
            while (i--)
            {
                selection.addRange(ranges[i]);
            }
        }
    }
}
于 2012-07-06T23:27:43.067 に答える