Vue项目中quill-editor带样式编辑器的使用方法


Posted in Javascript onAugust 08, 2017

vue-quill-editor默认插入图片是直接将图片转为base64再放入内容中,如果图片比较大的话,富文本的内容就会很大。

插入视频是直接弹框输入URL地址,某些需求下我们需要让用户去本地选择自己的视频,我们可以通过vue-quill-editor内部的某些方法进行更改

该方法使用了 element-ui 和 文件上传七牛

Vue项目中quill-editor带样式编辑器的使用方法

一、npm 安装 vue-quill-editor

二、在main.js中引入

import VueQuillEditor from 'vue-quill-editor'
Vue.use(VueQuillEditor)
 

HTML部分:为编辑器绑定各个API事件,定义一个隐藏的input框,用于点击图片或者视频图标上传文件

<template>
 <div>
 <!-- quill-editor插件标签 分别绑定各个事件-->
 <quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
 @change="onEditorChange($event)">
 </quill-editor>
 <div class="limit">当前已输入 <span>{{nowLength}}</span> 个字符,您还可以输入 <span>{{SurplusLength}}</span> 个字符。</div>
 <!-- 文件上传input 将它隐藏-->
 <el-upload class="upload-demo" :action="qnLocation" :before-upload='beforeUpload' :data="uploadData" :on-success='upScuccess'
 ref="upload" style="display:none">
 <el-button size="small" type="primary" id="imgInput" v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="插入中,请稍候">点击上传</el-button>
 </el-upload>
 </el-table>
 </div>
</template>

CSS部分:

.quill-editor {
 height: 745px;

 .ql-container {
 height: 680px;
 }
}

.limit {
 height: 30px;
 border: 1px solid #ccc;
 line-height: 30px;
 text-align: right;

 span {
 color: #ee2a7b;
 }
}

.ql-snow .ql-editor img {
 max-width: 480px;
}

.ql-editor .ql-video {
 max-width: 480px;
}

 JS部分:

import Vue from 'util/vueExt'
import { Component } from 'vue-property-decorator'
import * as Template from './editor.vue'
import * as Quill from 'quill' // 引入编辑器

const STATICDOMAIN = '//ss.yidejia.com/'
const STATVIDEO = '//flv.yidejia.com/'

@Component({
 mixins: [Template]
})
export default class Editor extends Vue {
 content = '' // 文章内容
 editorOption = {} // 编辑器选项
 addRange: any = new Array()
 uploadData = {}
 photoUrl = ''  // 上传图片地址
 uploadType = '' // 上传的文件类型(图片、视频)
 fullscreenLoading = false

 $refs: {
 myQuillEditor: any,
 imgInput: any
 }

 get nowLength() {
 return this.content.length
 }

 get SurplusLength() { // 计算属性 获得当前输入字符长度
 let num = 10000 - Number(this.content.length)
 if (num > 0) {
 return num
 } else {
 return 0
 }
 }

 // 上传七牛的actiond地址
 get qnLocation() {
 if (location.protocol === 'http:') {
 return 'http://up-z0.qiniu.com'
 }
 return 'https://up-z0.qbox.me'
 }

 // 图片上传前获得数据token数据
 qnUpload(file) {
 this.fullscreenLoading = true
 const suffix = file.name.split('.')
 const ext = suffix.splice(suffix.length - 1, 1)[0]
 console.log(this.uploadType)
 if (this.uploadType === 'image') { // 如果是点击插入图片
 return this.api.getQNToken().then(res => {
 this.uploadData = {
  key: `image/${suffix.join('.')}_${new Date().getTime()}.${ext}`,
  token: res
 }
 })
 } else if (this.uploadType === 'video') { // 如果是点击插入视频
 return this.api.getVideoQNToken().then(res => {
 this.uploadData = {
  key: `video/${suffix.join('.')}_${new Date().getTime()}.${ext}`,
  token: res
 }
 })
 }
 }

 // 图片上传之前调取的函数
 beforeUpload(file) {
 return this.qnUpload(file)
 }

 // 图片上传成功回调 插入到编辑器中
 upScuccess(e, file, fileList) {
 this.fullscreenLoading = false
 let vm = this
 let url = ''
 if (this.uploadType === 'image') { // 获得文件上传后的URL地址
 url = STATICDOMAIN + e.key
 } else if (this.uploadType === 'video') {
 url = STATVIDEO + e.key
 }
 if (url != null && url.length > 0) { // 将文件上传后的URL地址插入到编辑器文本中
 let value = url
 vm.addRange = vm.$refs.myQuillEditor.quill.getSelection()
 value = value.indexOf('http') !== -1 ? value : 'http:' + value
 vm.$refs.myQuillEditor.quill.insertEmbed(vm.addRange !== null ? vm.addRange.index : 0, vm.uploadType, value, Quill.sources.USER) // 调用编辑器的 insertEmbed 方法,插入URL
 } else {
 (<any>this).$message.error(`${vm.uploadType}插入失败`)
 }
 this.$refs['upload'].clearFiles() // 插入成功后清除input的内容
 }

