JavaScript-怎么实现编辑器中在光标处插入图片或者表情？

Question

怎么实现编辑器中在光标处插入图片或者表情？实现思路是什么？

Answer 1

先获取光标的位置，以下是我js获取光标的位置（text为要插入的文字，如图片或是表情）：

var textBox = document.getElementById(field);
textBox.focus();
if(document.selection==null){
var iStart = textBox.selectionStart;
var iEnd = textBox.selectionEnd;
sText= textBox.value.substring(iStart, iEnd)
textBox.value = textBox.value.substring(0, iStart) + text + textBox.value.substring(iEnd, textBox.value.length);
//设置光标
var pos = iEnd + text.length;
if(textBox.setSelectionRange){
textBox.focus();
textBox.setSelectionRange(pos,pos);
}else if (textBox.createTextRange) {
var range = textBox.createTextRange();
range.moveStart('character', iStart);
range.moveEnd('character', -iEnd);
range.collapse(true);
range.select();
}
}else{
document.selection.createRange().text += text;
}

var text = $("#"+field).val(); //此处的text为插入文字后的所有文字，然后将text赋值到编辑器就ok了