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


Posted in Vue.js onJanuary 13, 2021

一、准备工作

下载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.js 相关文章推荐
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 Vue.js
Vue实现点击当前行变色
Dec 14 Vue.js
vue实现简易的双向数据绑定
Dec 29 Vue.js
vue中activated的用法
Jan 03 Vue.js
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
vue 页面跳转的实现方式
Jan 12 Vue.js
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
vue实现可拖拽的dialog弹框
May 13 Vue.js
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
基于VUE实现简单的学生信息管理系统
Jan 13 #Vue.js
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 #Vue.js
vue自定义组件实现双向绑定
Jan 13 #Vue.js
Vue页面渲染中key的应用实例教程
Jan 12 #Vue.js
Vue项目中使用mock.js的完整步骤
Jan 12 #Vue.js
vue 页面跳转的实现方式
Jan 12 #Vue.js
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 #Vue.js
You might like
为php4加入动态flash文件的生成的支持
2006/10/09 PHP
php中curl、fsocket、file_get_content三个函数的使用比较
2014/05/09 PHP
PHP中Memcache操作类及用法实例
2014/12/12 PHP
PHP实现抓取Google IP并自动修改hosts文件
2015/02/12 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
PHP使用curl_multi_select解决curl_multi网页假死问题的方法
2018/08/15 PHP
PHP一个简单的无需刷新爬虫
2019/01/05 PHP
jquery ajax提交表单数据的两种方式
2009/11/24 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
2013/11/19 Javascript
jquery与prototype框架的详细对比
2013/11/21 Javascript
常用的JavaScript验证正则表达式汇总
2013/11/26 Javascript
JS创建自定义表格具体实现
2014/02/11 Javascript
javascript实现获取cookie过期时间的变通方法
2014/08/14 Javascript
jQuery实现tab标签自动切换的方法
2015/02/28 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
2016/07/24 Javascript
详解jQuery中的事件
2016/12/14 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
2018/03/26 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
2018/12/22 Javascript
解决layui动态添加的元素click等事件触发不了的问题
2019/09/20 Javascript
[03:04]DOTA2超级联赛专访ZSMJ “莫名其妙”的逆袭
2013/05/23 DOTA
Python 错误和异常小结
2013/10/09 Python
python更改已存在excel文件的方法
2018/05/03 Python
python实现列表中由数值查到索引的方法
2018/06/27 Python
Python global全局变量函数详解
2018/09/18 Python
深入理解Django-Signals信号量
2019/02/19 Python
Python 旋转打印各种矩形的方法
2019/07/09 Python
5款实用的python 工具推荐
2020/10/13 Python
Jogun Shop中文官网:韩国知名时尚男装网站
2016/10/12 全球购物
Meli Melo官网:名媛们钟爱的英国奢侈手包品牌
2017/04/17 全球购物
大四自我鉴定范文
2013/10/06 职场文书
2014村务公开实施方案
2014/02/25 职场文书
反腐倡廉警示教育活动总结
2014/05/05 职场文书
县政协领导班子群众路线教育实践活动四风问题整改方案
2014/10/26 职场文书
党员活动总结
2015/02/04 职场文书
幼儿园教师辞职信
2019/06/21 职场文书
python控制台打印log输出重复的解决方法
2021/05/14 Python