javascript – 如何删除ContentEditable中的H1格式(wysiwyg)

前端之家收集整理的这篇文章主要介绍了javascript – 如何删除ContentEditable中的H1格式(wysiwyg)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

除了使用Undo之外,我认为没有办法删除内容可编辑的h1和h2标签.预期的行为是再次单击H1按钮应该关闭它,但它不会.还有一个“删除格式”按钮,但它只适用于粗体,斜体等项目.有没有办法通过JavaScript执行此操作?

编辑:结果必须删除打开和关闭H1标记,而不是用其他任何内容替换它.

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

@H_301_10@
最佳答案
我决定将我在评论中概述的方法实现到我的另一个答案:遍历所选范围内的节点并删除特定节点(在这种情况下,基于标记名称).

这是完整的演示.它不能在IE< = 8(缺少DOM范围和选择支持)中工作,但会在其他主要的当前浏览器中使用.一个问题是选择并不总是保留,但这并不难实现. http://jsfiddle.net/gF3sa/1/

此示例包括elsewhere on SO修改范围遍历代码.

@H_301_10@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");
原文链接:https://www.f2er.com/js/429799.html

猜你在找的JavaScript相关文章