使用香草Javascript封裝所選文本的HTML

Question

我正在開發一個所見即所得的編輯器，由於先前的操作，我無法刪除添加的HTML。

重現該問題：選擇文本並將其加粗。 現在嘗試取消粗體。 我可以刪除該類，但不能刪除包裝的<span> 。 [我在每次單擊事件時都將HTML記錄在控制台中。]

這是我嘗試過的：

        range = sel.getRangeAt(0);
        range.deleteContents();
        range.insertNode(document.createTextNode(selectedText));

但是，它不會刪除包裝的HTML。

 var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0; // Opera 8.0+ (UA detection to detect Blink/v8-powered Opera) var isFirefox = typeof InstallTrigger !== 'undefined'; // Firefox 1.0+ var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0; // At least Safari 3+: "[object HTMLElementConstructor]" var isChrome = !!window.chrome && !isOpera; // Chrome 1+ var isIE = /*@cc_on!@*/false || !!document.documentMode; // At least IE6 function replaceSelectedText(className) { var selectedText, sel, range; if (window.getSelection) { sel = window.getSelection(); selectedText = window.getSelection().toString(); console.log(selectedText); // check if selection has a class if(isChrome){ if(sel.baseNode.parentElement.className && sel.rangeCount){ console.log("isChrome className:" + sel.baseNode.parentElement.className); sel.baseNode.parentElement.className = ""; range = sel.getRangeAt(0); range.deleteContents(); // doesnt delete the wrapping HTML range.insertNode(document.createTextNode(selectedText)); return false; } } if(isFirefox){ if(sel.anchorNode.nextElementSibling.className){ console.log("isFirefox className:" + sel.anchorNode.nextElementSibling.className); sel.anchorNode.nextElementSibling.className = ""; return false; } } //console.log(selectedText); if (sel.rangeCount) { range = sel.getRangeAt(0); range.deleteContents(); var element = document.createElement('span'); element.className = className; element.textContent = selectedText; range.insertNode(element); } } else if (document.selection && document.selection.createRange) { range = document.selection.createRange(); range.text = replacementText; } } var toolbarButtons = document.querySelectorAll("#toolbar button"); //console.log(toolbarButtons); for (var i = 0; i < toolbarButtons.length; ++i) { toolbarButtons[i].addEventListener('click', function(){ replaceSelectedText(this.id); console.log(document.getElementById("editable").innerHTML); }); } 

 #editable{ border: 1px solid #000000; margin-top: 20px; height: 50px; font-family: Arial; } .bold{ font-weight: bold; } .italic{ font-style: italic; } 

 <div id="toolbar"> <button id="bold">Bold</button> <button id="italic">Italic</button> </div> <div id="editable" contentEditable="true"> <div>Lorem Ipsum Lorem Ipsum</div> </div> 

我該如何解決？

Answer 1

我通過在用戶提交表單時使用正則表達式過濾掉沒有className的<span>來解決此問題。

sourceHTML = sourceHTML.replace(/\<span class=""\>([a-zA-Z0-9\s]+)\<\/span\>/g, "$1");