 // 点击图片ICON触发事件
 imgHandler(state) {
 this.addRange = this.$refs.myQuillEditor.quill.getSelection()
 if (state) {
 let fileInput = document.getElementById('imgInput')
 fileInput.click() // 加一个触发事件
 }
 this.uploadType = 'image'
 }

 // 点击视频ICON触发事件
 videoHandler(state) {
 this.addRange = this.$refs.myQuillEditor.quill.getSelection()
 if (state) {
 let fileInput = document.getElementById('imgInput')
 fileInput.click() // 加一个触发事件
 }
 this.uploadType = 'video'
 }

 // 编辑器光标离开 将编辑器内容发射给父组件
 onEditorBlur(editor) {
 this.$emit('getValue', this.content)
 }

 // 编辑器获得光标
 onEditorFocus(editor) {
 editor.enable(true) // 实现达到上限字符可删除
 }

 // 编辑器文本发生变化
 onEditorChange({ editor, html, text }) {
 let textLength = text.length
 if (textLength > 10000) {
 (<any>this).$message.error('最多输入10000个字符')
 editor.enable(false)
 }
 this.$emit('getValue', this.content)
 }

 // 清除编辑器内容
 callMethod() {
 this.content = ''
 }

 // 页面加载后执行 为编辑器的图片图标和视频图标绑定点击事件
 mounted() {
 // 为图片ICON绑定事件 getModule 为编辑器的内部属性
 this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', this.imgHandler)
 this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('video', this.videoHandler) // 为视频ICON绑定事件
 }
}

相关参考链接:

vue-quill-editor API文档地址

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

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

Javascript 相关文章推荐
Hutia 的 JS 代码集
Oct 24 Javascript
Javascript 函数中的参数使用分析
Mar 27 Javascript
js获取和设置属性的方法
Feb 20 Javascript
Javascript封装DOMContentLoaded事件实例
Jun 12 Javascript
DOM基础教程之使用DOM + Css
Jan 20 Javascript
jQuery实现的淡入淡出二级菜单效果代码
Sep 15 Javascript
JQuery动态添加Select的Option元素实现方法
Aug 29 Javascript
jQuery实现圣诞节礼物动画案例解析
Dec 25 Javascript
js防刷新的倒计时代码 js倒计时代码
Sep 06 Javascript
three.js中3D视野的缩放实现代码
Nov 16 Javascript
javascript 通过键名获取键盘的keyCode方法
Dec 31 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
Sep 28 Javascript
webpack 2.x配置reactjs基本开发环境详解
Aug 08 #Javascript
vue-quill-editor实现图片上传功能
Aug 08 #Javascript
vue.js评论发布信息可插入QQ表情功能
Aug 08 #Javascript
vuejs使用FormData实现ajax上传图片文件
Aug 08 #Javascript
基于Vue实现支持按周切换的日历
Sep 24 #Javascript
JS中正则表达式要注意lastIndex属性
Aug 08 #Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
Aug 08 #Javascript
You might like
PHP的ASP防火墙
2006/10/09 PHP
php 求质素(素数) 的实现代码
2011/04/12 PHP
php表单敏感字符过滤类
2014/12/08 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
Prototype 学习 Prototype对象
2009/07/12 Javascript
js判断样式className同时增加class或删除class
2013/01/30 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
2014/01/10 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
2017/01/12 Javascript
vue.js 使用axios实现下载功能的示例
2018/03/05 Javascript
vue + vuex todolist的实现示例代码
2018/03/09 Javascript
使用 vue-i18n 切换中英文效果
2018/05/23 Javascript
javascript对HTML字符转义与反转义
2018/12/13 Javascript
Node.js操作系统OS模块用法分析
2019/01/04 Javascript
微信小程序 wx:for遍历循环使用实例解析
2019/09/09 Javascript
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
2019/11/07 jQuery
js实现上下左右键盘控制div移动
2020/01/16 Javascript
关于vue 结合原生js 解决echarts resize问题
2020/07/26 Javascript
javascript实现贪吃蛇游戏(娱乐版)
2020/08/17 Javascript
微信小程序 接入腾讯地图的两种写法
2021/01/12 Javascript
Python fileinput模块使用实例
2015/05/28 Python
python读取一个目录下所有txt里面的内容方法
2018/06/23 Python
python使用matplotlib库生成随机漫步图
2018/08/27 Python
Python生成rsa密钥对操作示例
2019/04/26 Python
利用pyecharts实现地图可视化的例子
2019/08/12 Python
Python 处理文件的几种方式
2019/08/23 Python
单位人事专员介绍信
2014/01/11 职场文书
大学生两会学习心得体会
2014/03/10 职场文书
四年级评语大全
2014/04/21 职场文书
单位授权委托书范文
2014/08/02 职场文书
2015年度电厂个人工作总结
2015/05/13 职场文书
泰坦尼克号观后感
2015/06/04 职场文书
离职信范文
2015/06/23 职场文书
Django显示可视化图表的实践
2021/05/10 Python
CentOS 7安装mysql5.7使用XtraBackUp备份工具命令详解
2022/04/12 MySQL
使用Django框架创建项目
2022/06/10 Python
Hive HQL支持2种查询语句风格
2022/06/25 数据库