如何在contenteditable div中包装和解包所选文本？

Question

JSFIDDLE DEMO

JsFiddle演示完全适用于换行文本，但我不知道它是如何展开所选文本的。

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

如何解包标签并获取原始选定文本。

Answer 1

如果您不想使用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 2

jQuery将为您节省很多麻烦：

jQuery wrap docs

jQuery unwrap() docs

$（ 'findyourtaghere'）内容（）解开（）;