1. Plugins must be downloaded and installed

CNPM I quill-image-drop-module-s // These two are the CNPM I quill-image-resize-module-s that change the size of the image

2. Introducing HTML content

<div id='quillEditorQiniu'> <quill-editor :style="'width: '100%'" v-model="content" ref="myQuillEditor" :options="editorOption" @change="onEditorChange($event)" > </quill-editor>  <Upload class="avatar-uploader" :accept="'image/*'" :action="'https://upload.qiniup.com'" name='file' :data="updateParams" :show-upload-list="false" :on-success="uploadSuccess" :on-error="uploadError" :before-upload="beforeUpload" > </Upload>

Note if you want to see the upload in detail can see me on an article: https://segmentfault.com/a/1190000021073631

3. First configure the toolbar display icon

const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],
  [{'color': []}, { 'size': fontSizeStyle.whitelist }],
  [{ list: 'ordered' }, { list: 'bullet' }],
  [{ indent: '-1' }, { indent: '+1' }],
  ['link', 'image']
]

4. The other ICONS here are all given by the system, only the “size” font selection drop-down box, which is configured by myself, because there are only three font sizes by default, we need to expand and register the font on Quill:

The import {quillEditor} from 'vue - quill - editor / / rich text editor quill editor style import' quill/dist/quill. Core. CSS 'import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' import * as Quill from 'quill' let fontSizeStyle = Quill.import('attributors/style/size') fontSizeStyle.whitelist = ['12px', '14px', '16px', '20px', '24px', '36px'] Quill.register(fontSizeStyle, true)

5. Use configuration items

Data () {return editorOption: {placeholder: 'please input ', theme: 'snow', modules: {toolbar: {container: toolbarOptions } } }, } }

6. We still need to modify the CSS file, we’d better build a global CSS overlay Quill’s CSS style

