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 相关文章推荐
IE Firefox 使用自定义标签的区别
Oct 15 Javascript
jquery 学习笔记一
Apr 07 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
Jan 16 Javascript
chrome调试javascript详解
Oct 21 Javascript
超漂亮的jQuery图片轮播特效
Nov 24 Javascript
微信小程序使用第三方库Immutable.js实例详解
Sep 27 Javascript
js实现自定义进度条效果
Mar 15 Javascript
webpack-url-loader 解决项目中图片打包路径问题
Feb 15 Javascript
微信小程序npm引入vant-weapp的踩坑记录
Aug 01 Javascript
vue中@change兼容问题详解
Oct 25 Javascript
Javascript中的this,bind和that使用实例
Dec 05 Javascript
微信小程序全选多选效果实现代码解析
Jan 21 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中加session验证)
2012/08/22 PHP
PHP判断数据库中的记录是否存在的方法
2014/11/14 PHP
详解WordPress开发中get_header()获取头部函数的用法
2016/01/08 PHP
详解阿里云视频直播PHP-SDK接入教程
2020/07/09 PHP
一些易混淆且不常用的属性,希望有用
2007/01/29 Javascript
javascript+mapbar实现地图定位
2010/04/09 Javascript
某页码显示的helper 少量调整,另附js版
2010/09/12 Javascript
用jQuery获取IE9下拉框默认值问题探讨
2013/07/22 Javascript
JavaScript中伪协议 javascript:使用探讨
2014/07/18 Javascript
JavaScript中判断整字类型最简洁的实现方法
2014/11/08 Javascript
Javascript中的arguments与重载介绍
2015/03/15 Javascript
JavaScript改变CSS样式的方法汇总
2015/05/07 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
2016/10/10 Javascript
浅析script标签中的defer与async属性
2016/11/30 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
2017/03/08 Javascript
详解Vue如何支持JSX语法
2017/11/10 Javascript
jquery实现聊天机器人
2020/02/08 jQuery
Python pip安装模块提示错误解决方案
2020/05/22 Python
给keras层命名,并提取中间层输出值,保存到文档的实例
2020/05/23 Python
购买限量版收藏品、珠宝和礼品:Bradford Exchange
2016/09/23 全球购物
日本热销NO.1胶原蛋白冻:Aishitoto爱希特多
2019/06/20 全球购物
工程现场管理求职自荐信
2013/10/02 职场文书
小学毕业寄语大全
2014/04/03 职场文书
节约用水的口号
2014/06/20 职场文书
卖车协议书范本4篇
2014/10/01 职场文书
2014年维稳工作总结
2014/11/18 职场文书
交通事故协议书范本
2014/11/18 职场文书
2014年行政工作总结
2014/11/19 职场文书
解除劳动合同通知书范本
2015/04/16 职场文书
交通处罚决定书
2015/06/24 职场文书
篮球赛闭幕式主持词
2015/07/03 职场文书
2015暑期社会实践通讯稿
2015/07/18 职场文书
2016年中秋节慰问信
2015/12/01 职场文书
创业计划书之面包店
2019/09/12 职场文书
本地通过nginx配置反向代理的全过程记录
2021/03/31 Servers
vscode中使用npm安装babel的方法
2021/08/02 Javascript