码迷,mamicode.com
首页 > 其他好文 > 详细

Vue2 封装的 Quill 富文本编辑器组件 Vue-Quill-Editor

时间:2018-02-03 19:00:21      阅读:1666      评论:0      收藏:0      [点我收藏+]

标签:样式   sage   use   bsp   csharp   compute   css   页面   options   

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

标签:样式   sage   use   bsp   csharp   compute   css   页面   options   

原文地址:https://www.cnblogs.com/haonanZhang/p/8410187.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!