vue-quill-editor，获得到输入内容的html，如何在外部的div中显示效果

最新推荐文章于 2025-06-18 15:19:00 发布
原创 最新推荐文章于 2025-06-18 15:19:00 发布 · 9.5k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何在项目中集成Quill富文本编辑器，包括必要的HTML结构设置及quill.snow.css样式的引入方法，适用于希望增强网页文本编辑功能的前端开发者。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1. 在你需要展示的页面中用如下元素包裹:

<div class="ql-container ql-snow">

    <div class="ql-editor">

       <div v-html="content"></div>// 你要展示的内容

    </div>

</div>

 

2. 引入ql的样式，也就是quill.snow.css文件

 在index.html中，添加如下link即可：

<link href="https://cdn.quilljs.com/1.3.3/quill.snow.css" rel="stylesheet">

我自己在进行调试的时候，发现这个链接的数据反馈比较慢，所以就将此文件下载到了本地项目工程，然后在index.html

中引用：

<link rel="stylesheet" href="static/css/quill.snow.css">

 

 

vue-quill-editor html编辑器
weixin_30781775的博客
03-20 717
在Vue项目使用quill-editor带样式编辑器（更改插入图片和视频） https://www.cnblogs.com/zhengweijie/p/7305903.html vue-quill-editor默认插入图片是直接将图片转为base64再放入内容中，如果图片比较大的话，富文本的内容就会很大。 插入视频是直接弹框输入URL地址，某些需求下我们需要让用户去本地选择自己...
html简单引入quill-editor富文本
洪君的博客
04-03 2594
escapeStringHTML (str) { str = str.replace(/&lt;/g, '<') str = str.replace(/&gt;/g, '>') console.log(str) return str }
Quill编辑器插入自定义HTML记录的示例详解
11-19
转眼已经2020年，饥渴的人类不再满足于简单的文本，于是有了花里胡哨的携带各种样式的文本，然而有文本还不够，我们还需要让用户在编辑的时候，能够插入各种自定义消息类型，让我们发出去的软文更加好看，因此有了这篇文章。 前言 由于Quill编辑器自带的富文本过滤（大部分主流编辑器都会对富文本进行过滤处理），导致开发者想要配置自定义HTML模板时，遇到了不少麻烦。 一、Quill渲染逻辑分析 为了自定义Quill中的HTML块内容，首先需要了解Quill内部的渲染流程，这里有几个关键的概念需要了解： 1、Delta Delta是Quill内部定义的一个数据格式，用于表示文档内容以及文档修改操作，易读且
【vue3】引入富文本编辑器Quill
最新发布
m0_51614469的博客
06-18 423
vue3项目中引入富文本编辑器Quill
quill-editor自定义内容(如a标签嵌套图片)等所有html问题都能解决
前端一线搬运工的博客
12-01 5815
methods: { // 自定义blot stockBlot() { // 引入源码中的BlockEmbed const BlockEmbed = Quill.import('blots/block/embed'); // 定义新的blot类型 class StockEmbed extends BlockEmbed { static create(value) { const node = s......
Quill富文本编辑器的使用（使用富文本编辑器展示html的内容（包含表格）可以编辑）
weixin_55761900的博客
11-24 4868
vue前端富文本编辑器的使用（使用富文本编辑器展示html的内容（包含表格）可以编辑）
Vue-Quill-Editor富文本编辑器的使用教程
12-29
本文为大家分享了Vue Quill Editor富文本编辑器的具体使用方法，供大家参考，具体内容如下 先看效果图：    1、下载Vue-Quill-Editor  npm install vue-quill-editor --save 2、下载quill（Vue-Quill-Editor...
浅谈vue中使用编辑器vue-quill-editor踩过的坑
11-19
项目中使用vue-quill-editor富文本编辑器，在编辑内容的时候，我们往往会编辑图片，而vue-quill-editor默认的处理方式是直接将图片转成base64格式，导致上传的内容十分庞大，且服务器接受post的数据的大小是有限制的...
vue-quill-editor的使用及个性化定制操作
10-15
import { quillEditor } from 'vue-quill-editor' export default { name: "addJournal", components: { quillEditor }, data() { return { content: ``, editorOption: {}, }; }, methods: { ...
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
10-15
如果你发现编辑器内部的样式已经调整好了，但外部布局仍有问题，例如字体大小选择超出边框，可以在包裹`quill-editor`的元素上添加`ql-container ql-snow`这两个类，这两个类是Quill编辑器的默认容器样式： ...
使用vue-quill-editor的时候回显html
m0_55336994的博客
10-13 2174
quill-editor富文本编辑器
quill.js-心目中的最佳富文本编辑器-html引入、改后可用于Vue-quill-editor
04-03
quill.js-心目中的最佳富文本编辑器-html引入、改后可用于Vue-quill-editor 基于html 可以将文本框内图片优先上传后服务器 因为编辑器默认是将图片转成base64存储的，而我们实际开发需要将图片存在自己的服务器中。 重构组件，实现及时上传 汉化后的工具组栏，更符合用户需求
适配Vue的富文本编辑器vue-quille-editor的使用以及前端显示获得的html
NJR10byh的博客
03-18 2521
目录安装CDNNPM使用全局配置单个组件配置使用方法SSRSPA实际项目核心代码htmlJavaScript前端显示获得的htmlv-html 安装 CDN <link rel="stylesheet" href="path/to/quill.core.css"/> <link rel="stylesheet" href="path/to/quill.snow.css"/> <link rel="stylesheet" href="path/to/quill.bubble.cs
vue-quill-editor 展示内容
做一个有知识的流氓
06-10 946
【代码】vue-quill-editor 展示内容。
vue set设置html根字体,vue-quill-editor安装及使用：自定义工具栏和自定义中文字体，把字体写在html的style中...
weixin_39981185的博客
07-16 678
一、自定义工具栏把toolbar在vue的data return里配置就可以；二、用vue-quill-editor写出来的邮件，发出去之后字体样式变了，那是应该vue-quill-editor改变字体的font-family没绑定在style上，而是通过class来改变的，这个class只有vue-quill-editor插件才有，接收邮件端是没有的，故没办法把想要的字体显示出来，只有把font...
vue 使用vue-quill-editor 富文本添加源码模式，查看源码功能和表格功能
w161513820的博客
09-10 1805
今天接到个需求，在富文本中增加查看源码和增加表格功能，感觉这种功能手拿把掐，但是奈于平时沉迷于移动端有段时间没写pc了，看了下官方感觉一个头两个大，于是在茫茫文档中各种借鉴（抄袭）完成了功能。2.将富文本封装成一个子组件 （和查看源码的代码一起，太懒了懒得拆分讲解）1.源码功能相对来说比较简单 就是自定义工具栏。1.将quill的版本升级到2.0。在mounted中增加显示图标。在handlers中添加事件。
富文本框（Quill）的数据样式无法正确回显在其他页面的解决办法
weixin_52443895的博客
08-05 2941
富文本框（Quill）的数据样式无法正确回显在其他页面的解决办法
quill富文本编辑器获取光标所在innerHTML索引
Aays2790的博客
04-09 1106
quill富文本编辑器获取光标所在innerHTML索引
quill 获取内容_攻略 时装元宝消耗与获取
weixin_39955423的博客
11-09 843
点击蓝字“少三小助手”关注，查看更多内容文章随版本更新具有时效性，酌情阅读文章内容属于个人平民观点，酌情参考2020年05月29日文章目录 一、时装作用二、琉金时装消耗元宝和获取方式：三、彩金时装消耗元宝和获取方式：四、暗金时装消耗元宝和获取方式：五、金色时装消耗元宝和获取方式：六、红色时装消耗元宝和获取方式：七、橙色时装消耗元宝和获取方式：一、时装作用 【时装作用】(1)武将形象：在时...
vue3中使用vue-quill-editor
01-14
### 集成和使用 `vue-quill-editor` 富文本编辑器于 Vue 3 项目 为了在 Vue 3 中集成并使用 `vue-quill-editor`, 安装必要的依赖包是首要操作。通过 npm 或 yarn 来安装 quill 和 vue-quill-editor 是推荐的方式[^1]。 ```bash npm install quill @vueup/vue-quill ``` 或是对于偏好 Yarn 的开发者： ```bash yarn add quill @vueup/vue-quill ``` 完成上述软件包的安装之后，在项目的入口文件 main.js 或者相应的配置文件中引入 Quill 编辑器样式表，这一步骤确保了组件能够正确显示其默认样式。 ```javascript import '@vueup/vue-quill/dist/vue-quill.snow.css'; // 如果喜欢更简洁的主题可以选用 bubble 主题 // import '@vueup/vue-quill/dist/vue-quill.bubble.css'; ``` 创建一个新的 Vue 组件用于封装 QuillEditor, 这样可以在整个应用的不同地方重复利用此组件而无需多次定义相同的逻辑。 ```html <template> <div class="editor"> <!-- 使用 v-model 实现双向绑定 --> <quill-editor v-model:content="content" contentType="html"></quill-editor> </div> </template> <script setup> import { ref } from 'vue' import { QuillEditor } from '@vueup/vue-quill' const content = ref('<p>初始内容...</p>') </script> ``` 最后，在任何页面或父级组件里注册这个新创建的子组件，并传递所需属性来定制化行为与外观。 ```html <MyQuillEditor /> <!-- 自定义一些参数 --> <MyQuillEditor :options="{ theme: 'bubble' }"/> ```
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值