为了账号安全,请及时绑定邮箱和手机立即绑定

萌新!vue-quill-editor中,怎么通过点击按钮在光标出插入文字?十分感谢

/ 猿问

萌新!vue-quill-editor中,怎么通过点击按钮在光标出插入文字?十分感谢

阿波罗的战车 2019-08-21 20:06:45
应项目需求,在富文本编辑的时候在边上有对应的按钮点击后可以在光标处添加固定格式的文字。如:在“111111”当光标在结尾处点击按钮,就会让富文本中的文字变成“111111222”如果在光变第一个“1”后面,则会变成“122211111”这种形式我直接在点击的时候触发函数,直接在末尾添加固定格式的文字,好吧我想多了。
大概是这样的一个形式
                    
查看完整描述

2 回答

?
HUH函数
请输入代码
onEditorChange(editor){
//内容改变事件
varselection=getSelection();
//设置最后光标对象
this.lastEditRange=selection.getRangeAt(0);
console.log(this.lastEditRange);
},
onEditorFocus(editor){
//获得焦点事件
console.log("获得焦点");
varselection=getSelection();
//设置最后光标对象
this.lastEditRange=selection.getRangeAt(0);
console.log(this.lastEditRange);
},
addFormattingText(e){
letedit=$(".ql-editor")[0];
console.log(edit);
letoptions=e;
console.log(options);
edit.focus();
letselection=getSelection();
console.log(selection);
console.log(this.lastEditRange);
if(this.lastEditRange){
console.log(this.lastEditRange);
console.log("文本不为空,不换行每次都出现");
//存在最后光标对象,选定对象清除所有光标并添加最后光标还原之前的状态
selection.removeAllRanges();
selection.addRange(this.lastEditRange);
}
if(selection.anchorNode.nodeName!="#text"){
//如果是编辑框范围。则创建表情文本节点进行插入
varemojiText=e;
//varrange=document.createRange()
//console.log(emojiText)
console.log(edit.childNodes);
console.log(selection.anchorOffset);
if(edit.childNodes.length>0){
//如果文本框的子元素大于0,则表示有其他元素,则按照位置插入表情节点
for(vari=0;iif(i==selection.anchorOffset&&selection.anchorOffset!=0){
console.log("成功");
edit.insertBefore(emojiText,edit.childNodes[i]);
}else{
console.log("失败");
console.log(edit.children[0]);
edit.children[0].appendChild(document.createTextNode(emojiText));
}
}
}else{
//否则直接插入一个表情元素
edit.appendChild(emojiText);
}
if(window.getSelection){
//ie11109ffsafari
edit.focus();//解决ff不获取焦点无法定位问题
varrange=window.getSelection();//创建range
range.selectAllChildren(edit);//range选择obj下所有子内容
range.collapseToEnd();//光标移至最后
}elseif(document.selection){
//ie1098765
varrange=document.selection.createRange();//创建选择对象
//varrange=document.body.createTextRange();
range.moveToElementText(edit);//range定位到obj
range.collapse(false);//光标移至最后
range.select();
}
//创建新的光标对象
//edit.focus();
//varrange=document.createRange();
//console.log(range);
////光标对象的范围界定为新建的表情节点
//range.selectNodeContents(emojiText);
////光标位置定位在表情节点的最大长度
//range.setStart(emojiText,emojiText.length);
////使光标开始和光标结束重叠
//range.collapse(true);
////清除选定对象的所有光标对象
//selection.removeAllRanges();
////插入新的光标对象
//selection.addRange(range);
}else{
console.log("已选择光标");
//如果是文本节点则先获取光标对象
varrange=selection.getRangeAt(0);
//获取光标对象的范围界定对象,一般就是textNode对象
vartextNode=range.startContainer;
//获取光标位置
varrangeStartOffset=range.startOffset;
//文本节点在光标位置处插入新的表情内容
textNode.insertData(rangeStartOffset,e);
//textNode.insertData(rangeStartOffset,emojiInput.value)
//光标移动到到原来的位置加上新内容的长度
range.setStart(textNode,rangeStartOffset+e.length);
//range.setStart(textNode,rangeStartOffset+emojiInput.value.length)
//光标开始和光标结束重叠
range.collapse(true);
//清除选定对象的所有光标对象
selection.removeAllRanges();
//插入新的光标对象
selection.addRange(range);
}
//无论如何都要记录最后光标对象
this.lastEditRange=selection.getRangeAt(0);
}
                            
查看完整回答
反对 回复 2019-08-21
?
炎炎设计
先看看官方文档有没有提供insertText,如果没有用document.execCommand实现
methods:{
insertHtml(text){
//1.判断当前组件是否处于`focus`状态,如果没有则focus。
dosomething...
//2.使用`document.execCommand`方法在光标后追加文本
document.execCommand('insertText',true,text)
}
}
                            
查看完整回答
反对 回复 2019-08-21

添加回答

回复

举报

0/150
提交
取消
意见反馈 邀请有奖 帮助中心 APP下载
官方微信