|
|
@@ -0,0 +1,288 @@
|
|
|
+<template>
|
|
|
+ <!-- 富文本编辑器 -->
|
|
|
+ <div>
|
|
|
+ <!-- 图片视频上传组件辅助-->
|
|
|
+ <div v-show="false">
|
|
|
+ <input
|
|
|
+ name="img"
|
|
|
+ :class="`avatar-uploader${id}`"
|
|
|
+ type="file"
|
|
|
+ multiple
|
|
|
+ accept="image/png, image/jpeg, image/gif, image/jpg"
|
|
|
+ @change="imgUpload"
|
|
|
+ >
|
|
|
+ <input
|
|
|
+ name="video"
|
|
|
+ :class="`video-uploader${id}`"
|
|
|
+ type="file"
|
|
|
+ multiple
|
|
|
+ accept="video/mp4"
|
|
|
+ @change="videoUpload"
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <el-row v-loading="quillUpdate" style="height: 100%">
|
|
|
+ <quill-editor
|
|
|
+ :ref="`myQuillEditor${id}`"
|
|
|
+ v-model="editor"
|
|
|
+ class="quill"
|
|
|
+ :options="editorOption"
|
|
|
+ @change="onEditorChange($event)"
|
|
|
+ />
|
|
|
+ <div style="width: 100%;display: flex;justify-content: end;align-items: center;">
|
|
|
+ <span>{{tiLength}}</span>/<span>{{lengthLimit}}</span>
|
|
|
+ </div>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {quillEditor} from 'vue-quill-editor' // 富文本组件
|
|
|
+import { addQuillTitle } from '@/libs/quill-title' // 富文本配置
|
|
|
+// import { newFileUpload } from '@/api/hegii/common' // 上传文件接口
|
|
|
+import UploadService from '@/api/upload' // 上传图片接口和删除图片接口
|
|
|
+import uuidv4 from 'uuid/v4' // webpack自带唯一id生成器
|
|
|
+
|
|
|
+import imageResize from 'quill-image-resize-module'
|
|
|
+Quill.register('modules/imageResize', imageResize )
|
|
|
+import { ImageDrop } from 'quill-image-drop-module'
|
|
|
+Quill.register('modules/imageDrop', ImageDrop)
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'QuillEditor',
|
|
|
+ components: {
|
|
|
+ quillEditor
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ index: {
|
|
|
+ type: [String, Number],
|
|
|
+ default: ''
|
|
|
+ }, // 当前下标
|
|
|
+ value: {
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
+ }, // 富文本的值
|
|
|
+ lengthLimit:{
|
|
|
+ type:Number,
|
|
|
+ default:1000
|
|
|
+ },
|
|
|
+ prefix: {
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tiLength:0,
|
|
|
+ editor: '', // 富文本的值
|
|
|
+ quillUpdate: false, // 富文本加载状态
|
|
|
+ editorOption: {
|
|
|
+ placeholder: '请输入内容',
|
|
|
+ theme: 'snow', // or 'bubble'
|
|
|
+ modules: {
|
|
|
+ toolbar: {
|
|
|
+ container: [
|
|
|
+ ['bold', 'italic', 'underline', 'strike'], // toggled buttons
|
|
|
+ ['blockquote', 'code-block'],
|
|
|
+
|
|
|
+ [{ 'header': 1 }, { 'header': 2 }], // custom button values
|
|
|
+ [{ 'list': 'ordered' }, { 'list': 'bullet' }],
|
|
|
+ [{ 'script': 'sub' }, { 'script': 'super' }], // superscript/subscript
|
|
|
+ [{ 'indent': '-1' }, { 'indent': '+1' }], // outdent/indent
|
|
|
+ [{ 'direction': 'rtl' }], // text direction
|
|
|
+
|
|
|
+ [{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
|
|
|
+ [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
|
|
|
+
|
|
|
+ [{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
|
|
|
+ [{ 'font': [] }],
|
|
|
+ [{ 'align': [] }],
|
|
|
+ ['link', 'image', 'video'],
|
|
|
+ ['clean'] // remove formatting button
|
|
|
+ ] // 工具栏
|
|
|
+ },
|
|
|
+ imageResize: {
|
|
|
+ displayStyles: {
|
|
|
+ backgroundColor: 'black',
|
|
|
+ border: 'none',
|
|
|
+ color: 'white'
|
|
|
+ },
|
|
|
+ modules: ['Resize', 'DisplaySize', 'Toolbar']
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, // 富文本配置
|
|
|
+ id: uuidv4() // 唯一id,解决多个富文本在同一页面出现数据同步的问题
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ value(val) { // 更新富文本的值
|
|
|
+ this.editor = val
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // 更新富文本的值
|
|
|
+ this.editor = this.value
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ addQuillTitle()
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.handleImgAndVideo()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 自定义视频上传和图片上传事件
|
|
|
+ handleImgAndVideo() {
|
|
|
+ const that = this
|
|
|
+ this.$refs[`myQuillEditor${this.id}`].quill.getModule('toolbar').addHandler('video', function(value) {
|
|
|
+ if (value) {
|
|
|
+ document.querySelector(`.video-uploader${that.id} input`).click()
|
|
|
+ } else {
|
|
|
+ that.quill.format('video', false)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.$refs[`myQuillEditor${this.id}`].quill.getModule('toolbar').addHandler('image', function(value) {
|
|
|
+ if (value) {
|
|
|
+ document.querySelector(`.avatar-uploader${that.id}`).click()
|
|
|
+ } else {
|
|
|
+ that.quill.format('image', false)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 视频上传
|
|
|
+ async videoUpload(e) {
|
|
|
+ const files = [...e.target.files]
|
|
|
+ if (files.length > 0) this.quillUpdate = true
|
|
|
+ try {
|
|
|
+ for (let i = 0; i < files.length; i++) {
|
|
|
+ let { type } = files[i]
|
|
|
+ if (type !== 'video/mp4') {
|
|
|
+ this.$message.warning('请选择mp4格式的视频文件。')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const blob = new Blob([files[i]])
|
|
|
+ const name = files[i].name
|
|
|
+ var param = new FormData()
|
|
|
+ param.append(
|
|
|
+ 'file',
|
|
|
+ blob,
|
|
|
+ name
|
|
|
+ )
|
|
|
+ type = files[i].type.split('/')[0]
|
|
|
+
|
|
|
+ await UploadService.upload(param, this.prefix).then(video=>{
|
|
|
+ if (video) {
|
|
|
+ const quill = this.$refs[`myQuillEditor${this.id}`].quill
|
|
|
+ const length = quill.selection.savedRange.index
|
|
|
+ quill.insertEmbed(length, type, video.data.absolutelyPath)
|
|
|
+ quill.setSelection(length + 1)
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ // const video = await newFileUpload(param)
|
|
|
+ // if (video) {
|
|
|
+ // const quill = this.$refs[`myQuillEditor${this.id}`].quill
|
|
|
+ // const length = quill.selection.savedRange.index
|
|
|
+ // quill.insertEmbed(length, type, video.data.oss)
|
|
|
+ // quill.setSelection(length + 1)
|
|
|
+ // }
|
|
|
+ // loading动画消失
|
|
|
+ if (i === files.length - 1) {
|
|
|
+ this.quillUpdate = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } catch {
|
|
|
+ this.quillUpdate = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 富文本值更新触发
|
|
|
+ onEditorChange(e) {
|
|
|
+ if (this.flag) {
|
|
|
+ this.flag = false
|
|
|
+ setTimeout(()=>{
|
|
|
+ this.$refs.myQuillEditor.quill.setSelection(e.html.length + 1)
|
|
|
+ this.tiLength = this.tiLength=e.quill.getLength()-1
|
|
|
+ },20)
|
|
|
+ }
|
|
|
+ this.$emit('editor-content', {value: e.html}) // 触发事件,将富文本框中的值传递出去
|
|
|
+ this.contentValue = e.html
|
|
|
+ e.quill.deleteText(this.lengthLimit,4);
|
|
|
+ if(this.contentValue==''){
|
|
|
+ this.tiLength=0
|
|
|
+ }else{
|
|
|
+ this.tiLength=e.quill.getLength()-1
|
|
|
+ }
|
|
|
+ // 正则替换html的所有img标签
|
|
|
+ // const regex = new RegExp('<img', 'gi')
|
|
|
+ // let html = e.html
|
|
|
+ // html = html.replace(regex, `<img style="max-width: 100%"`)
|
|
|
+ this.$emit('value-change', {
|
|
|
+ index: this.index,
|
|
|
+ value: e.html
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ // 图片上传
|
|
|
+ async imgUpload(e) {
|
|
|
+ const files = [...e.target.files]
|
|
|
+ if (files.length > 0) this.quillUpdate = true
|
|
|
+ try {
|
|
|
+ for (let i = 0; i < files.length; i++) {
|
|
|
+ const { type } = files[i]
|
|
|
+ const imgType = type.split('/')[0]
|
|
|
+ if (imgType !== 'image') {
|
|
|
+ this.$message.warning('请上传图片文件。')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const blob = new Blob([files[i]])
|
|
|
+ const name = files[i].name
|
|
|
+ var param = new FormData()
|
|
|
+ param.append(
|
|
|
+ 'file',
|
|
|
+ blob,
|
|
|
+ name
|
|
|
+ )
|
|
|
+
|
|
|
+
|
|
|
+ await UploadService.upload(param, this.prefix).then(image=>{
|
|
|
+ if (image) {
|
|
|
+ const quill = this.$refs[`myQuillEditor${this.id}`].quill
|
|
|
+ const length = quill.selection.savedRange.index
|
|
|
+ quill.insertEmbed(length, imgType, 'https://s.dev01.dkiboss.com:6010/file' + image.data.path)
|
|
|
+ quill.setSelection(length + 1)
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ // const image = await newFileUpload(param)
|
|
|
+ // if (image) {
|
|
|
+ // const quill = this.$refs[`myQuillEditor${this.id}`].quill
|
|
|
+ // const length = quill.selection.savedRange.index
|
|
|
+ // quill.insertEmbed(length, imgType, image.data.oss)
|
|
|
+ // quill.setSelection(length + 1)
|
|
|
+ // }
|
|
|
+ // loading动画消失
|
|
|
+ if (i === files.length - 1) {
|
|
|
+ this.quillUpdate = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } catch {
|
|
|
+ this.quillUpdate = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 是否禁用富文本
|
|
|
+ onEnableQuill(flag) {
|
|
|
+ this.$refs[`myQuillEditor${this.id}`].quill.enable(flag)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+// .quill {
|
|
|
+// height: 300px;
|
|
|
+// }
|
|
|
+
|
|
|
+/deep/.ql-editor{
|
|
|
+ height: 550px !important;
|
|
|
+}
|
|
|
+</style>
|