首页 VueJS Vue3使用富文本编辑器QuillEditor

Vue3使用富文本编辑器QuillEditor

作者:胡同里的砖头 围观群众:256 更新于:2023-02-02

安装组件
npm install @vueup/vue-quill@alpha --save

在main中引用

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
}
}
然后在vue中引用
<quill-editor v-model="form.p_function" style="width:100%; height:400px" >

效果如图:


可以看出css样式不理想,添加css样式
<style>
.ql-toolbar,.ql-snow{width:100%; text-align: left;}
</style>
再来看效果

  • 本文标题: Vue3使用富文本编辑器QuillEditor
  • 文章分类:【VueJS】
  • 非特殊说明,本文版权归【胡同里的砖头】个人博客 所有,转载请注明出处.
留言评论
站点声明:
1、本站【胡同里的砖头】个人博客,借鉴网上一些博客模板,取其各优点模块自行拼装开发,本博客开发纯属个人爱好。
2、所有笔记提供给广大用户交流使用,可转载,可复制,纯个人开发所遇问题锦集记录使用
Copyright © huzlblog.com All Rights Reserved. 备案号:苏ICP备2021056683号-8