Vue富文本编辑器(vue-quill-editor)使用✔✔
最近工作中需求使用一款富文本编辑器,最终选择了vue-quill-editor,之所以选择vue-quill-editor,是看上了它的轻量以及外观简洁的优势。打开官方文档,直接上手配置,各种报错,踩了很多坑,遇到的主要问题有以下几个
- 字体大小无法设置
- 工具栏样式错位
- 图片上传报错
- 编辑器高度无法设置
(1)安装
npm install vue-quill-editor --save
二:两种引用方法,全局引用和局部引用
1.全局引用,项目入口文件中(main.js)注册
import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)
2.局部引用,在需调用的vue页面中声明(私有化)
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { Quill, quillEditor } from "vue-quill-editor";
export default {
components: {
quillEditor
}
}
三,组件中使用
data里保单addForm绑定到富文本编辑器的v-model
效果图:
可以参考https://blog.csdn.net/qq_41842461/article/details/126488189
本文作者:Mahmud(مەھمۇد)
本文链接:https://www.cnblogs.com/mahmud/p/16931856.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步