在內容可編輯DIV中的選定文本周圍包裝bb代碼

Question

所以我正在嘗試創建一個RTE環境。 我有一個內容可編輯的div，我想允許用戶選擇文本，然后按一個按鈕，將BBCode包裹在它周圍。

我嘗試創建以下函數，但是，所選文本只是被替換。 它似乎沒有存儲適當的值ein 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; to 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 + ']';
    }

}

Answer 2

你需要

var selectedText = range.toString();

而不是

var selectedText = range;

...因為在調用deleteContents()方法之后，范圍將不包含任何文本。

另一個注意事項： console.log(text); 如果您在沒有控制台或禁用控制台的IE版本中運行IE分支，則會拋出IE分支。

Answer 3

這里的另一個答案確實有效，但前提是選擇中沒有圖像。 我已將其簡化並使其與選擇中的圖像一起使用：

https://jsfiddle.net/skeets23/go1nxf06/

function wrap(tag) {

  sel = window.getSelection();

  if (sel.rangeCount) {
    range = sel.getRangeAt(0);
    range.insertNode(document.createTextNode("["+tag+"]"));
    range.collapse();
    range.insertNode(document.createTextNode("[/"+tag+"]"));
  }

}

由於我正在開發一個內部項目，所以我並不打算讓它與其他答案中的所有瀏覽器兼容，但它適用於當前版本的firefox和chrome。 在IE中不起作用。