《Vue3笔记》第36节：Vue3项目集成Quill富文本编辑器

最新推荐文章于 2025-07-02 21:37:06 发布
最新推荐文章于 2025-07-02 21:37:06 发布
阅读量339 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 【Vue3项目开发】 文章标签： 笔记 前端 quill 富文本编辑器 quill编辑器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39826207/article/details/147482275

前一个小节的内容中，已经介绍了Vue3项目如何配置wangEditor图片上传的功能。这个小节来介绍另外一个富文本编辑器，叫做：quill。

Vue3项目开发（微信文章集合）

1.1、运行效果

Vue3项目集成quill富文本编辑器的功能效果，如下图所示：

在这里插入图片描述

quill富文本编辑器还支持引入第三方插件，例如：quill-image-extend-module图片扩展模块、quill-image-resize-module图片尺寸模块、quill-better-table表格模块等等。具体需要引入哪些模块，可以去github查找一下quill module。

模块地址：

了解本专栏 订阅专栏 解锁全文 超级会员免费看
《Vue3笔记》第38节：Vue3项目集成TinyMCE富文本编辑器
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 CSDN 记录学习心得和笔记内容。
04-26 482
前一个小节的内容中，已经介绍了项目中如何配置代码高亮的插件。这个小节来学一个新的富文本编辑器，叫做：。Vue3项目开发（微信文章集合）编辑器的效果，如下所示： 首先，需要安装依赖，执行下面命令： 执行成功，就可以在文件中，查看到相应的依赖和版本信息。 在目录下面，创建一个目录，接着再创建一个目录，新建一个文件，内容如下： 1.4、创建组件 在目录下，新建一个组件，代码如下所示： 1.5、使用组件 组件创建完成之后，就可以直接引入使用了。案例代码： 1.6、获取源代码 到此，项目集成富文本编辑器就介绍完了。
《Vue3笔记》第37节：Vue3项目Quill中配置highlightjs代码高亮插件
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 CSDN 记录学习心得和笔记内容。
04-26 198
前一个小节的内容中，已经介绍了Vue3项目如何集成Quill富文本编辑器。这个小节来学习一下，如何Quill引入代码高亮插件。
VueQuill：基于Vue 3的富文本编辑器组件
gitblog_07429的博客
09-13 451
VueQuill：基于Vue 3的富文本编辑器组件 项目基础介绍和主要编程语言 VueQuill 是一个基于 Vue 3 的富文本编辑器组件，旨在为开发者提供一个强大且易于使用的富文本编辑解决方案。该项目的主要编程语言包括 TypeScript、JavaScript 和 Stylus。 项目核心功能 VueQuill 的核心功能包括： 富文本编辑：提供丰富的文本编辑功能，支持多种格式和样式。 V...
Vue3 中值得推荐的富文本编辑器组件盘点
最新发布
qq_39842184的博客
07-02 1530
组件优点适用场景学习曲线功能全面，企业级支持完善企业级 CMS、文档协作平台中等tiptap轻量、高度可定制需要深度定制的项目高q-editor移动端优化，集成 Quasar 主题移动优先的 Web 应用低WangEditor中文友好，开箱即用国内企业系统、中小型项目低Quill轻量、模块化扩展需要自定义主题或插件的场景中等CKEditor 5现代功能、多平台支持企业级协作平台、多框架项目中等追求功能丰富性→或CKEditor 5移动端优先→q-editor快速开发→。
Vue3 封装 vue-quill 富文本组件
韶君的博客
06-12 1641
Vue3 封装 vue-quill 富文本组件
vue3-quill:vue3的笔管编辑器
04-02
vue3-羽毛笔 vue3的笔管编辑器 用法 npm i vue3 - quill // global import { quillEditor , Quill } from 'vue3-quill' import customQuillModule from 'customQuillModule' Quill . register ( 'modules/customQuillModule' , customQuillModule ) app . use ( quillEditor ) 或者 //single file import { quillEditor , Quill } from 'vue3-quill' import customQuillModule from 'customQuillModule' Quill . register ( 'modules/customQu
vue3使用Quill 富文本编辑器
weixin_69041698的博客
02-24 855
6. 解决 富文本字体下拉框 字体重复的 问题。1. 下载 quill 富文本插件。main.js文件中。2. 下载缩放图片的组件。5. 自定义粘贴事件。
vue3使用quill富文本编辑器，保姆级教程，富文本踩坑解决
热门推荐
moanuan的博客
12-08 2万+
vue3富文本编辑器踩坑，quill,quilleditor,QuillEditor,保姆级教程
文本，Vue3使用quillEditor vue3 富文本编辑器,参考博主野生切图仔，全局样式写法，添加组件的写法
weixin_54048131的博客
03-12 1906
content 内容也就是这个超文本 => 返回的为 很长的 string 字符串 (HTML 文本)；content-type 设置保存的文本类型 ，html => 已超文本的形式保存；引入的图片，图片也是 Base64 显示，所以保存 一个字符串 就是 一篇富文本；后端保存这个字符串， 用的时候，把这个字符串 返回来 内容就渲染啦；这里有加粗，斜体，文本方向的插件。
Vue3使用富文本编辑器vue-quill 自定义图片上传、文件上传
2301_76162638的博客
04-03 1104
【代码】Vue3使用富文本编辑器vue-quill 自定义图片上传。
quill-editor：Vue轻量级富文本编辑器-Vue-Quill-Editor
2401_85158083的博客
07-12 2474
秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！高级前端工程师必备资料包。
vue-quill:Vue 3组件的笔管编辑器
03-21
VueQuill 强大的文本编辑器的Vue 3 + Quill Component。 概述 VueQuill是用于构建富文本编辑器的Vue组件，此软件包是Quill的一个薄包装，使它在Vue 3应用程序中更易于使用。 :green_heart:使用Vue 3构建：比以前更强大，更高效的框架。 :male_sign:‍:male_sign:完全打字稿： VueQuill源代码完全用打字稿编写。 :hammer_and_wrench:易于使用：通过一个简单的API即可直接实现。 演示版 。 文献资料 贡献 拉请求是受欢迎的。对于重大更改，请首先针对您要更改的内容进行。 鹅毛笔 执照
vue3.0 vue-quill-editor.rar
09-19
vue3.0+vue-quill-editor+element富文本编辑引入可直接使用 可上传图片调整图片大小
vue 富文本 quill 编辑器，实现图片上传到服务器，以及实时字数统计
2401_84435768的博客
04-29 514
不是很推荐， 建议直接用quill就完事了，而且quill的和 api也都是很直接清晰的，直接用的话，更灵活关于quill的使用还是有一些需要注意的地方，下面我们来看一下：如何使用1、引入2、初始化定义一个的元素然后，在mounted中调用initQuill方法，完成初始化至于编辑的宽高，你可以在css中，自己去设置// 这是 methods 中的 initQuill 方法// 你可以在 mounted 中调用它// 这样就完成了 quill 的初始化// 编辑器配置选项。
vue2/vue3中使用的富文本编辑器vue-quill
weixin_44727080的博客
11-14 4518
整理下常用的富文本编辑器工具。
Vue3使用vue-quill富文本 图片缩放、拖拽功能
不甜呐的博客
06-13 3695
Vue3使用富文本插件 图片缩放、拖拽功能。
vue3集成vue-quill，自定义选人插件
王也的博客
01-09 1387
left: 10px;
Vue3封装Quill富文本组件：vue-quill-text-editor
洲上牧童
05-10 7239
用Vue3封装了Quill富文本编辑器，实现了内容保存和图片Url上传功能，欢迎使用~
vue3 富文本quill
YUlangML的博客
10-01 415
【代码】vue3 富文本quill。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Mr.小朱同学

随心赞赏，助力前行

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值