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

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

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

阿波罗的战车 2019-08-21 20:06:45
应项目需求,在富文本编辑的时候在边上有对应的按钮点击后可以在光标处添加固定格式的文字。如:在“111111”当光标在结尾处点击按钮,就会让富文本中的文字变成“111111222”如果在光变第一个“1”后面,则会变成“122211111”这种形式我直接在点击的时候触发函数,直接在末尾添加固定格式的文字,好吧我想多了。邮箱管理demoimport{quillEditor}from"vue-quill-editor";exportdefault{components:{quillEditor},data(){return{content:"IamExample",str:"",editorOption:{//somethingconfig}};},mounted(){console.log("thisismyeditor",this.content);},computed:{editor(){returnthis.$refs.myTextEditor.quillEditor;}},methods:{//失去焦点事件onEditorBlur(editor){console.log("editorblur!",editor);},//获得焦点事件onEditorFocus(editor){console.log("editorfocus!",editor);},//准备编辑器onEditorReady(editor){console.log("editorready!",editor);},//内容改变事件onEditorChange({editor,html,text}){//console.log('editorchange!',editor,html,text)this.content=html;},demo(){letacc="123456";this.content=this.content+acc;}}};大概是这样的一个形式
查看完整描述

2 回答

?
炎炎设计

TA贡献1808条经验 获得超4个赞

先看看官方文档有没有提供insertText,如果没有用document.execCommand实现
methods:{
insertHtml(text){
//1.判断当前组件是否处于`focus`状态,如果没有则focus。
dosomething...
//2.使用`document.execCommand`方法在光标后追加文本
document.execCommand('insertText',true,text)
}
}
                            
查看完整回答
反对 回复 2019-08-21
  • 2 回答
  • 0 关注
  • 2764 浏览
慕课专栏
更多

添加回答

举报

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