quill.js 用法

5分钟搞定:用Quill.js快速搭建一个支持图片上传的富文本编辑器 本文详细介绍了如何使用轻量级富文本编辑器Quill.js快速构建一个支持云端图片上传的现代编辑器。通过拦截默认图片处理逻辑,结合FormData与Fetch API实现文件上传,并提供了进度反馈、粘贴拖拽上传及模块化封装等进阶优化方案,帮助开发者在5分钟内为内容管理后台或博客系统集成强大且可定制的编辑功能。 阅读详情

QuickStart

<!-- Include stylesheet -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

<!-- Create the editor container -->
<div id="editor">
  <p>Hello World!</p>
  <p>Some initial <strong>bold</strong> text</p>
  <p><br></p>
</div>

<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<!-- Initialize Quill editor -->
<script>
  var quill = new Quill('#editor', {
    theme: 'snow'
  });
</script>

Download

Github

Configuration

Container

Quill需要一个可以添加编辑器的容器,可以传递一个CSS选择器或者DOM对象。

var quill = new Quill('#editor');
var container = document.getElementById('editor');
var editor = new Quill(container);

Options

可以传递一个options对象来配置quill

var options = {
  debug: 'info',
  modules: {
    toolbar: '#toolbar'
  },
  placeholder: 'Compose an epic...',
  readOnly: true,
  theme: 'snow'
};
var editor = new Quill('#editor', options);

bounds

Default:document.body

只考虑左右边界

debug

Default:warn

debug是一种静态方法,会影响页面上的其他Quill编辑器实例。 只有警告和错误消息默认启用。

formarts

Default:  All formarts

允许在编辑器中使用的格式的白名单。

modules

包含的模块和相应的选项的集合。

placeholder

Default:None

readOnly

Default:false

scrollingContainer

Default:null

strict

Default:true

theme

‘bubble’or ‘snow’

API

getContents

getContents(index: Number = 0, length: Number = remaining)

var delta = quill.getContents();

*使用quill富文本编辑器的插件,自定义formData图片上传 官网地址:https://quilljs.com 项目需求:自带的上传图片是base64,直接入库的话,请求头太长,导致网页十分十分的卡,所以才改用formData自定义上传(改完之后,相当于覆盖了他本身自带的上传按钮,图标是一样的,就是说在外观上看不出来变化) 刚引入好的效果图: 当文本框中没有任何内容的时候,quill.container.firstChild.in... 阅读详情

相关推荐

Flask博客实战 - 集成富文本编辑器Quill

为什么需要集成富文本编辑器?一个博客最主要的功能是什么,那就是写作,如果不能对我们发布的内容进行排版美化,那么我们所发布的内容又有什么意义? 对于阅读者来说也是非常的不友好和不尊重,一篇排版精良的文章往往会让人赏心悦目,也会让读者爱上你的博客,所以富文本编辑器的使用就显得非常重要!为什么选择富文本编辑器Quill?大家可能会有疑问,市面上那么多富文本编辑器为什么选择他,首先是Quill富文本编辑器是一款开源的编辑器,它在 GitHub 上的 star 数名列前茅。体验下来,它的优势是轻量、兼容性强、支持的插

轻编程的博客 1399

如何选择开源富文本编辑器?

StackEdit 是一款基于 Web 的在线 Markdown 编辑器,使用者可以通过它轻松编辑 Markdown 文档、同时还可以直接将 Markdown 文档同步到一些云端存储服务如 Dropbox 、Google Drive 、GitHub 等,这是 StackEdit 的另一大特点。无论你是一位专业的开发人员,还是一个有兴趣的学习者,这些开源编辑器将带给你无限的创造空间,同时可以轻松扩展和自定义,让你的工作更加高效和愉悦。它使用可扩展的、可配置的、可组合的模块来管理文本内容的编辑。

mnilz的博客 1211

SillyTavern 向量存储配置踩坑记:从卡死到本地部署 Ollama 跑通

