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

程序员文章站 2022-05-26 08:17:52

vue-quill-editor默认插入图片是直接将图片转为base64再放入内容中，如果图片比较大的话，富文本的内容就会很大。插入视频是直接弹框输入url地址，某些需...

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绑定事件
 }
}