vue-quill-editor Rich Text Editor Experience

There are many rich text editors on the market. I personally still recommend Vue’s own vue-quill-deitor. Although it only supports IE10 +, I will provide you with the experience of using this text editor.

So let’s go straight to the point and use quill in vue. We need npm to install it. The installation command is as follows:

npm install vue-quill-editor

Reinstall dependencies

npm install quill

use:

Introduced in main.js

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
import 'quill / dist / quill.core.css'
import 'quill / dist / quill.snow.css'
import 'quill / dist / quill.bubble.css'
  
Vue.use (VueQuillEditor)

The following css must be referenced, otherwise the editor will not have css.

The code in the vue page is as follows:

<template>
  <div class = "edit_container">
        <quill-editor 
            v-model = "content" 
            ref = "myQuillEditor" 
            : options = "editorOption" 
            @ blur = "onEditorBlur ($ event)" @ focus = "onEditorFocus ($ event)"
            @ change = "onEditorChange ($ event)">
        </ quill-editor>
        <button v-on: click = "saveHtml"> Save </ button>
    </ div>  
</ template>

<script>
export default {
  name: 'App',
  data () {
     return {
            content: `<p> hello world </ p>`,
            editorOption: {}
        }
  }, computed: {
        editor () {
            return this. $ refs.myQuillEditor.quill;
        },
    }, methods: {
        onEditorReady (editor) {// Prepare the editor
        },
        onEditorBlur () {}, // lost focus event
        onEditorFocus () {}, // get focus event
        onEditorChange () {}, // content change event
        saveHtml: function (event) {
          alert (this.content);
        }
    }
}
</ script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: # 2c3e50;
  margin-top: 60px;
}
</ style>

The v-model is our own html code, you can put this html directly into the database, so there is no problem. If you want to disable the editor, you can pass the following code:

onEditorFocus (val, editor) {// event when rich text gets focus
      console.log (val); // content when rich text gets focus
      editor.enable (false); // Disable when getting focus
    }

Theme settings

In the vue project, Quill’s files are specifically introduced, whichever theme is used is written. The default is snow theme.

data () {
     return {
            content: `<p> hello world </ p>`,
            editorOption: {
              theme: 'snow'
            }
        }
  }

Toolbar settings

modules: {
            toolbar: [
              ['bold', 'italic', 'underline', 'strike'],   
               // Bold, italic, underline, strikethrough
              ['blockquote', 'code-block'],     
              // Reference, code block
  
  
              [{'header': 1}, {'header': 2}],       
               // Title, the form of key-value pairs; 1, 2 represents the font size
              [{'list': 'ordered'}, {'list': 'bullet'}],    
               // list
              [{'script': 'sub'}, {'script': 'super'}],   
              // superscript and subscript
              [{'indent': '-1'}, {'indent': '+1'}],    
               // indent
              [{'direction': 'rtl'}],             
              // text direction
  
  
              [{'size': ['small', false, 'large', 'huge']}],
               // font size
              [{'header': [1, 2, 3, 4, 5, 6, false]}],    
               // Several levels of title
  
  
              [{'color': []}, {'background': []}],     
              // font color, font background color
              [{'font': []}],     
              // font
              [{'align': []}],   
               // alignment
  
  
              ['clean'],   
               // Clear font style
              ['image', 'video']   
               // Upload pictures, upload videos
  
            ]
          },
          theme: 'snow'
        }
     }

Picture push upload

You need to install the quill-image-drop-module module, then change the imageDrop setting to true, and you can take pictures on your computer online.

import {quillEditor} from 'vue-quill-editor'
import * as Quill from 'quill'
import {ImageDrop} from 'quill-image-drop-module';
Quill.register ('modules / imageDrop', ImageDrop);
export default {
  name: 'App',
  data () { 
     return {
        editorOption: {
          modules: {
            imageDrop: true, 
          },
          theme: 'snow'
        }
      }
  }

Then you do n’t need to think about uploading the file. You may want to put the picture first. In fact, the file is already a base64. When you read it at the front desk, you can directly decode it ~

ImageResize

return {
        editorOption: {
          modules: {
　　　　　　　　imageResize: ()
          },
          theme: 'snow'
        }
      }

#vue-js #vue-editor #vue