Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义


Posted in Javascript onAugust 20, 2019

本文为大家分享了Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义,供大家参考,具体内容如下

1.安装

npm install vue-quill-editor --save

2.在main.js中引入

import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
 
Vue.use(VueQuillEditor);

3. template

<div>
 
  <!-- 图片上传组件辅助-->
  <el-upload
  class="avatar-uploader"
  :action="serverUrl"
  name="img"
  :headers="header"
  :show-file-list="false"
  :on-success="uploadSuccess"
  :on-error="uploadError"
  :before-upload="beforeUpload">
  </el-upload>
  <quill-editor
  v-model="content"
  ref="myQuillEditor"
  :options="editorOption"
  @change="onEditorChange($event)"
  >
  </quill-editor>
 </div>

4.js

<script>
 const toolbarOptions = [
 ['bold', 'italic', 'underline', 'strike'],  // toggled buttons
 [{'header': 1}, {'header': 2}],    // custom button values
 [{'list': 'ordered'}, {'list': 'bullet'}],
 [{'indent': '-1'}, {'indent': '+1'}],   // outdent/indent
 [{'direction': 'rtl'}],       // text direction
 [{'size': ['small', false, 'large', 'huge']}], // custom dropdown
 [{'header': [1, 2, 3, 4, 5, 6, false]}],
 [{'color': []}, {'background': []}],   // dropdown with defaults from theme
 [{'font': []}],
 [{'align': []}],
 ['link', 'image'],
 ['clean']
 
 ]
 export default {
 data() {
  return {
  quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画,刚开始是false,不显示
  content: null,
  editorOption: {
   placeholder: '',
   theme: 'snow', // or 'bubble'
   modules: {
   toolbar: {
    container: toolbarOptions,
    handlers: {
    'image': function (value) {
     if (value) {
     // 触发input框选择图片文件
     document.querySelector('.avatar-uploader input').click()
     } else {
     this.quill.format('image', false);
     }
    }
    }
   }
   }
  },
  serverUrl: '/manager/common/imgUpload', // 这里写你要上传的图片服务器地址
  header: {
   // token: sessionStorage.token
  } // 有的图片服务器要求请求头需要有token
  }
 },
 methods: {
  onEditorChange({editor, html, text}) {//内容改变事件
  console.log("---内容改变事件---")
  this.content = html
  console.log(html)
  },
  // 富文本图片上传前
  beforeUpload() {
  // 显示loading动画
  this.quillUpdateImg = true
  },
 
  uploadSuccess(res, file) {
  // res为图片服务器返回的数据
  // 获取富文本组件实例
  console.log(res);
  let quill = this.$refs.myQuillEditor.quill
  // 如果上传成功
  if (res.code == 200 ) {
   // 获取光标所在位置
   let length = quill.getSelection().index;
   // 插入图片 res.url为服务器返回的图片地址
   quill.insertEmbed(length, 'image', res.url)
   // 调整光标到最后
   quill.setSelection(length + 1)
  } else {
   this.$message.error('图片插入失败')
  }
  // loading动画消失
  this.quillUpdateImg = false
  },
  // 富文本图片上传失败
  uploadError() {
  // loading动画消失
  this.quillUpdateImg = false
  this.$message.error('图片插入失败')
  }
 }
 }

注意:serverUrl :文件上传地址不能直接写全路径,会出现跨域问题报错。需要在conf/index.js 中 进行配置

