javascript - 如何用特殊字符包装选定的文本并在 contenteditable div 中展开简单？

Question

答案中没有给出任何类型的插件参考。我正在使用插件所见即所得的编辑器。

function blanks(){
    wrap("*");
}

function wrap(tag) {
    var sel, range;
    var selectedText;
    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 + '|';
    }

像 stackoverflow 评论框文本一样引用粗体并删除粗体。

Answer 1

我没有能力用具体的方法来回答这个问题，但从概念上来说，这是一项简单的任务。

contenteditable 容器的内容可以简化为字符串。字符串是字符的列表。每个字符在此列表中都有一个位置或索引。

索引通常是从零开始的，所以我们假设在这种情况下。

如果您想用特定值包装一系列字符CHAR，它可能看起来像这样：

var result = string.slice(0, index) + CHAR + string.slice(index, size) + CHAR + string.slice(index + size);

whereindex是第一个字符的位置，size是选择的字符数。