具有 DOM 范围和内容可编辑的建筑编辑器

Question

我正在尝试使用 DOM Range 构建一个文本编辑器。假设我正在尝试将选定的文本加粗。我使用以下代码来完成。但是，如果它已经加粗，我无法弄清楚如何删除粗体。我试图在不使用 execCommand 函数的情况下完成此操作。

this.selection = window.getSelection();
this.range = this.selection.getRangeAt(0);

let textNode = document.createTextNode(this.range.toString());
let replaceElm = document.createElement('strong');

replaceElm.appendChild(textNode);
this.range.deleteContents();
this.range.insertNode(replaceElm);

this.selection.removeAllRanges();

基本上，如果选择范围包含在 <strong> 标签中，我想将其删除。

Answer 1

好的，我起草了这段代码。它基本上抓取当前选定的节点，获取文本内容并删除样式标签。

// Grab the currenlty selected node
// e.g. selectedNode will equal '<strong>My bolded text</strong>'
const selectedNode = getSelectedNode();

// "Clean" the selected node. By clean I mean extracting the text
// selectedNode.textContent will return "My bolded text"
/// cleandNode will be a newly created text type node [MDN link for text nodes][1]
const cleanedNode = document.createTextNode(selectedNode.textContent);

// Remove the strong tag
// Ok so now we have the node prepared. 
// We simply replace the existing strong styled node with the "clean" one. 
// a.k.a undoing the strong style.
selectedNode.parentNode.replaceChild(cleanedNode, selectedNode);

// This function simply gets the current selected node. 
// If you were to select 'My bolded text' it will return 
// the node '<strong> My bolded text</strong>'
function getSelectedNode() {
    var node,selection;

    if (window.getSelection) {
      selection = getSelection();
      node = selection.anchorNode;
    }
    if (!node && document.selection) {
        selection = document.selection
        var range = selection.getRangeAt ? selection.getRangeAt(0) : selection.createRange();
        node = range.commonAncestorContainer ? range.commonAncestorContainer :
               range.parentElement ? range.parentElement() : range.item(0);
    }
    if (node) {
      return (node.nodeName == "#text" ? node.parentNode : node);
    }
};

我不知道这是否是 "production" 准备好的解决方案，但我希望它能有所帮助。这应该适用于简单的情况。我不知道它会如何处理更复杂的情况。使用富文本编辑，事情会变得非常难看。

随时通知我 :)

具有 DOM 范围和内容可编辑的建筑编辑器

Building editor with DOM Range and content editable

javascript

contenteditable

rich-text-editor

ecmascript-6