Vue2 封裝的 Quill 富文本編輯器組件 Vue-Quill-Editor
阿新 • • 發佈:2018-02-03
mit clas content his pre 文本編輯器 ole com pos
1、安裝
npm install vue-quill-editor --save
2、使用
import { quillEditor } from ‘vue-quill-editor‘
3、組件中
<quill-editor v-model="content" ref="myQuillEditor" class="editer" :options="editorOption" @ready="onEditorReady($event)"> </quill-editor>
data(){ return { content: ‘<h3>文本編輯</h3>‘, editorOption: { } } }, components: { NavHeader, quillEditor, }, computed: { editor() { return this.$refs.myQuillEditor.quill } }, methods: { onEditorReady(editor) { console.log(‘editor ready!‘, editor) }, submit(){ console.log(this.content); this.$message.success(‘提交成功!‘); } }
這樣就已經完成了,但是有的時候在頁面中 這樣之後,樣式會全部亂掉解決辦法
main.js 中
import ‘quill/dist/quill.core.css‘ import ‘quill/dist/quill.snow.css‘ import ‘quill/dist/quill.bubble.css‘ import VueQuillEditor from ‘vue-quill-editor‘ Vue.use(VueQuillEditor);
Vue2 封裝的 Quill 富文本編輯器組件 Vue-Quill-Editor