quill.js官方文档(五)【API之Model,Extension】

Quill: 格式 (formats) Quill支持多种格式,包括UI控件和API调用。 阅读详情

Model

find

静态方法,给定一个DOM节点,返回对应的Quill或Blot实例。
返回后者时,参数bubble为true时,将向上搜索给定DOM的祖先节点,知道找到对应的Blot。

方法

Quill.find(domNode: Node, bubble: boolean = false): Blot | Quill

示例

var container = document.querySelector("#container");
var quill = new Quill(container);
console.log(Quill.find(container) === quill);   // Should be true

quill.insertText(0, 'Hello', 'link', 'https://world.com');
var linkNode = document.querySelector('#container a');
var linkBlot = Quill.find(linkNode);

getIndex

返回文档开始至给定Blot对象位置的距离。

方法

getIndex(blot: Blot): Number

示例

let [line, offset] = quill.getLine(10);
let index = quill.getIndex(line);   // index + offset should == 10

getLeaf

指定文档中的距离,返回对应的叶Blot实例。

方法

getLeaf(index: Number): Blot

示例

quill.setText('Hello Good World!');
quill.formatText(6, 4, "bold", true);

let [leaf, offset] = quill.getLeaf(7);
// leaf should be a Text Blot with value "Good"
// offset should be 1, since the returned leaf started at index 6

getLine

指定文档中的距离,返回行Blot。
方法

getLine(index: Number): [Blot, Number]

示例

quill.setText('Hello\nWorld!');

let [line, offset] = quill.getLine(7);
// line should be a Block Blot representing the 2nd "World!" line
// offset should be 1, since the returned line started at index 6

getLines

返回指定位置包含的行。

方法

getLines(index: Number = 0, length: Number = remaining): Blot[]
getLines(range: Range): Blot[]

示例

quill.setText('Hello\nGood\nWorld!');
quill.formatLine(1, 1, 'list', 'bullet');

let lines = quill.getLines(2, 5);
// array with a ListItem and Block Blot,
// representing the first two lines

Extension

debug

启用记录信息的静态方法,给定的级别有:’error’, ‘warn’, ‘log‘或’info’。传入true等同于传入’log’。传入false表示停用所有级别的消息记录。

方法

Quill.debug(level: String | Boolean)

示例

Quill.debug('info');

import

返回Quill库、格式、模块或主题的静态方法。一般,路径应该准确映射到Quill源码的目录结构。除非另有说明,对返回实体的修改可能打断已经引入的Quill功能,所以千万不要这么做。

方法

Quill.import(path): any

示例

var Parchment = Quill.import('parchment');
var Delta = Quill.import('delta');

var Toolbar = Quill.import('modules/toolbar');
var Link = Quill.import('formats/link');
// Similar to ES6 syntax `import Link from 'quill/formats/link';`

register

注册一个模块、主题或格式,让它们可用于添加到编辑器上。注册之后,可用Quill.import引入。使用’formats/’, ‘modules/‘或’themes/’ 路径前缀来分别注册格式、模块和主题。对于格式,特有一个简短的方法,只需要传入格式对象,路径将会自动生成。如果传入路径将会直接覆盖已经定义的路径。

方法

Quill.register(format: Attributor | BlotDefinintion, supressWarning: Boolean = false)
Quill.register(path: String, def: any, supressWarning: Boolean = false)
Quill.register(defs: { [String]: any }, supressWarning: Boolean = false)

示例

var Module = Quill.import('core/module');

class CustomModule extends Module {}

Quill.register('modules/custom-module', CustomModule);
Quill.register({
  'formats/custom-format': CustomFormat,
  'modules/custom-module-a': CustomModuleA,
  'modules/custom-module-b': CustomModuleB,
});

Quill.register(CustomFormat);
// You cannot do Quill.register(CustomModuleA); as CustomModuleA is not a format

addContainer

在Quill容器内部新增并返回一个容器元素,和编辑器本身是兄弟关系。按照惯例,Quill模块应该有一个带前缀ql-的类名。可指定一个引用节点,新节点会插入改节点的前面。

