富文本

推荐一个富文本：

https://github.com/vuejs/awesome-vue  这里面记录了vue技术栈相关的 框架 组件库 插件 文章 博客 教学视频

https://github.com/surmon-china/vue-quill-editor 富文本

安装：

1、npm install vue-quill-editor

2、yarn add vue-quill-editor

挂载：

 

//哪里使用挂载到哪个页面
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
  }
}

 

使用：

 

<quill-editor v-model="content" :options="editorOption"></quill-editor>
//options 配置属性  配置对象 editorOption 。

 

配置富文本：

quill js插件文档地址 https://quilljs.com/docs/quickstart/

editorOption: {
        placeholder: '',
        modules: {
          toolbar: [
        //配置的功能
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],
            [{ header: 1 }, { header: 2 }],
            [{ list: 'ordered' }, { list: 'bullet' }],
            [{ indent: '-1' }, { indent: '+1' }],
            ['image']
          ]
        }
      },