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 相关文章推荐
学习YUI.Ext 第二天
Mar 10 Javascript
JQuery AJAX实现目录浏览与编辑的代码
Oct 21 Javascript
JQuery 实现的页面滚动时浮动窗口控件
Jul 10 Javascript
ajax 缓存 问题 requestheader
Aug 01 Javascript
今天是星期几的4种JS代码写法
Sep 17 Javascript
js中的布尔运算符使用介绍
Nov 20 Javascript
jquery.cookie用法详细解析
Dec 18 Javascript
javascript中几个容易混淆的概念总结
Apr 14 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
Jun 05 Javascript
第一次接触Bootstrap框架
Oct 24 Javascript
Vue filters过滤器的使用方法
Jul 14 Javascript
JavaScript实现矩形块大小任意缩放
Aug 25 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+javascript实现二级级联菜单的制作
2008/05/06 PHP
php面向对象全攻略 (十二) 抽象方法和抽象类
2009/09/30 PHP
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
实例讲解PHP设计模式编程中的简单工厂模式
2016/02/29 PHP
PHP中SESSION过期设置
2021/03/09 PHP
jquery 插件 人性化的消息显示
2008/01/21 Javascript
Javascript 写的简单进度条控件
2008/01/22 Javascript
JavaScript中两个感叹号的作用说明
2011/12/28 Javascript
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
2012/12/17 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
2013/04/24 Javascript
解析javascript系统错误:-1072896658的解决办法
2013/07/08 Javascript
JS 实现点击a标签的时候让其背景更换
2013/10/15 Javascript
js改变文章字体大小的实例代码
2013/11/27 Javascript
js修改原型的属性使用介绍
2014/01/26 Javascript
jquery+html5烂漫爱心表白动画代码分享
2015/08/24 Javascript
Easyui form combobox省市区三级联动
2016/01/13 Javascript
基于jquery实现轮播焦点图插件
2016/03/31 Javascript
jquery层级选择器的实现(匹配后代元素div)
2016/09/05 Javascript
JavaScript Base64 作为文件上传的实例代码解析
2017/02/14 Javascript
vue2.0 axios跨域并渲染的问题解决方法
2018/03/08 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
JS实现可以用键盘方向键控制的动画
2020/12/11 Javascript
python模拟登录并且保持cookie的方法详解
2017/04/04 Python
Python基于win32ui模块创建弹出式菜单示例
2018/05/09 Python
浅谈django2.0 ForeignKey参数的变化
2019/08/06 Python
pyhton中__pycache__文件夹的产生与作用详解
2019/11/24 Python
Python中使用Selenium环境安装的方法步骤
2021/02/22 Python
详解CSS3中nth-child与nth-of-type的区别
2017/01/05 HTML / CSS
HTML5在canvas中绘制复杂形状附效果截图
2014/06/23 HTML / CSS
跑步爱好者一站式服务网站:Jack Rabbit
2016/09/01 全球购物
西班牙自行车和跑步商店:Alltricks
2018/07/07 全球购物
依法行政工作汇报
2014/10/28 职场文书
工程部主管岗位职责
2015/02/12 职场文书
项目投资意向书范本
2015/05/09 职场文书
浅谈Python中的正则表达式
2021/06/28 Python
nginx配置限速限流基于内置模块
2022/05/02 Servers