方法

addContainer(className: String, refNode?: Node): Element
addContainer(domNode: Node, refNode?: Node): Element

示例

var container = quill.addContainer('ql-custom');

getModule

返回一个已经添加到编辑器的模块。

方法

getModule(name: String): any

示例

var toolbar = quill.getModule('toolbar');

disable

enable(false)的快捷方法。

enable

让通过鼠标或键盘等输入设备设置让用户能够编辑内容。当source为"api"或"silent`"时,不影响API的调用。

方法

enable(value: Boolean = true)

示例

quill.enable();
quill.enable(false);   // Disables user input
quill.js-强大的现代富文本编辑器插件 quill.js是一款强大的现代富文本编辑器插件。该富文本编辑器插件支持所有的现代浏览器、平板电脑和手机。它提供了文本编辑器的所有功能,并为开发者提供大量的配置参数和方法。 立即下载

相关推荐

微机原理--输入输出实验--emu8086

通过实验,验证了基本要求,实现了一位数加法运算的功能,同时实现了两位数加法运算的功能,还有一位数的除法。思考题(1)输入输出数据和计算用数据的区别:从键盘上输入以及输出的数据要在通过转化为计算机所识别的二进制的数字,和计算所用的数据之间相差30H。(2)单字符输入输出和串输入输出的不同之处:单字符的输入使用1号功能键,输出通过2号功能调用,且待显示字符送给DL寄存器;串输入使用0A功能,输出通过9号功能调用,DS:DX指向待显示字符串,且字符串必须以“$”结束。

m0_58837398的博客 2416

quill富文本编辑器中文汉化和高度设置操作

如果你用的是snow 主题,那么就可以直接使用我的css样式。将以上css样式添加到项目中,就可以了。

4112

ubuntu18.04安装gtsam过程及报错error: invalid initialization of reference of type ‘const std::vector<bool>&’