module.exports = {
 dev: {
 // Paths
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 host: 'localhost', // can be overwritten by process.env.HOST
 port: 8088, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
 autoOpenBrowser: true,
 cssSourceMap: true,
 proxyTable: {
  '/api': {
  target: 'http://localhost:18080/', //设置调用接口域名和端口号别忘了加http
  changeOrigin: true,
  pathRewrite: {
   '^/api': '/' //这里理解成用‘/api'代替target里面的地址,组件中我们调接口时直接用/api代替
   // 比如我要调用'http://0.0:300/user/add',直接写‘/api/user/add'即可 代理后地址栏显示/
  }
  },
  '/manager': {
  target: 'http://localhost:18081/',
  changeOrigin: true,
  pathRewrite: {
   '^/manager': '/'
  }
  }
 }
 
 },

5.style

<style>
 .ql-editor.ql-blank, .ql-editor {
 height: 350px;
 }
</style>

6.后台图片上传接口

@RequestMapping(value = "/imgUpload")
 public Map<String ,Object> imgUpload(HttpServletRequest req, MultipartHttpServletRequest multiReq)
   throws IOException {
  
  FileOutputStream fos = new FileOutputStream(
    new File("E://fileupload//upload.jpg"));
  FileInputStream fs = (FileInputStream) multiReq.getFile("img").getInputStream();
  byte[] buffer = new byte[1024];
  int len = 0;
  while ((len = fs.read(buffer)) != -1) {
   fos.write(buffer, 0, len);
  }
  fos.close();
  Map<String ,Object> map=new HashMap<>();
  map.put("code",200);
  map.put("msg","上传成功");
  map.put("url","http://localhost:8080/tomcat.png");
  return map;//这里只做返回值测试用,url 参数为图片上传后访问地址。具体根据功能进行修改}

7.效果如下

Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS页面延迟执行一些方法(整理)
Nov 11 Javascript
js获取当前页面的url网址信息
Jun 12 Javascript
动态载入js提高网页打开速度的方法
Jul 04 Javascript
使用jQuery实现验证上传图片的格式与大小
Dec 03 Javascript
JavaScript插件化开发教程(六)
Feb 01 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
Jun 08 Javascript
使用JS和canvas实现gif动图的停止和播放代码
Sep 01 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
Aug 31 Javascript
利用Dectorator分模块存储Vuex状态的实现
Feb 05 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
Jun 03 Javascript
浅谈Layui的eleTree树式选择器使用方法
Sep 25 Javascript
VUE使用axios调用后台API接口的方法
Aug 03 Javascript
node中使用log4js4.x版本记录日志的方法
Aug 20 #Javascript
vue 获取视频时长的实例代码
Aug 20 #Javascript
vue+elementUI实现图片上传功能
Aug 20 #Javascript
vue+elementUi图片上传组件使用详解
Aug 20 #Javascript
vue集成chart.js的实现方法
Aug 20 #Javascript
微信小程序实现定位及到指定位置导航的示例代码
Aug 20 #Javascript
微信小程序使用车牌号输入法的示例代码
Aug 20 #Javascript
You might like
第九节 绑定 [9]
2006/10/09 PHP
php stream_get_meta_data返回值
2013/09/29 PHP
php数组比较实现查找连续数的方法
2015/07/29 PHP
Yii框架连接mongodb数据库的代码
2016/07/27 PHP
php使用ftp远程上传文件类(完美解决主从文件同步问题的方法)
2016/09/23 PHP
PHP进程通信基础之信号
2017/02/19 PHP
jquery乱码与contentType属性设置问题解决方案
2013/01/07 Javascript
JavaScript之Vue.js【入门基础】
2016/12/06 Javascript
用JavaScript实现让浏览器停止载入页面的方法
2017/01/19 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
2017/04/18 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
2017/06/28 Javascript
jquery 实现拖动文件上传加载进度条功能
2018/03/18 jQuery
解决webpack多页面内存溢出的方法示例
2019/10/08 Javascript
[01:31]完美与DOTA2历程
2014/07/31 DOTA
[48:32]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs VG
2018/04/01 DOTA
Python使用os模块和fileinput模块来操作文件目录
2016/01/19 Python
实例探究Python以并发方式编写高性能端口扫描器的方法
2016/06/14 Python
《Python学习手册》学习总结
2018/01/17 Python
Python使用selenium实现网页用户名 密码 验证码自动登录功能
2018/05/16 Python
Python 中包/模块的 `import` 操作代码
2019/04/22 Python
python简单区块链模拟详解
2019/07/03 Python
Python验证码截取识别代码实例
2020/05/16 Python
Python本地及虚拟解释器配置过程解析
2020/10/13 Python
Python爬虫爬取ts碎片视频+验证码登录功能
2021/02/22 Python
CSS3实现内凹圆角的实例代码
2017/05/04 HTML / CSS
详解HTML5中的Communication API基本使用方法
2016/01/29 HTML / CSS
项目经理的岗位职责
2013/11/23 职场文书
领导班子专题民主生活会情况想汇报
2014/09/30 职场文书
二手房购房协议书范本
2014/10/05 职场文书
2014年财务部工作总结
2014/11/11 职场文书
小学班主任个人总结
2015/03/03 职场文书
年底个人总结范文
2015/03/10 职场文书
小学运动会通讯稿
2015/07/18 职场文书
外科护士长工作总结
2015/08/12 职场文书
MySQL中rank() over、dense_rank() over、row_number() over用法介绍
2022/03/23 MySQL
Android存储中最基本的文件存储方式
2022/04/30 Java/Android