[英]Wrap bb code around selected text in a content editable DIV
所以我正在尝试创建一个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。
改变selectedText = range;
to selectedText = range.toString();
。 范围是一个对象,当你执行deleteContents时,它会清除数据,因此它不会被删除。
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 + ']';
}
}
你需要
var selectedText = range.toString();
而不是
var selectedText = range;
...因为在调用deleteContents()
方法之后,范围将不包含任何文本。
另一个注意事项: console.log(text);
如果您在没有控制台或禁用控制台的IE版本中运行IE分支,则会抛出IE分支。
这里的另一个答案确实有效,但前提是选择中没有图像。 我已将其简化并使其与选择中的图像一起使用:
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中不起作用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.