这里建议从这个链接下,不要从官网下,可能会有版本冲突 2.安装依赖 3.编译 报错: 1. error: invalid initialization of reference of type ‘const std::vector&’ from expression of type ‘const std::vector’ 124 | const std::vector& mask() const { retur...

qq_35102059的博客 2912

quill.js官方文档(一)【Configuration,Formats】

Configuration Quill允许通过多种方式对其进行自定义以满足您的需求。 本节致力于调整现有功能。 有关添加新功能的信息,请参见模块部分;有关样式的信息,请参见主题部分。 Container Quill 需要一个容器,其中将附加编辑器。 您可以传入CSS选择器或DOM对象。 var editor = new Quill('.editor'); // First matching element will be used var container = document.getElementB

极客神殿 2560

C#---第十一课:对列表的各种操作,添加、删除、排序、列表长度、获取元素的索引、FirstOrDefault()、SingleOrDefault()、last()

1.添加元素 2.删除元素 (1)删除列表中指定的元素 (2)删除列表A中所有与列表B相交的元素---常规 (3)删除列表A中所有与列表B相交的元素---lambda 3.排序(正序、倒序) 4.获取列表的最大容量(长度)、已用容量 6.获取元素在列表中的位置(index) 7.判断某元素是否在列表List中 8.获取列表中第一个元素First() & FirstOrDefault() 9.获取列表中唯一元素Single() & SingleOrDefault() 10.获取列表中最后一个元素

Alien-Hu 3624

Redis中什么是Big Key(大key)问题?如何解决Big Key问题?

通俗易懂的讲,Big Key就是某个key对应的value很大,占用的redis空间很大,本质上是大value问题。key往往是程序可以自行设置的,value往往不受程序控制,因此可能导致value很大。redis中这些Big Key对应的value值很大,在序列化/反序列化过程中花费的时间很大,因此当我们操作Big Key时,通常比较耗时,这就可能导致redis发生阻塞,从而降低redis性能。用几个实际的例子对大Key的特征进行描述:● 一个String类型的Key,它的值为5MB(数据过大); ● 一

weixiaohuai的博客 3万+

Quill.js 富文本编辑器插件使用

2019独角兽企业重金招聘Python工程师标准>>> ...

weixin_33845477的博客 1053

Flink实战项目——城市交通实时监控平台

本项目是与公安交通管理综合应用平台、机动车缉查布控系统等对接的,并且基于交通部门现有的数据平台上,进行的数据实时分析项目。

yangwei2048的博客 836

Caveman Mode 浏览器扩展实现解析:MV3 指令注入、发送拦截与打包验证流程

本文基于仓库中的 `extension/AGENTS.md` 及其指向的源码,完整拆解 caveman 项目的 "Caveman Mode" Chrome 扩展(MV3、无打包步骤):它如何在 ChatGPT / Claude / Gemini 的出站消息前注入 caveman 技能指令、如何拦截发送手势并重放发送、以及纯函数测试与 Chromium 端到端测试如何共同保障注入逻辑正确。读完本文,

gitblog_00434的博客 455

【一文读懂】卫星轨道的轨道参数(六根数)和位置速度矢量转换及其在终端距离、相对速度和多普勒频移计算中的应用

本文首先介绍了卫星轨道的六根数参数:半长轴 a、偏心率 e、轨道倾角 i、升交点赤经 Ω、近地点幅角 ω 以及真近点角 ν,并探讨了如何利用这些参数计算卫星与地面终端之间的距离、相对速度及由此产生的多普勒频移。利用开普勒运动公式计算当前瞬间的轨道半径;根据真近点角 ν 在围心坐标系中计算位置矢量和速度矢量;利用旋转矩阵(依次旋转 ω、i、Ω)将围心坐标系的状态矢量转换到地心惯性坐标系;最终结合地面终端信息,计算卫星与终端的欧氏距离、沿视线的相对速度及多普勒频移。

u011376987的博客 9483

华为OD机试2025A卷 - 用户调度问题(Java & Python& JS & C++ & C )

题目要求每个用户依次选择当前所能选择的最小资源消耗策略,并且若有多个策略的资源消耗相同,则选择最后一个策略。每个用户的选择是独立的,只考虑该用户的策略和相邻用户的约束,不考虑整个调度序列的全局资源消耗。每个用户根据自己的当前状态(即自己的三种选择的资源消耗)做出局部最优选择:在当前可选的策略中,选择消耗最小的那个。如果有多个最小值,则选择最后一个(根据题意)。这一选择是局部的最优,即在当下最有利的选择,但并不保证最终的整体系统资源消耗是最小的。

算法大师! 1万+

3小时快速搭建SpringBoot 3.x与Vue 3博客管理系统实战

在Web开发领域,前后端分离架构已成为构建现代应用的主流模式,其核心原理在于将用户界面与业务逻辑解耦,通过API进行数据交互。这种架构模式的技术价值在于提升了开发效率、便于团队协作,并增强了系统的可维护性和可扩展性。在实际应用场景中,博客管理系统是典型的CRUD应用,它涵盖了用户认证、数据管理和前后端交互等核心流程,非常适合用于技术学习和项目实践。本文聚焦于使用SpringBoot 3.x和Vue 3这两个当前主流框架,通过手把手教程,帮助开发者快速搭建一个功能完整的博客后台,解决在环境配置和项目整合中常见

weixin_33787529的博客 366

ADS基础教程22 - 有限元电磁仿真(FEM)

一、引言二、FEM操作过程1.新建Layout1.新建Layout2.EM设置3.设置Frequency plan4.设置Output plan5.设置Options6.设置网格频率7.仿真结果三、总结介绍了在ADS中如何进行FEM仿真过程。END!}}END!

XZ_ZC的博客 2579

如何解密鸣潮PAK资源:WuWa-Mod的AES-256逆向工程完整指南

