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;更改为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()方法后范围将不包含任何文本。

另一个注意事项：如果您在没有控制台或禁用控制台的IE版本中运行它，console.log(text);将会进入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中不起作用。

在可信的DIV中围绕选定文本包装bbcode

3 个答案: