将“突出显示”按钮添加到 ContentEditable答案

【问题标题】：Add "highlight" button to ContentEditable将“突出显示”按钮添加到 ContentEditable
【发布时间】：2014-03-10 01:39:42
【问题描述】：

我正在为一个项目做一点所见即所得，我需要能够突出显示文本，单击一个按钮，这将在选择周围附加一个带有“.highlight”类的跨度。跨度将具有黄色背景。

这是我迄今为止在 SO 上的其他地方所拥有的，它是附加文本而不是 HTML。 http://jsfiddle.net/aGzvp/

这是 JS：

function wrap(tag) {
    var sel, range;

    if (window.getSelection) {
        sel = window.getSelection();

        if (sel.rangeCount) {
            range = sel.getRangeAt(0);
            selectedText = range.toString();
            range.deleteContents();
            range.insertNode(document.createTextNode('[' + tag + ']' + selectedText + '[/' + tag + ']'));
        }
    }
    else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        selectedText = document.selection.createRange().text + "";
        range.text = '[' + tag + ']' + selectedText + '[/' + tag + ']';
    }

}

【问题讨论】：

标签： javascript jquery contenteditable

【解决方案1】：

一个选项是我的Rangy 库中的class highlighter module。 This has the advantage of working in all major browsers (including IE 6-8) and working in the general case, such as when the selection includes text that starts and ends in different elements.

如果您需要处理的唯一情况是单个文本节点中的文本，您可以从选择中创建一个范围并调用其surroundContents() 方法。详情见以下答案：

https://stackoverflow.com/a/6328906/96100

【讨论】：

我在等待全能的射程巫师 Tim Down 来插话！谢谢，今晚我会看看它，如果我有任何问题，我会回复。