vue+element-ui中集成富文本编辑器(vue-quill-editor)安装与使用

1.安装命令

save

包名会被注册在package.json的dependencies里面，在生产环境下这个包的依赖依然存在

npm install vue-quill-editr --save

2.导入

// 引入富文本组件
import { quillEditor } from 'vue-quill-editor'
// 引入富文本组件样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

3. 注册

export default {
  components: {
    quillEditor
  },
}

4. 使用

<template>
  <div>
    <quillEditor />
  </div>
</template>

完整代码

<template>
  <div>
    <quillEditor />
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
// 引入富文本组件样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
  components: {
    quillEditor
  }
}
</script>

<style></style>

基本用法如上

 

如果需要更详情的进入官网文档查看vue-quill-editor · Quill官方中文文档 · 看云 (kancloud.cn)https://www.kancloud.cn/liuwave/quill/1434140