如何在 contenteditable div 中換行和解包選定的文本？

Question

JSFIDDLE 演示

JsFiddle Demo 完全適用於換行文本，但我不知道它是如何解開所選文本的。

 range.text = '[' + tag + ']' + selectedText + '[/' + tag + ']';

它是如何解開標簽並獲取原始選定文本的。

Answer 1

jQuery 將在這里為您省去很多麻煩：

jQuery 包裝文檔

jQuery unwrap() 文檔

$('findyourtaghere').contents().unwrap();

Answer 2

如果你不想使用 jQuery，你可以使用這樣的東西：

var element = document.createElement('span');
element.originalText = selectedText;
element.textContent = '[' + tag + ']' + selectedText + '[/' + tag + ']';
element.onclick = function() {
    this.parentNode.replaceChild(document.createTextNode(this.originalText), this);  
};
range.insertNode(element);

我在這里使用了span元素，而不是 textNode，它很容易用於您的目的。 但是您需要注意瀏覽器兼容性。

Answer 3

我仍然沒有找到我要找的東西，但我找到了你要找的東西的解決方案，這一行將獲取所選文本的父元素並將其刪除，並將文本保留在原處，除非你選擇例如，諸如元素之類的文本以外的東西，但這將是另一個問題。

$(window.getSelection().anchorNode.parentElement).unwrap();