Vue 프로젝트 의 quill-editor 스타일 편집기 사용 방법

vue-quill-editor 는 기본적으로 그림 을 base 64 로 바 꾸 어 내용 에 넣 는 것 입 니 다.그림 이 크 면 부 텍스트 의 내용 이 큽 니 다.
비디오 삽입 은 직접 탄 상자 에 URL 주 소 를 입력 하 는 것 입 니 다.어떤 수요 에서 우 리 는 사용자 로 하여 금 로 컬 에서 자신의 비디오 를 선택 하 게 해 야 합 니 다.우 리 는 vue-quill-editor 내부 의 일부 방법 을 통 해 변경 할 수 있 습 니 다.
이 방법 은 element-ui 와 파일 을 사용 하여 일곱 소 를 업로드 합 니 다.

npm 설치 vue-quill-editor
2.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 이미지 업로드 기능 구현
vue-quill-editor API 문서 주소
본 고 는 이미《Vue.js 전단 구성 요소 학습 튜 토리 얼》로 정리 되 었 으 니,여러분 의 학습 과 독 서 를 환영 합 니 다.
vue.js 구성 요소 에 대한 튜 토리 얼 은 주제vue.js 구성 요소 학습 강좌를 클릭 하여 학습 하 십시오.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.