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 相关文章推荐
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
Jan 11 Javascript
jQuery中.live()方法的用法深入解析
Dec 30 Javascript
node.js中的fs.close方法使用说明
Dec 17 Javascript
针对初学者的jQuery入门指南
Aug 15 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
May 23 Javascript
Angular2学习教程之组件中的DOM操作详解
May 28 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
Sep 10 Javascript
vue.js语法及常用指令
Oct 29 Javascript
vue 中filter的多种用法
Apr 26 Javascript
简单两步使用node发送qq邮件的方法
Mar 01 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
Aug 26 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
Sep 11 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
无数据库的详细域名查询程序PHP版(5)
2006/10/09 PHP
深入解析PHP中的(伪)多线程与多进程
2013/07/01 PHP
php查找指定目录下指定大小文件的方法
2014/11/28 PHP
PHP函数extension_loaded()用法实例
2015/01/19 PHP
thinkphp表单上传文件并将文件路径保存到数据库中
2016/07/28 PHP
Laravel5.1 框架控制器基础用法实例分析
2020/01/04 PHP
总结一些js自定义的函数
2006/08/05 Javascript
JavaScript简单实现鼠标拖动选择功能
2014/03/06 Javascript
JavaScript实现添加及删除事件的方法小结
2015/08/04 Javascript
Vue.js第三天学习笔记(计算属性computed)
2016/12/01 Javascript
ECMAScript6 新特性范例大全
2017/03/24 Javascript
微信扫码支付零云插件版实例详解
2017/04/26 Javascript
nodejs 最新版安装npm 的使用详解
2018/01/18 NodeJs
jQuery实现常见的隐藏与展示列表效果示例
2018/06/04 jQuery
angular中子控制器向父控制器传值的实例
2018/10/08 Javascript
Nuxt.js 数据双向绑定的实现
2019/02/17 Javascript
深入了解Hybrid App技术的相关知识
2019/07/17 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
2020/04/07 Javascript
[01:19:33]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第一场 2月2日
2021/03/11 DOTA
Python解决八皇后问题示例
2018/04/22 Python
Python sklearn KFold 生成交叉验证数据集的方法
2018/12/11 Python
Python实现针对json中某个关键字段进行排序操作示例
2018/12/25 Python
Python设计模式之解释器模式原理与用法实例分析
2019/01/10 Python
Django 模型类(models.py)的定义详解
2019/07/19 Python
CSS3中currentColor关键字的妙用
2016/02/27 HTML / CSS
英国电器零售商:PRC Direct
2018/06/21 全球购物
JVM是一个编译程序还是解释程序
2012/09/11 面试题
高中军训广播稿
2014/01/14 职场文书
草船借箭教学反思
2014/02/03 职场文书
党员组织关系介绍信
2014/02/13 职场文书
2014年百日安全生产活动总结
2014/05/04 职场文书
呼啸山庄读书笔记
2015/06/29 职场文书
爱鸟护鸟的宣传语
2015/07/13 职场文书
python基于OpenCV模板匹配识别图片中的数字
2021/03/31 Python
vue3使用vuedraggable实现拖拽功能
2022/04/06 Vue.js
阿里云ECS云服务器快照的概念以及如何使用
2022/04/21 Servers