vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能

目录

• 一、准备工作
• 二、定义全局组件quill-editor
• 1、定义template模板
• 2、定义富文本选项配置
• 三、相关方法
• 1、改变原有富文本编辑器上传图片绑定方法
• 2、上传事件

一、准备工作

下载vue-quill-edITor

npm install vue-quill-editor --save 或者 yarn add vue-quill-editor

二、定义全局组件quill-editor

下载好vue-quill-editor后，我们需要定义一个全局组件，把这个组件名字命名为quill-editor

1、定义template模板

div>
     quill-editor v-model="value" ref="myQuillEditor" :options="editorOption" @change="onEditorChange" >
     /quill-editor>
     input tyPE="file" hidden accept=".jpg,.png" ref="fileBTn" @change="handleChange" />
    /div>
    

2、定义富文本选项配置

editorOption: {
 toolbar: [ ['bold', 'italic', 'underline'], //加粗、斜体、下划线、删除线, 'strike' ['blockquote', 'code-block'], //引用、代码块 [{
 'header': 1 }
, {
 'header': 2 }
], //h1 H2 [{
 'list': 'ordered' }
, {
 'list': 'bullet' }
], //列表 [{
 'script': 'sub' }
, {
 'script': 'super' }
], //上标、下标 [{
 'indent': '-1' }
, {
 'indent': '+1' }
], //缩进 [{
 'direction': 'rtl' }
], //文字编辑方向，从左到右还是从右到左 [{
 'size': ['small', false, 'large', 'huge'] }
], //文字大小 [{
 'header': [1, 2, 3, 4, 5, 6, false] }
], //选中的文字容器高度 [{
 'font': [] }
], //字体样式 [{
 'color': [] }
, {
 'background': [] }
], //颜色、背景颜色 [{
 'align': [] }
], //对齐方式 ['clean'], //清除选中文字的所有样式 ['link', 'image', 'video'] //超链接、图片、视频链接 ],}
    

三、相关方法

1、改变原有富文本编辑器上传图片绑定方法

mounted() {
 if (this.$refs.myQuillEditor) {
     //myQuillEditor改成自己的 this.$refs.myQuillEditor.quill.getModule("toolbar").addHandler("image", this.imgHandler);
 }
}
,methods:{
 imgHandler(state) {
 if (state) {
 		//触发input的单击 ，fileBtn换成自己的  this.$refs.fileBtn.click() }
 }
}
    

2、上传事件

handleChange(e) {
     const files = Array.PRototype.slice.call(e.target.files);
 if (!files) {
     return;
 }
     let formdata = new FormData();
     formdata.append("file_name", files[0].name);
     formdata.append("imgs", files[0]);
 //使用了axios请求 this.axios({
 url: this.$Store.state.baseUrl + 'upload/ueditorFile', method: 'post', data: formdata, headers: {
'client-identity': localStorage.getItem('session_id')}
 }
    ).then((res) =>
 {
     	//这里设置为空是为了联系上传同张图可以触发change事件 this.$refs.fileBtn.value = "";
 if (res.data.code == 200) {
      let selection = this.$refs.myQuillEditor.quill.getSelection();
      //这里就是返回的图片地址，如果接口返回的不是可以访问的地址，要自己拼接  let imgUrl = this.$store.state.baseUrl + res.data.data;
       imgUrl = imgUrl.replace(/\\/g,"/") 			//获取quill的光标，插入图片   this.$refs.myQuillEditor.quill.insertEmbed(selection != null ? selection.index : 0, 'image', imgUrl)   			//插入完成后，光标往后移动一位   this.$refs.myQuillEditor.quill.setSelection(selection.index + 1);
 }
  }
)}
    

最后在父组件使用这个全局quill组件，并传递自己需要的相关参数，就完成啦~

到此这篇关于vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能的文章就介绍到这了,更多相关vue-quill-editor上传图片到服务器内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

• Vue实现附件上传功能
• Spring+Vue整合UEditor富文本实现图片附件上传的方法
• vue打包上传服务器刷新404问题的两种方案
• vue+element+oss实现前端分片上传和断点续传
• 基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
• vue form表单post请求结合Servlet实现文件上传功能
• 基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
• vue+vant 上传图片需要注意的地方
• vue实现图片裁剪后上传
• vue中多附件上传的实现示例

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！