8

除了使用撤消之外，我认为没有办法删除可编辑内容中的 h1 和 h2 标记。预期的行为是再次单击 H1 按钮应该将其关闭，但事实并非如此。还有一个“删除格式”按钮，但它只适用于粗体、斜体等项目。有没有办法通过 javascript 做到这一点？

编辑：结果必须删除开始和结束 H1 标签，而不是用其他任何东西替换它。

请在此处查看简化的测试用例：http: //jsfiddle.net/kthornbloom/GSnbb/1/

<div id="editor" contenteditable="true">
    <h1>This is a heading one</h1>
    How can I remove the header styling if I want to?
</div>
4

3 回答 3

4

我决定实施我在对其他答案的评论中概述的方法：遍历所选范围内的节点并删除特定节点（在这种情况下，基于标签名称）。

这是完整的演示。它不适用于 IE <= 8（缺少 DOM Range 和 Selection 支持），但适用于当前其他主要浏览器。一个问题是选择并不总是被保留，但这并不难实现。

http://jsfiddle.net/gF3sa/1/

此示例包括来自SO 其他地方的修改范围遍历代码。

function nextNode(node) {
    if (node.hasChildNodes()) {
        return node.firstChild;
    } else {
        while (node && !node.nextSibling) {
            node = node.parentNode;
        }
        if (!node) {
            return null;
        }
        return node.nextSibling;
    }
}

function getRangeSelectedNodes(range, includePartiallySelectedContainers) {
    var node = range.startContainer;
    var endNode = range.endContainer;
    var rangeNodes = [];

    // Special case for a range that is contained within a single node
    if (node == endNode) {
        rangeNodes = [node];
    } else {
        // Iterate nodes until we hit the end container
        while (node && node != endNode) {
            rangeNodes.push( node = nextNode(node) );
        }

        // Add partially selected nodes at the start of the range
        node = range.startContainer;
        while (node && node != range.commonAncestorContainer) {
            rangeNodes.unshift(node);
            node = node.parentNode;
        }
    }

    // Add ancestors of the range container, if required
    if (includePartiallySelectedContainers) {
        node = range.commonAncestorContainer;
        while (node) {
            rangeNodes.push(node);
            node = node.parentNode;
        }
    }

    return rangeNodes;
}

function getSelectedNodes() {
    var nodes = [];
    if (window.getSelection) {
        var sel = window.getSelection();
        for (var i = 0, len = sel.rangeCount; i < len; ++i) {
            nodes.push.apply(nodes, getRangeSelectedNodes(sel.getRangeAt(i), true));
        }
    }
    return nodes;
}

function replaceWithOwnChildren(el) {
    var parent = el.parentNode;
    while (el.hasChildNodes()) {
        parent.insertBefore(el.firstChild, el);
    }
    parent.removeChild(el);
}

function removeSelectedElements(tagNames) {
    var tagNamesArray = tagNames.toLowerCase().split(",");
    getSelectedNodes().forEach(function(node) {
        if (node.nodeType == 1 &&
                tagNamesArray.indexOf(node.tagName.toLowerCase()) > -1) {
            // Remove the node and replace it with its children
            replaceWithOwnChildren(node);
        }
    });
}

removeSelectedElements("h1,h2,h3,h4,h5,h6");
于 2013-09-02T22:55:33.553 回答
1

这可能无法完全满足您的需求，但您可以通过使用FormatBlock命令并传入“div”或“pre”作为最终参数来实现：

document.execCommand('formatBlock', false, 'p');

演示： http: //jsfiddle.net/GSnbb/2/ [jsFiddle已被删除]

编辑：是的，这并不能像现在这样回答问题。但是，它早于关于不替换<h1>元素的问题的编辑，并且是对原始问题的合理回答。

于 2013-08-21T08:45:34.730 回答
0

用javascript是可行的，逻辑如下：

  1. 获取选定的文本及其位置（参见 获取突出显示/选定的文本 和 javascript - 获取选定的文本位置）

  2. 从所选文本中删除所有<h1>and</h1>

    s = s.replace(/<h1>/g, '');  
s = s.replace(/<\/h1>/g,'');

  3. 插入更正的文本代替原始文本

我已经根据您的 JSFiddle 起草了一个解决方案，但它需要一些调整。

作品：从 Gecko 和基于 webKit 的浏览器上的选定文本中删除<h1>和删除</h1>

未开发：IE 支持 - cf。jsfiddle中的链接，应该不难

坏了：

  • 替换不完整的选择（仅包含<h1>and之一</h1>） - 易于修复
  • 当它位于所选文本的开头时删除<h1>- 您将需要更多地使用选择和范围来对其进行排序。

PS您是否考虑过使用现有的文本编辑器插件而不是自己创建它？

于 2013-08-31T11:23:01.243 回答