用此命令看到镜像就算成功。

qq_62483451的博客 1257

在VUE中使用富文本编辑器 Quill.js

本文主要介绍了 Web 富文本编辑器 Quill.js,包括其受欢迎的原因,如简单易用、功能丰富、扩展性好等。还详细讲解了使用方法,如快速体验、配置工具栏、内容操作、选区处理、格式操作、扩展模块等。

念旧的博客 1946

解决Calibre中license的错误

本次解决了Calibre在Cadence 617 virtuoso版本中运行不了的错误,在遇到问题的时候,我也跟你们一样,首先是上网查询为什么运行不了呢?明明我安装了之后里面有Calibre的,我当时也是这样的疑惑,一点Calibre运行LVS的时候,一片空白,然后就出现了license的错误,后来点点点,看看看,搜搜搜,最终解决了这个问题。虚拟机是VMware16版本,cadence617,Calibre是2015版本。旨在记录遇到的实际问题。

yytu231的博客 1万+

基于Agent与大模型的性能测试脚本自动化生成实践

性能测试是软件质量保障的关键环节,其核心在于模拟真实用户负载以评估系统在高并发下的表现。传统脚本编写依赖人工,效率低下且易出错。通过引入智能体(Agent)与大语言模型(LLM)技术,可实现从自然语言描述或接口文档到可执行脚本的自动化转换。Agent负责任务规划与工具调用,LLM则提供强大的意图理解与代码生成能力,二者结合能精准解析测试场景、自动处理参数化与接口关联等复杂逻辑。该技术方案显著提升了脚本生成效率与准确性,尤其适用于持续集成、海量接口回归等需要快速构建测试场景的工程实践。本文以JMeter和Lo

weixin_28718769的博客 259

AionUi 完整上手:免费 AI 智能体桌面应用,装完就能替你干活

AionUi 是一款免费、开源的 AI 智能体桌面应用,内置一个装完就能用的 Agent:接上你自己的 API Key,它就能读写本地文件、处理 Excel、生成 PPT 和 Word 文档、执行定时任务,还能从手机远程接管。你不用再自己折腾命令行、装一堆 CLI 工具——打开应用、填个 Key,AI 就开始替你干活了。 ## 能力全景:AionUi 到底能帮你做什么 ### 内置 Agent

gitblog_00154的博客 791

使用 VPN 访问太理内部网相关问题总结【太原理工大学】

电脑连接 VPN,访问校园内部网相关问题总结,太原理工大学。

m0_52861684的博客 9873

quill.js官方文档(三)【API之Formatting,Selection】

Formatting format 设置用户当前选择文本的格式,返回一个代表变化的Delta数据。如果用户当前选择的长度为0,只是一个游标,这个格式将被激活,所以用户输入的下一个字符将被应用这个格式。 Source可能是 “user”、 “api” 或者 “silent”。当编辑器不可用[disabled]#disable且source参数为“user”时,调用将被忽略。 方法 format(name: String, value: any, source: String = 'api'): Delta

极客神殿 1860

Cox构建预测模型(5):如何用R语言绘制校准曲线(附全套代码)

这篇文献通过绘制两个模型的DCA曲线来评估模型的临床决策实际需求,一个是列线图模型,包括纳入列线图的全部变量,一个是TNM模型,只纳入TNM分期3个变量。A图是训练集1年、3年、5年患者的总生存期的DCA曲线;B图是训练集1年、3年、5年患者的总生存期的DCA曲线,红色线条代表列线图模型(包括构建模型的10个变量),黄色线条代表TNM模型(仅纳入TNM分期3个变量),两个模型对比,在绘制校准图之前,必须要完成数据的导入、拆分数据集的工作、预测因子的筛选,校准图的绘制是分别在训练集与验证集独立进行的。

qq_37610365的博客 1360

从0到1:OpenClaw 助力单元测试代码自动化与覆盖率飞升

OpenClaw 的横空出世,宛如一道曙光,照亮了这片黑暗的领域。它作为一款强大的本地 AI 助手,拥有着令人惊叹的能力。OpenClaw 能够深入理解代码的逻辑结构,自动分析代码中的各种功能和潜在的风险点,从而精准地生成高质量的单元测试代码。它就像是一位不知疲倦的测试专家,能够快速、准确地完成那些繁琐的测试编写工作,将开发者从重复劳动中解放出来,让他们能够将更多的精力投入到更具创造性和价值的工作中。

远程部署调试 运行安装 项目调试 二次开发 项目技术新 持续迭代 部分源码免费分享 475

从痛点到蜕变:Vue-Quill-Editor迎接Quill 2.0时代的全面升级指南

你是否正面临这些开发困境?在使用Vue-Quill-Editor构建富文本编辑功能时,是否遭遇过大型文档编辑时的性能瓶颈?是否因TypeScript类型缺失而反复调试?是否在处理复杂富文本粘贴时束手无策?Quill 2.0的发布将彻底改变这一现状,为Vue生态带来富文本编辑的新范式。本文将深入剖析Quill 2.0带来的核心变革,提供详尽的迁移策略,并展望vue-quill-editor的未来发展...

gitblog_00714的博客 679

openlayers:实现在连续更改时间维度时如何平滑地重新加载层 (附完整源码)

openlayers:实现在连续更改时间维度时如何平滑地重新加载层 (附完整源码)

希望我的博客,能帮上你解决学习中工作中所遇到的问题 345

nuxt.js引用quill富文本编辑器

nuxt.js引用quill富文本编辑器 目录nuxt.js引用quill富文本编辑器安装2. 在plugins目录下创建vue-quill-editor.js。 添加内容:3. 在pagesc创建的vue文件中使用效果图 安装 npm install vue-quill-editor 2. 在plugins目录下创建vue-quill-editor.js。 添加内容: import Vue from 'vue' import VueQuillEditor from 'vue-quill-editor/

LiGuanLink的博客 673

基于FPGA的时间数字转换(TDC)设计(一:原理)

基于FPGA的时间数字转换(TDC)设计,此为第一篇

sdau2005的博客 5069

华为的C语言编程规范.pdf

华为技术有限公司内部技术规范。本规范制定了编写C语言程序的基本原则、规则和建议。从代码的清晰、简洁、可测试、安全、程序效率、可移植各个方面对C语言编程作出了具体指导。

可自由定制的富文本编辑器Quill

https://quilljs.com/ vue版本:https://www.jianshu.com/p/4e00f11583fa https://www.npmjs.com/package/vue-quill-editor

小诸葛的博客 717

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

Vue2Editor入门指南:5分钟快速上手Vue.js富文本编辑器

Vue2Editor是一款基于Vue.js 2和Quill.js构建的强大富文本编辑器,它为开发者提供了简单易用且功能丰富的文本编辑解决方案。无论是构建博客系统、内容管理平台还是在线协作工具,Vue2Editor都能帮助你快速实现专业级的富文本编辑功能。 ## 🚀 为什么选择Vue2Editor? Vue2Editor作为Vue.js生态中备受欢迎的富文本编辑器组件,具有以下核心优势: -

gitblog_01026的博客 867

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

IMSL CNL 7.0.0 (x86-64)Crack

IMSL CNL 7.0.0 (x86-64)Crack intel的算法库破解文件,这是C++版本的破解文件

vue-quill-editor集成 插入图片 添加图片样式

vue-quill-editor集成 插入图片 添加图片样式官方的演示地址官方文档下载安装全局安装局部安装一个简单的例子插入图片封装 官方的演示地址 官方demo. 官方文档 官方文档. 中文文档. 下载安装 npm install vue-quill-editor --save # or yarn add vue-quill-editor 全局安装 import Vue from 'vue' import VueQuillEditor from 'vue-quill-editor' import 'q

qq_32294071的博客 3231

vue-quill-editor富文本编辑器的使用

HTML: <!--利用quill-editor标签,在标签内部定义ref v-model :options(配置项)这些属性 还定义了一些事件--> <div class="edit_container"> <!-- 新增时输入 --> <quill-editor v-model="addForm.content" ref="m...

qq_40519017的博客 302

富文本编辑器vue-quill-editor的应用

富文本编辑器vue-quill-editor 富文本编辑器名称为:vue-quill-editor https://github.com/surmon-china/vue-quill-editor 1.富文本编辑器应用: 步骤: 安装: npm i vue-quill-editor 在应用组件中引入3个css文件: import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/

jyn15159的博客 237

Dograh 嵌入Token安全体系解析:防伪造、限流与CORS三大防线完整指南

在 Dograh 语音AI平台中,你可以把创建好的语音助手以一段嵌入式脚本的形式放进自己的网站,访客无需登录即可发起对话。而连接访客与后端的关键凭证,就是**嵌入Token(Embed Token)**——它同时承担了身份认证、用量管控和来源校验三项职责。本文带你完整看懂 Dograh 围绕嵌入Token构建的安全体系:Token 如何防伪造、用量限制如何防并发绕过、限流与 CORS 策略如何挡住

gitblog_00868的博客 922

(转)富文本编辑器——Vue2Editor

Vue2Editor是一个简单易用的富文本编辑器,如果没有复杂的需求,你可以毫无保留的使用它,如果你需要复杂的功能,也可以使用其自定义能力进行自定义扩展!

CaseyWei 3554

Vue2-Editor完整教程:5分钟快速上手专业级富文本编辑器

Vue2-Editor是一个基于Vue.js和Quill.js构建的强大富文本编辑器组件,专为现代Web应用设计。它提供了丰富的文本编辑功能,同时保持了Vue.js的响应式特性和开发友好性,让开发者能够快速集成专业的文本编辑体验。 ## 🎯 为什么选择Vue2-Editor? 在众多富文本编辑器中,Vue2-Editor凭借其独特的优势脱颖而出: ### 开发效率提升 - **零配置启动*

gitblog_00929的博客 1099

如何快速集成Vue2-Editor:打造专业级富文本编辑体验的完整指南

Vue2-Editor是一款基于Vue.js和Quill构建的专业级富文本编辑器解决方案,为开发者提供了简单高效的文本编辑功能集成方案。无论是博客系统、内容管理平台还是在线协作工具,Vue2-Editor都能帮助你轻松实现富文本编辑功能,提升用户内容创作体验。 ## 📌 为什么选择Vue2-Editor? Vue2-Editor作为一款成熟的富文本编辑器组件,具有以下核心优势: - **轻

gitblog_00934的博客 310

如何快速上手 Vue2Editor:零基础打造强大富文本编辑器

Vue2Editor 是一款基于 Vue.js 2 和 Quill.js 构建的开源富文本编辑器,它提供了简洁的 API 和丰富的编辑功能,让开发者能够轻松在 Vue 项目中集成专业级的文本编辑体验。无论是博客系统、内容管理平台还是在线协作工具,Vue2Editor 都能满足你的需求。 ## 🚀 核心功能概览 Vue2Editor 继承了 Quill.js 的强大编辑能力,同时针对 Vue

gitblog_01008的博客 601

image控件自动调整图片大小_vue中使用quilleditor富文本及图片大小调整

解决vue-cli3引入quill-image-resize-module的报错“Cannot read property 'imports' of undefined”在vue.config.js中添加如下代码添加的部分varwebpack=require('webpack');//添加module.exports={chainWebpack:config=&g...

weixin_39717825的博客 1702
上一篇: SQL优化几种方法
下一篇: 支付宝小程序唤起独立签约
也无风雨丶
博客等级 码龄10年 52粉丝 39原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值