.ql-editor{ min-height:150px; }.ql-snow. ql-tooltip[data-mode=link]::before {content: "Please enter the link address :"; } .ql-snow .ql-tooltip.ql-editing a.ql-action::after { border-right: 0px; Content: 'Save '; padding-right: 0px; }.ql-snow. ql-tooltip[data-mode=video]::before {content: "Please enter video address :"; } .ql-snow .ql-picker.ql-size .ql-picker-label::before, .ql-snow .ql-picker.ql-size .ql-picker-item::before { content: '14px'; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before { content: '10px'; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before { content: '18px'; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before { content: '32px'; } .ql-snow .ql-picker.ql-header .ql-picker-label::before, .ql-snow. Ql-picker.ql-header.ql-picker-item ::before {content: 'text '; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before, .ql-snow. Ql-picker.ql-header.ql-picker-item [data-value="1"]::before {content: 'header 1'; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before, .ql-snow. Ql-picker.ql-header.ql-picker-item [data-value="2"]::before {content: 'header 2'; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before, .ql-snow. Ql-picker.ql-header.ql-picker-item [data-value="3"]::before {content: 'header 3'; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before, .ql-snow. Ql-picker.ql-header.ql-picker-item [data-value="4"]::before {content: 'header 4'; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before, .ql-snow. Ql-picker.ql-header.ql-picker-item [data-value="5"]::before {content: 'header 5'; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before, .ql-snow. Ql-picker.ql-header.ql-picker-item [data-value="6"]::before {content: 'header 6'; } .ql-snow .ql-picker.ql-font .ql-picker-label::before, .ql-snow .ql-picker.ql-font .ql-picker-item::before { content: 'Standard Font '; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before, .ql-snow. Ql-picker.ql-font-size. Ql-picker-item [data-value=serif]::before {content: 'Serif '; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before, .ql-snow. ql-picker.ql-font-size. Ql-picker-item [data-value= Monospace]::before {content: 'FontPage '; } .ql-toolbar.ql-snow + .ql-container.ql-snow { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .ql-toolbar.ql-snow { border-top-left-radius: 5px; border-top-right-radius: 5px; } .ql-snow .ql-stroke, .ql-snow .ql-picker { color: #999; stroke: #999; } .ql-snow .ql-fill, .ql-snow .ql-stroke.ql-fill { fill: #999; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='12px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='12px']::before { content: '12px'; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='14px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='14px']::before { content: '14px'; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='16px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='16px']::before { content: '16px'; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='20px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='20px']::before { content: '20px'; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='24px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='24px']::before { content: '24px'; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='36px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='36px']::before { content: '36px'; } .ql-container { font-size:14px; }
Here our rich text editor font configuration is good, down we configure insert picture upload seven niu, and adjust the size of the picture.

1. Import the required JS

import { quillEditor } from 'vue-quill-editor'
import * as Quill from 'quill'
import { ImageDrop } from 'quill-image-drop-module'
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageDrop', ImageDrop)
Quill.register('modules/imageResize', ImageResize)

2, configuration, build/webpack. Dev. Config/webpack. Pro. Config. Js, plugins: [] to add the following code

new webpack.ProvidePlugin({
  'window.Quill': 'quill/dist/quill.js',
  'Quill': 'quill/dist/quill.js'
})
This allows you to resize the image
Next we upload the image to the Qiniu server and insert the address into the rich text compiler.

1. We monitor that when the picture above the rich text editor is clicked, our uploading component will be clicked and the uploading window will be opened.

Mounted () {let imgHandler = (state) => {if (state) {let imgHandler = (state) => { Document.querySelector ('.avatar-uploader input').click()}} // When the image icon in the toolbar is click this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', imgHandler) },

2. Upload the component and upload the picture to Qiniu. After success, get the address of the picture and insert it into the rich text editor

< the Upload class = "avatar - uploader" : the accept = "' image / * '" : action =" "https://upload.qiniup.com", "/ / note that the name must be the file, written before the img, The name of the file must be multiple. name='file' :data="updateParams" :show-upload-list="false" :on-success="uploadSuccess" :on-error="uploadError" :before-upload="beforeUpload" >

3. Here :action is the address of the server and we need to pass two arguments to the beforeUpload() hook function (token: backend interface fetch, key: File name), then get the address of the uploaded image in the successUpload() hook function, and insert it directly into the rich text editor.

beforeUpload (request, File) {this.updateParams.Token = this.$store.state. Upload_Token this.updateParams.Key = request.name},
UploadSuccess (res, file) {// file return file information, can also be called here Qniu upload. Console. log(res, file, this.$store.getters. Upload_url + res.key, 'success') Quill let quill = this.$refs.myQuilleditor. Quill let length = Quill.getSelection ()? quill.getSelection().index : Console. log(this.$store.getters.upload_url + file.name) // Quill. InsertemBed (length, 'image', this.$store.getters.upload_url + file.name) quill.insertEmbed(length, 'image', This.$store.getters. Upload_url + res.key) // Adjust the cursor to the last quill.setSelection(length + 1)},
This completes the process of vue + Upload + Quill encapsulating the rich text editor component. Below is the full code of the component I encapsulated. The token is stored in $store.
<template> <div id='quillEditorQiniu'> <quill-editor :style="{width: width ? width: '100%'}" v-model="content" ref="myQuillEditor" :options="editorOption" @change="onEditorChange($event)" > </quill-editor> <Upload class="avatar-uploader" :accept="'image/*'" :action="'https://upload.qiniup.com'" name='file' :data="updateParams" :show-upload-list="false" :on-success="uploadSuccess" :on-error="uploadError" :before-upload="beforeUpload" > </Upload> </div> </template> <script> import { quillEditor } from 'vue-quill-editor' import * as Quill from 'quill' import { ImageDrop } from 'quill-image-drop-module' import ImageResize from 'quill-image-resize-module' let fontSizeStyle = Quill.import('attributors/style/size') fontSizeStyle.whitelist = ['12px', '14px', '16px', '20px', '24px', '36px'] Quill.register(fontSizeStyle, true) Quill.register('modules/imageDrop', ImageDrop) Quill.register('modules/imageResize', ImageResize) const toolbarOptions = [ ['bold', 'italic', 'underline', 'strike'], [{'color': []}, { 'size': fontSizeStyle.whitelist }], [{ list: 'ordered' }, { list: 'bullet' }], [{ indent: '-1' }, { indent: '+1'}], ['link', 'image']] // Export default {name: 'quill-editor-qiniu', Components: { quillEditor, ImageResize }, props: ['initValue', 'width'], $store. Dispatch ('uploadToken')}, String () {String (); Mounted () {let imgHandler = (state) => {if (state) {let imgHandler = (state) => { Document.querySelector ('.avatar-uploader input').click()}} // When the image icon in the toolbar is click this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', imgHandler) }, data () { return { content: '', editorOption: {placeholder: 'please type ', theme: 'snow', modules: {toolbar: {container: toolbarOptions}, imageRop: true, imageResize: { displayStyles: { backgroundColor: 'black', border: 'none', color: 'white' }, modules: [ 'Resize', 'DisplaySize', 'Toolbar' ] } } }, updateParams: {} } }, watch: { initValue: function (newVal, oldVal) { this.content = newVal } }, methods: { onEditorChange (event) { console.log(event, 'change') this.$emit('getEditorInfo', event) }, beforeUpload (request, File) {this.updateParams.Token = this.$store.state. Upload_Token this.updateParams.Key = request.name}, Uploadsuccess (res, file) {// File returned file information, can also be called here seven niu upload. Console. log(res, file, this.$store.getters. Upload_url + res.key, 'success') Quill let quill = this.$refs.myQuilleditor. Quill let length = Quill.getSelection ()? quill.getSelection().index : Console. log(this.$store.getters.upload_url + file.name) // Quill. InsertemBed (length, 'image', this.$store.getters.upload_url + file.name) quill.insertEmbed(length, 'image', This.$store.getters. Upload_url + res.key) // Adjust the cursor to the last quill. SetSelection (length + 1)}, // UploadError (res, file) { console.log(res, file, 'error') } } } </script> <style scoped> </style>