Question

我正在为一个项目做一个WYSIWYG，我需要能够突出显示文本，单击一个按钮，这将在选择中添加一个“.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 + ']';
    }

}

Answer 1

一个选项是我class highlighter module库的Rangy。这样做的好处是可以在所有主流浏览器（包括IE 6-8）中工作，也可以在一般情况下工作，例如当选择包含以不同元素开头和结尾的文本时。

如果您需要处理的唯一案例是单个文本节点内的文本，您可以从选择中创建一个范围并调用其surroundContents()方法。有关详细信息，请参阅以下答案：

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

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

1 个答案: