Vue3使用富文本编辑器QuillEditor

 

vue-quill-editor似乎对于vue3没有较好支持，或者是我水平太差不会用。这里推荐使用vue-quill。官网地址https://vueup.github.io/vue-quill/guide/usage.html#in-single-file-component

1、安装。在控制面板中查找依赖，@vueup/vue-quill进行安装，即下图中的第2个。或者使用命令行进行安装

npm install @vueup/vue-quill@alpha --save

2.配置。在main.js文件中按如下方式导入

import { createApp } from 'vue'
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';

const app = createApp()
app.component('QuillEditor', QuillEditor)

或者在需要使用的组件文件中导入

import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';

export default {
  components: {
    QuillEditor
  }
}

3.在vue文件中使用。

 

<QuillEditor theme="snow" />

4.效果如图。

虽然简陋，但是使用方便，更多配置项见官网