0

テキストの周りに要素をラップするコードがあり、エディターで次の形式を試すまでは正常に機能します。

<u><strong>T</strong>es<strong>t</strong></u>

下線付きの要素の前と後に、次のように 2 つの空の strong 要素が自動的に追加されます。

<strong></strong>
<u><strong>T</strong>es<strong>t</strong></u>
<strong></strong>

これが私が使用するコードで、wrap('strong') のようなアクションを持つボタンがあります。

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]);
            ranges[i].selectNode(elements[i]);
        }
        selection.removeAllRanges();
        for (var i=0; i<ranges.length; i++)
        {
            selection.addRange(ranges[i]);
        }
    }
}
}
4

2 に答える 2

0

WYSIWYG は難しいです。特に HTML では、見た目とはまったく異なります。私はここで推測していますが、あなたが始めるなら

<u>Test</u>

WYSIWYG で選択するTと、実際に選択されるコードはおそらく<u>T. それをストロングでラップすることはできないため (<strong><u>T</strong>有効なマークアップではないため、エディターはタグの前のすべてをストロングでラップし、タグの後のすべてをストロングでラップします。その結果、

<strong></strong>
<u><strong>T</strong>es<strong>t</strong></u>
<strong></strong>

あなたが得ていること。

ラップしているテキストの長さが0であるかどうかを確認できることを避けるために、そうであれば終了します-何もラップしないでください。

于 2012-07-10T22:20:36.577 に答える
0

DOM 操作を使用して、選択範囲内のテキスト ノードを個別にラップすることをお勧めします。私のRangyライブラリは、Range オブジェクトにメソッドを提供splitBoundaries()し、拡張することで、これに少し役立ちます。getNodes()

ライブデモ: http://jsfiddle.net/5cdMn/

コード：

function isNodeInsideElementWithTagName(node, tagName) {
    tagName = tagName.toLowerCase();
    while (node) {
        if (node.nodeType == 1 && node.tagName.toLowerCase() == tagName) {
            return true;
        }
        node = node.parentNode;
    }
    return false;
}

function wrapSelection(tagName) {
    var range, textNode, i, len, j, jLen, el;
    var ranges = rangy.getSelection().getAllRanges();
    for (i = 0, len = ranges.length; i < len; ++i) {
        range = ranges[i];
        range.splitBoundaries();
        textNodes = range.getNodes([3]/* Array of node types to retrieve */);
        for (j = 0, jLen = textNodes.length; j < jLen; ++j) {
            textNode = textNodes[j];
            if (!isNodeInsideElementWithTagName(textNode, tagName)) {
                el = document.createElement(tagName);
                textNode.parentNode.insertBefore(el, textNode);
                el.appendChild(textNode);
            }
        }
    }
}
于 2012-07-10T23:32:06.613 に答える