vue 富文本编辑器的选择与配置

版权声明：Yangliwei 版权所有 https://blog.csdn.net/qq_32674347/article/details/84900044

1，选择使用了vue-quill-editor

1. npm install vue-quill-editor -D

全局使用：

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'

// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor, /* { default global options } */)

组件使用：

// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'

export default {
  components: {
    quillEditor
  }
}

自定义功能配置：

<script>
    import { quillEditor } from 'vue-quill-editor'
    export default{
        data(){
            return {
                content:null,
                editorOption:{
                    modules:{
                        toolbar:[
            [
              { size: ["small", false, "large", "huge"] },
              { color: [] },
              { align: [] },
              "bold",
              "italic",
              "underline",
              "strike",
              "link",
              "blockquote",
              "code-block",
              "image",
              "video"
            ]
          ]
                    }
                }
            }
        },
        methods:{
            onEditorBlur(){//失去焦点事件
            },
            onEditorFocus(){//获得焦点事件
            },
            onEditorChange(){//内容改变事件
            }
        }
    }
</script>   

2，需要在显示的div 包裹上class ：ql-editor

<div class="content">
      <!-- {{articledetail.content}} -->
      <div class="ql-editor" v-html="articledetail.content"></div>
    </div>