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

UI设计界面 UI设计界面 主题:1059 回复:2190

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

偏爱自由 发布于 2016-10-28 字数 65 浏览 951 回复 1

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

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

支持 Markdown 语法,需要帮助?

评论(1

瑾兮 2017-05-14 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了