javascript - 在内容可编辑的 DIV 中将 bb 代码包裹在选定的文本周围

Question

所以我正在尝试创建一个 RTE 环境。 我有一个内容可编辑的 div，我想让用户选择文本，然后按下一个将 BBCode 环绕在其周围的按钮。

我尝试创建以下函数，但是，所选文本只是被替换了。 它似乎没有在 selectedText 中存储正确的值

function wrap(tag) 
{


    var sel, range;
    if (window.getSelection)
     {
        sel = window.getSelection();
        if (sel.rangeCount)
         {
            range = sel.getRangeAt(0);
            var selectedText = range;
            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;
        console.log(text);
        range.text = '['+tag+']'+text+'[/'+tag+']';
    }
}


</script>

JQuery 是可以接受的，但我更喜欢常规的 Javascript。

Answer 1

将 selectedText = range; 更改为 selectedText = range.toString();。范围是一个对象，当您执行 deleteContents 时，它会清除数据，因此不会换行。

DEMO

JS:

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 + ']';
    }

}