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 相关文章推荐
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
Jun 27 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
Sep 01 Javascript
IE6浏览器中window.location.href无效的解决方法
Nov 20 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
Mar 26 Javascript
ES6所改良的javascript“缺陷”问题
Aug 23 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
Dec 08 Javascript
javascript作用域链与执行环境详解
Mar 25 Javascript
对angularJs中自定义指令replace的属性详解
Oct 09 Javascript
React性能优化系列之减少props改变的实现方法
Jan 17 Javascript
VsCode与Node.js知识点详解
Sep 05 Javascript
JavaScript实现PC端四格密码输入框功能
Feb 19 Javascript
vue mvvm数据响应实现
Nov 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中json_decode()和json_encode()的使用方法
2012/06/04 PHP
php面向对象中的魔术方法中文说明
2014/03/04 PHP
php实现多城市切换特效
2015/08/09 PHP
PHP创建文件,并向文件中写入数据,覆盖,追加的实现代码
2016/03/25 PHP
php 三大特点:封装,继承,多态
2017/02/19 PHP
PHP利用缓存处理用户注册时的邮箱验证,成功后用户数据存入数据库操作示例
2019/12/31 PHP
js下用eval生成JSON对象
2010/09/17 Javascript
Javascript学习笔记-详解in运算符
2011/09/13 Javascript
关于JavaScript与HTML的交互事件
2013/04/12 Javascript
JavaScript四种调用模式和this示例介绍
2014/01/02 Javascript
删除条目时弹出的确认对话框
2014/06/05 Javascript
学习Angular中作用域需要注意的坑
2016/08/17 Javascript
JS实现列表的响应式排版(推荐)
2016/09/01 Javascript
JavaScript实现多栏目切换效果
2016/12/12 Javascript
vue.js学习之递归组件
2016/12/13 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
2017/05/05 Javascript
总结js中的一些兼容性易错的问题
2017/12/18 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
2020/09/09 Javascript
原生js实现自定义难度的扫雷游戏
2021/01/22 Javascript
[52:07]完美世界DOTA2联赛PWL S3 LBZS vs access 第二场 12.10
2020/12/13 DOTA
Python实现同时兼容老版和新版Socket协议的一个简单WebSocket服务器
2014/06/04 Python
python之wxPython应用实例
2014/09/28 Python
详解python进行mp3格式判断
2016/12/23 Python
Python3.4解释器用法简单示例
2019/03/22 Python
python3.4+pycharm 环境安装及使用方法
2019/06/13 Python
python2.7实现复制大量文件及文件夹资料
2019/08/31 Python
手把手教你从PyCharm安装到激活(最新激活码),亲测有效可激活至2089年
2020/11/25 Python
Python爬虫之Selenium实现关闭浏览器
2020/12/04 Python
python生成word合同的实例方法
2021/01/12 Python
python爬取股票最新数据并用excel绘制树状图的示例
2021/03/01 Python
GLAMGLOW格莱魅美国官网:美国知名的面膜品牌
2016/12/31 全球购物
Marlies Dekkers内衣法国官方网上商店:国际知名的荷兰内衣品牌
2019/03/18 全球购物
租房合同协议书
2014/04/09 职场文书
大学校园招聘会感想
2015/08/10 职场文书
python基础之类属性和实例属性
2021/10/24 Python
Spring Boot DevTools 全局配置学习指南
2022/03/31 Java/Android