建築編輯與DOM範圍和內容編輯

Question

我想建立一個文本編輯器使用DOM範圍。假設我想要大膽選擇文本。我使用下面的代碼。但是，我無法弄清楚如果它已經加粗，我會如何刪除粗體。我試圖在不使用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); 
    } 
}; 

我不知道這是否是一個「生產」準備好的飲料，但我希望它有幫助。這應該適用於簡單的情況。我不知道它將如何對更復雜的案件作出反應。使用豐富的文本編輯功能會變得非常難看。

讓我貼吧:)