WuWa-Mod 是《鸣潮》(Wuthering Waves)的模组合集,它破解了游戏 PAK 资源包的 AES-256 加密,并提供无技能冷却、伤害倍数、反反作弊等即插即用的功能模块。对想实践 UE4 资源解包的人而言,这个仓库最有价值的地方,是"找到密钥→解密 PAK→二次打包"这条完整且可复现的链路。 ## PAK 为什么解不开:AES-256 加密挡在哪里 PAK 是 Unreal E

gitblog_01112的博客 208

IDEA的使用指南

IDEA基于java的使用手册,可以最快速的上手,在使用中不断的丰富自己的使用技巧.

win10 跳过U8环境检测的IE WebControls.rar

win10 安装u8的时候 提示IE WebControls 不通过,这个工具可以欺骗u8的检查。 跳过U8环境检测的IE WebControls。提示导入失败后,重新检测通过。

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

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

mnilz的博客 1211

假人有限元模型

假人模型,车辆碰撞假人有限元模型,适合做乘员安全的研究者利用

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

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

念旧的博客 1946

IEM模型,地表粗糙度模拟

利用微波反演土壤水分时候,利用IEM模型可以实现对随机地表的模拟

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

【quill.js】深入理解quilljs

前言 这篇文章中的很多内容都来自Adam Charron的《Getting to know QuillJS - Part 1》中,文中结合了我自己的一些理解和经验,内容也做了些调整,希望能帮到准备使用quilljs的你。 quilljs是什么? quilljs是一个现代富文本编辑器,它具备良好的兼容性及强大的可扩展性。用户可以非常方便地实现自定义功能。另一特点是,quilljs自带一套数据系统...

weixin_34018169的博客 2811

quill.js 用法

富文本

foradmin的博客 2063

vue-quill-editor 富文本获取焦点后滚动条自动问题

在init方法里面添加这些即可。

weixin_45737732的博客 1109

quill中文文档

quill中文文档 http://doc.quilljs.cn/1409371

一路向前的博客 4481

quill富文本编辑器 API

//1. 从第三个开始删除,删除4个 // console.log(this.quill.deleteText(2, 4)); // 12345678 1278 // 2.(返回对象)返回从第三个开始,返回4个,编辑器里面不变 .insert = 3456; 不写参数参数,默认全部 // console.log(thi...

Mangojjx的博客 1728

quill.js官方文档(九)【Clipboard,Syntax】

粘贴板(clipboard)模块 粘贴板处理Quill和外部程序直接的复制、剪切和粘贴。默认提供内容粘贴的正常解析,也能通过匹配做进一步的定制。 粘贴板模块解析通过后序遍历]对应DOM树粘贴HTML, 建立所有子节点的Delta表达。目前为止,每个子节点,匹配器函数用DOM节点和Delta表达调用,允许匹配器返回一个修改的Delta表达。 为了有效的使用匹配,需要熟练驾驭Deltas。 API addMatcher 添加定制的匹配器到粘贴板模块,匹配器优先使用nodeType匹配并加入,接下来使用CSS选择

极客神殿 3057

Quill.js 常见问题解决方案

Quill.js 常见问题解决方案 【免费下载链接】quill Quill 是一个为兼容性和可扩展性而构建的现代所见即所得编辑器。 项目地址: https://gitcode.com/GitHub_Trending/qu/quil...

gitblog_07824的博客 860

quill.js官方文档(二)【API之Content】

deleteText 从编辑器中删除文本,返回代表对应变化的Delta数据。Source可能是 “user”、 “api” 或者 “silent”。当编辑器不可用[disabled]#disable且source参数为“user”时,调用将被忽略。 方法 deleteText(index: Number, length: Number, source: String = 'api'): Delta 示例 quill.deleteText(6, 4); getContents 返回编辑器的内容——包含格式

极客神殿 2149

Quill富文本编辑器禁用

quill富文本编辑器设置禁用,不是vue-quill-editor

qq_33475629的博客 3691
上一篇: quill.js官方文档(四)【API之Editor,Events】
下一篇: quill.js官方文档(六)【增量Delta】
.NET跨平台
博客等级 码龄15年 6066粉丝 738原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值