Question

我有一个代码来包装文本周围的元素它工作正常，直到我在我的编辑器中尝试以下格式：

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

它会自动在带下划线的元素之前添加两个空的强元素，然后像这样：

<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]);
        }
    }
}
}

Answer 1

所见即所得很难。特别是HTML，它看起来没什么。我只是在这里猜测，但如果你从

开始

<u>Test</u>

你在WYSIWYG中选择T，然后实际选择的代码可能是<u>T。由于你无法用强力包裹它（因为<strong><u>T</strong>是无效的标记，所以编辑器会将标签前的所有内容包装在strong中，而标签后的所有内容都包含在strong中，这会导致

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

你得到了。

我要避免你可以检查你正在包装的文本是否长度为0，如果是这样则结束 - 不要用任何东西包装它。

Answer 2

我建议使用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);
            }
        }
    }
}

wysiwyg奇怪的行为？

2 个答案: