如何在 contenteditable div 中包装和展开选定的文本？答案

【问题标题】：How to wrap and unwrap selected text in contenteditable div?如何在 contenteditable div 中包装和展开选定的文本？
【发布时间】：2013-12-26 05:40:03
【问题描述】：

JSFIDDLE DEMO

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

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

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

【问题讨论】：

这令人困惑，因为在您的 jsfiddle 中，您不是在添加标签，而是在添加文本。

标签： javascript jquery contenteditable rangy

【解决方案1】：

jQuery 会为你省去很多麻烦：

jQuery wrap docs

jQuery unwrap() docs

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

【讨论】：

这仅在您的文本实际上包含在标签中时才有效，您的 jsfiddle 实际上只是添加新文本。
但它可能无法在这里工作！我想在第二次替换文本时删除特殊字符。james.padolsey.com/javascript/…

【解决方案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，它很容易用于您的目的。但是你需要注意浏览器的兼容性。

【讨论】：

【解决方案3】：

我仍然没有找到我要找的东西，但我找到了您正在寻找的解决方案，这一行将获取所选文本的父元素并将其删除，将文本保留在原处，除非您选择文本以外的其他内容，例如元素，但那将是另一个问题。

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

【讨论】：