基於 Quill、適用於 Vue 的富文字編輯器,支援服務端渲染和單頁應用
阿新 • • 發佈:2020-08-10
先看效果:
像這樣的富文字編輯器,在我們做後臺管理專案的時候經常遇到,本文章展示一種可以實現此效果的方法;
首先在GitHub上搜索vue-quil-editor 去GitHub;
1.install 安裝外掛
npm install vue-quill-editor --save
# or
yarn add vue-quill-editor
也可以使用CND 方式引入
<link rel="stylesheet" href="path/to/quill.core.css"/> <link rel="stylesheet" href="path/to/quill.snow.css"/> <link rel="stylesheet" href="path/to/quill.bubble.css"/> <script type="text/javascript" src="path/to/quill.js"></script> <script type="text/javascript" src="path/to/vue.min.js"></script> <script type="text/javascript" src="path/to/dist/vue-quill-editor.js"></script> <script type="text/javascript"> Vue.use(window.VueQuillEditor) </script>
2.Mount with global 在Main.js中全域性引入
import Vue from 'vue' import VueQuillEditor from 'vue-quill-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 Vue.use(VueQuillEditor, /* { default global options } */)
3.Component 在元件中使用
<template> <!-- Two-way Data-Binding --> <quill-editor ref="myQuillEditor" v-model="content" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @ready="onEditorReady($event)" /> <!-- Or manually control the data synchronization --> <quill-editor :content="content" :options="editorOption" @change="onEditorChange($event)" /> </template> <script> // You can also register Quill modules in the component import Quill from 'quill' import someModule from '../yourModulePath/someQuillModule.js' Quill.register('modules/someModule', someModule) export default { data () { return { content: '<h2>I am Example</h2>', editorOption: { // Some Quill options... } } }, methods: { onEditorBlur(quill) { console.log('editor blur!', quill) }, onEditorFocus(quill) { console.log('editor focus!', quill) }, onEditorReady(quill) { console.log('editor ready!', quill) }, onEditorChange({ quill, html, text }) { console.log('editor change!', quill, html, text) this.content = html } }, computed: { editor() { return this.$refs.myQuillEditor.quill } }, mounted() { console.log('this is current quill instance object', this.editor) } } </script>
我們拿到富文字編輯器裡的值 就可以去操作啦~~~
一般我們使用的是 @change="onEditorChange($event)" 方法 其他的可以自行打印出來看看
~~滴滴~~