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

Vue3使用富文本编辑器QuillEditor

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.效果如图。

Vue3使用富文本编辑器QuillEditor

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

 

上一篇:富文本编辑器vue-quill-editor


下一篇:react项目中Form表单中引用富文本编辑器react-quill