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 相关文章推荐
使用jscript实现二进制读写脚本代码
Jun 09 Javascript
jQuery获取样式中颜色值的方法
Jan 29 Javascript
jquery实现的Banner广告收缩效果代码
Sep 02 Javascript
JavaScript实现网页加载进度条代码超简单
Sep 21 Javascript
Vue-Router实现页面正在加载特效方法示例
Feb 12 Javascript
jquery操作select取值赋值与设置选中实例
Feb 28 Javascript
BootStrap表单时间选择器详解
May 09 Javascript
详解JavaScript数组过滤相同元素的5种方法
May 23 Javascript
JavaScript中的return布尔值的用法和原理解析
Aug 14 Javascript
微信小程序拍照和摄像功能实现方法示例
Feb 01 Javascript
JavaScript基础之this和箭头函数详析
Sep 05 Javascript
微信小程序利用button控制条件标签的变量问题
Mar 15 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
DW中链接mysql数据库时,建立字符集中文出现乱码的解决方法
2010/03/27 PHP
PHP文件下载实例代码浅析
2016/08/17 PHP
php 使用fopen函数创建、打开文件详解及实例代码
2016/09/24 PHP
php实现的SSO单点登录系统接入功能示例分析
2016/10/12 PHP
解决laravel上传图片之后,目录有图片,但是访问不到(404)的问题
2019/10/14 PHP
tp5.1框架数据库子查询操作实例分析
2020/05/26 PHP
jQuery 添加/移除CSS类实现代码
2010/02/11 Javascript
js字符编码函数区别分析
2011/12/28 Javascript
JQGrid的用法解析(列编辑,添加行,删除行)
2013/11/08 Javascript
javascript移动设备Web开发中对touch事件的封装实例
2014/06/05 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
2016/08/16 Javascript
Vue 短信验证码组件开发详解
2017/02/14 Javascript
ES6学习笔记之map、set与数组、对象的对比
2018/03/01 Javascript
JS实现移动端触屏拖拽功能
2018/07/31 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
2018/08/04 Javascript
React事件处理的机制及原理
2018/12/03 Javascript
vue中使用[provide/inject]实现页面reload的方法
2019/09/30 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
2019/11/13 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
2020/04/14 Javascript
Vue3 响应式侦听与计算的实现
2020/11/11 Javascript
[48:45]Ti4 循环赛第二日 NEWBEE vs EG
2014/07/11 DOTA
python实现的生成随机迷宫算法核心代码分享(含游戏完整代码)
2014/07/11 Python
Python中easy_install 和 pip 的安装及使用
2017/06/05 Python
Python3中的列表,元组,字典,字符串相关知识小结
2017/11/10 Python
python db类用法说明
2020/07/07 Python
Numpy实现卷积神经网络(CNN)的示例
2020/10/09 Python
CSS3 绘制BMW logo实的现代码
2013/04/25 HTML / CSS
海淘零差价,宝贝全球购: 宝贝格子
2016/08/24 全球购物
社区七一党员活动方案
2014/01/25 职场文书
家长对小学生的评语
2014/01/28 职场文书
新学期开学标语
2014/06/30 职场文书
党的群众路线教育实践活动专题组织生活会发言材料
2014/10/17 职场文书
2014年医院科室工作总结
2014/12/20 职场文书
MySQL对数据表已有表进行分区表的实现
2021/11/01 MySQL
2007年老电脑安装win11会怎么样? 网友实测win11在老电脑运行良好
2021/11/21 数码科技
游戏《我的世界》澄清Xbox版暂无计划加入光追
2022/04/03 其他游戏