本文为大家分享了元素用户界面编辑富文本编辑器及插入图片自定义，供大家参考，具体内容如下

1.安装

新公共管理安装vue-quill-editor - save2 .在main.js中引入

从《羽毛笔编辑》中导入VueQuillEditor ' import '套筒轴/dist/套筒轴。核心。CSS“导入”套筒轴/距离/套筒轴。下雪了。CSS“导入”套筒轴/距离/套筒轴。泡泡。CSS ' vue。使用(VueQuillEditor)；3.模板

div！-图片上传组件辅助-上传器类=' avatar-uploader ' : action=' serverUrl ' name=' img ' : headers=' header ' : how-file-list=' false ' : on-success='上传成功' : on-error=' uploadError ' : before-upload=' before upload '/El-upload quill-editor v-model=' content ' ref=' myQuillEditor ' : options=' editor options '

script const toolboroptions=[[' bold '，' italic '，'下划线，' strike']，//切换按钮[{'header': 1}，{'header': 2}]，//自定义按钮值[{'list': 'ordered'}，{'list': 'bullet'}]，[{'indent': '-1'}，{'indent': ' 1'}，//升级/缩进[{ '方向' 333330 ' //根据图片上传状态来确定是否显示装货动画，刚开始是假的，不显示content: null，编辑器选项： {占位符： ' '，主题： ' snow '，//或bubble ' modules : { toolbar : { container 3: toolbarOptions，handlers : { ' image ' : function(value){ if(value){//触发投入框选择图片文件document.querySelector(' .头像上传者输入')。单击()} else { this。奎尔。格式(' image '，false)；} } } } } }，server URL : '/manager/common/imgUpload '，//这里写你要上传的图片服务器地址标头： {//令牌：会话存储。令牌}//有的图片服务器要求请求头需要有token } }，方法： { onEditorChange({ editor，html，text}) {//内容改变事件console.log(' -内容改变事件-')这个。内容=html控制台。日志(html)}，//富文本图片上传前beforeUpload() { //显示装货动画this.quillUpdateImg=true }，uploadSuccess(res，file) { //res为图片服务器返回的数据//获取富文本组件实例控制台。日志(RES)；让奎尔=这个$refs.myQuillEditor.quill /如果上传成功if (res.code==200 ) { //获取光标所在位置让长度=quill.getSelection().指数；//插入图片res.url为服务器返回的图片地址套筒轴.插入嵌入(长度，' image '，res.url) //调整光标到最后quill.setSelection(长度1)else { this .$message.error('图片插入失败)} //正在加载动画消失this.quillUpdateImg=false }，//富文本图片上传失败uploadError() { //正在加载动画消失this.quillUpdateImg=false this .$message.error('图片插入失败') } } }注意：服务器Url :文件上传地址不能直接写全路径，会出现跨域问题报错。需要在conf/index.js中进行配置

模块。exports={ dev : {//path assets子目录： ' static '，assets publicatpath : '/'，host: 'localhost '，//可以被process.env.HOST端口： 8088覆盖，//可以被process.env.PORT覆盖，如果端口正在使用，将确定一个空闲端口autoOpenBrowser:为真，cssSourceMap:为真，代理表： { '/1设置调用接口域名和端口号别忘了加http changeOrigin: true，路径重写： { '^/api': '/'//这里理解成用/api '代替目标里面的地址，组件中我们调接口时直接用/api代替//比如我要调用http://0.0:300/用户/添加，直接写/api/user/add '即可代理后地址栏显示/} }，"/manager " : { target : ' http://localhost :18081/'，changeOrigin: true，路径重写： { '^/manager': '/' } } } } } } }，5.style。

风格ql-editor.ql-blank .QL-编辑{ height : 350 px}/style6 .后台图片上传接口

@请求映射(值='/imgUpload ')公共映射字符串，对象imgUpload(httpersvletrequest，multiparthttpersvletrequest多请求)引发IOException { File output stream fos=new File output stream(新文件(' e ://文件上传///上传。jpg’)；文件输入流fs=(文件输入流)多请求。getfile(' img ').getInputStream()；字节[]缓冲区=新字节[1024];int len=0；while ((len=fs.read(buffer))！=-1) { fos.write(buffer，0，len)；} fos。close()；MapString，Object map=new HashMap()；map.put('code '，200)；map.put('msg '，'上传成功');map.put('url '，' http://localhost :8080/Tomcat。png ')；返回地图；//这里只做返回值测试用，url参数为图片上传后访问地址。具体根据功能进行修改}7.效果如下

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。