How to Use quill-editor with style editor in the Vue project, vuequill-editor

How to Use quill-editor with style editor in the Vue project, vuequill-editor

By default, vue-quill-editor inserts an image directly into base64 and then into the content. If the image is large, the rich text content will be large.

Insert a video directly in the dialog box and enter the URL address. In some cases, you need to select your own video locally. You can change the URL in vue-quill-editor.

This method uses element-ui and File Upload

1. Install vue-quill-editor on npm

2. introduce it in main. js

import VueQuillEditor from 'vue-quill-editor'Vue.use(VueQuillEditor)

 

HTML: bind an API event to the editor and define a hidden input box for clicking an image or video icon to upload a file.

<Template> <div> <! -- The quill-editor plug-in tag binds events respectively --> <quill-editor v-model = "content" ref = "myQuillEditor ": options = "editorOption" @ blur = "onEditorBlur ($ event)" @ focus = "onEditorFocus ($ event)" @ change = "onEditorChange ($ event) "> </quill-editor> <div class =" limit "> currently, <span >{{ nowLength }}</span> characters have been entered, you can also enter <span >{{ SurplusLength }}</span> characters. </Div> <! -- Hide the File upload 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 =" inserting, please wait "> Click upload </el-button> </el-upload> </el-table> </div> </template>

CSS section:

.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 section:

Import Vue from 'util/vueExt 'import {Component} from 'vue-property-decorator' import * as Template from '. /editor. vue 'import * as Quill from 'quill' // introduce the editor const STATICDOMAIN = '// ss.yidejia.com/'const STATVIDEO =' // flv.yidejia.com/'@Component ({mixins: [Template]}) export default class Editor extends Vue {content = ''// editorOption = {}// Editor option addRange: any = new Array () uploadData = {} PhotoUrl = ''// upload image address uploadType ='' // type of the uploaded file (image or video) fullscreenLoading = false $ refs: {myQuillEditor: any, imgInput: any} get nowLength () {return this. content. length} get SurplusLength () {// obtain the length of the current input character let num = 10000-Number (this. content. length) if (num> 0) {return num} else {return 0 }}// upload qnLocation () {if (location. protocol = 'HTTP: ') {return 'HTTP: // Up-z0.qiniu.com '} return 'https: // up-z0.qbox.me'} // obtain the data token data 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') {// if you click Insert image, return this. api. getQNToken (). then (res => {this. uploadData = {key: 'image/$ {suffix. join ('. ')} _ $ {new Date (). getTime ()}. $ {Ext} ', token: res})} else if (this. uploadType = 'video') {// if you click Insert video, return this. api. getVideoQNToken (). then (res => {this. uploadData = {key: 'video/$ {suffix. join ('. ')} _ $ {new Date (). getTime ()}. $ {ext} ', token: res})} // The beforeUpload (file) {return this. qnUpload (file)} // callback for successful Image Upload inserted into the editor upScuccess (e, file, fileList) {this. fullscreenLoading = false let vm = this l Et url = ''if (this. uploadType = 'image') {// obtain the uploaded file URL = STATICDOMAIN + e. key} else if (this. uploadType = 'video') {url = STATVIDEO + e. key} if (url! = Null & url. length> 0) {// Insert the URL after the file is uploaded to the editor text. 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) // call the insertEmbed method of the editor and insert URL} else {(<any> this ). $ message. error ('$ {vm. uploadType} insertion failed ')} this. $ refs ['upload']. clearFiles () // clear the input content after successful insertion} // click the image ICON to trigger the event imgHandler (state) {this. addRange = this. $ refs. myQuillEditor. quill. getSelection () if (state) {let fileInput = document. getElementById ('imginput') fileInput. click () // Add a trigger event} this. uploadType = 'image'} // click the video ICON to trigger the event videoHandler (state) {this. addRange = this. $ refs. myQuillEditor. quill. getSelection () if (state) {let fileInput = document. getElementById ('imginput') fileInput. click () // Add a trigger event} this. uploadType = 'video'} // The editor cursor leaves and sends the editor content to the parent component onEditorBlur (editor) {this. $ emit ('getvalue', this. content)} // The editor obtains the cursor onEditorFocus (editor) {editor. enable (true) // you can delete characters that have reached the upper limit} // The editor text has changed. onEditorChange ({editor, html, text}) {let textLength = text. length if (textLength> 10000) {(<any> this ). $ message. error ('enter 10000 characters' at most) editor. enable (false)} this. $ emit ('getvalue', this. content)} // clear the editor content callMethod () {this. content = ''} // after loading the page, bind the image icon and video icon of the editor to the Click Event mounted () {// bind the event getModule to the image ICON as the internal attribute of the editor. this. $ refs. myQuillEditor. quill. getModule ('toolbar '). addHandler ('image', this. imgHandler) this. $ refs. myQuillEditor. quill. getModule ('toolbar '). addHandler ('video', this. videoHandler) // bind an event to the video ICON }}

Reference Links:

Vue-quill-editor for Image Upload

Vue-quill-editor API documentation address

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.