Use of rich text editor components

Installation method one

1. Runvue uiCommand to enter the visual panel of the vue project
2. Click the dependency button - install dependencies - run dependencies - enter == vue-quill-editor== to select and install

Installation method two

Create a new terminal in Vscode, enter == npm install vue-quill-editor --save == and press Enter to complete the installation.

Use the rich text editor component

1. Import the rich text editor in the main.js file

import VueQuillEditor from 'vue-quill-editor' // 导入富文本编辑

2. Import the styles corresponding to the rich text editor

import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme

3. Register the rich text editor as a global component

Vue.use(VueQuillEditor)

4. Use rich text editor in xxx.vue component

// v-model实现数据的双向绑定
<quill-editor v-model="XXX"></quill-editor>

Final effect presentation

Please refer to the official documentation: https://github.com/surmon-china/vue-quill-editor#vue-quill-editor