vue组件——富文本编辑器

什么是富文本编辑器

富文本编辑器支持markdown语法，是程序员做笔记，功能很多，样式很多的一种很方便的文本编辑器，很推荐学会使用markdown语法
今天在vue的学习中，用到了富文本编辑器的插件，
插件源码地址

怎么在vue组件页面中插入富文本编辑器

1. 使用vue ui，在ui界面直接搜索依赖 vue-quill-editor
   
   或者在项目根路径的命令框下
   npm install vue-quill-editor --save
2. 挂载 vue-quill-editor 插件
   全局挂载

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
  }
}

3. 插件的简单使用

<!-- 富文本编辑器组件 -->
 <quill-editor v-model="addForm.goods_introduce" ref="myQuillEditor"></quill-editor>

4. 插件的效果
   

总结

以直觉得markdown编辑器很好用，突然碰到使用的源码，挺简单的，也感觉很有趣，虽然是最简单的使用。更多的用法，可以参考文档，我想肯定还有更多的编辑器也有这样的插件，拓展的以后慢慢探索，，，