企业官网建设流程全解析

Quill 如何用 formats 选项限制编辑器只允许指定格式？

【免费下载链接】quillQuill is a modern WYSIWYG editor built for compatibility and extensibility项目地址: https://gitcode.com/GitHub_Trending/qu/quill

Quill 默认允许库中定义的所有格式存在于编辑器内容中。如果你的产品只希望用户看到部分排版能力（例如只允许斜体，不允许加粗、链接），可以在初始化 Quill 时传入formats选项，传入一个格式名数组，编辑器就只会识别并保留这个列表内的格式。

准备工作

无论用哪种方式引入 Quill，先保证页面里有一个编辑器容器，并按主题引入对应样式表：

<link href="quill.snow.css" rel="stylesheet" /> <div id="editor"></div> <script src="quill.js"></script>

CDN 方式下需要包含quill.js（full build，包含核心库、常用主题、格式和模块）与所选主题的样式表；npm 方式下通过npm install quill安装后，在 JS 中import Quill from 'quill'，样式表在包的dist目录中，例如import "quill/dist/quill.core.css"。注意主题样式表仍需手动引入，Quill 不会替你加载。

用 formats 选项限定允许格式

formats的默认值是null（不传也等效），表示允许所有已定义的格式。要缩小范围，传一个格式名字符串数组即可：

const quill = new Quill('#editor', { formats: ['italic'], theme: 'snow' });

官方文档给了一个直接可参考的示例（文档示例，用于演示限制效果）：把formats设为['italic']后写入一段同时包含斜体和加粗的文本，编辑器中只有斜体生效：

const Delta = Quill.import('delta'); quill.setContents( new Delta() .insert('Only ') .insert('italic', { italic: true }) .insert(' is allowed. ') .insert('Bold', { bold: true }) .insert(' is not.') );

从哪里选格式名

formats数组里填的是格式名，不是工具栏按钮。可用名称分三类（见 formats 文档）：

例如只保留加粗和有序列表的编辑器可以写成：

const quill = new Quill('#editor', { formats: ['bold', 'list'], theme: 'snow' });

两个行为细节由 createRegistryWithFormats.ts 和 单元测试 确认：

• 核心格式（block、break、cursor、inline、scroll、text）无论formats怎么写都会被注册，不受限制影响；
• 需要配套容器的格式会连带注册其容器，例如声明list后list-container也会可用；
• 数组里写了未注册的名字不会报错中断，Quill 会输出Cannot register "..." specified in "formats" config. Are you sure it was registered?的 error 日志并忽略该名称。

formats 与工具栏按钮是两回事

formats控制的是"内容里允许存在哪些格式"，工具栏配置控制的是"页面上显示哪些按钮"，两者相互独立。文档明确举例：你可以让编辑器允许粘贴加粗内容，同时工具栏上不显示加粗按钮。

反过来也要注意：把某个格式从formats中拿掉，并不会自动隐藏工具栏上对应的按钮——toolbar 模块不会检测格式是否可用，按钮仍会显示。所以实际操作时要两边一起改：

const quill = new Quill('#editor', { formats: ['bold', 'italic'], modules: { toolbar: [['bold', 'italic']] }, theme: 'snow' });

工具栏数组只列出你希望保留的控件，参考 Toolbar 文档。

验证限制是否生效

限制生效的直观现象是文档示例中Bold一词不再以加粗呈现。程序上可以用 API 文档 里的getFormat/getContents检查内容中实际携带的格式：quill.getFormat(index, length)返回范围内真实存在的格式名和值，quill.getContents()返回带格式数据的 Delta。检查时以返回列表中是否还出现未允许的格式名（如bold）作为判断依据。

限制与边界

• 与registry同时使用时formats被忽略。指定registry选项后，formats不再生效，Quill 会输出Ignoring "formats" option because "registry" is specified的警告。需要更精细的自定义、或同一页面多个编辑器各用不同格式集合时，走 Registries 文档：创建new Parchment.Registry()，用registry.register()逐个注册格式（需先注册Scroll、Block、Break、Container、Cursor、Inline、Text这些基础格式），再把registry传给构造器。
• 格式名必须真实存在。拼错或注册缺失的名字会被静默忽略（仅打 error 日志），编辑器会按剩下的格式初始化，所以发现限制比预期更宽时，先检查控制台日志和数组里的拼写。
• formula需要页面额外引入 KaTeX，若不需要公式能力，直接不要把它放进formats即可。

完成上述配置后，粘贴、API 写入和工具栏操作产生的内容都会被收敛到formats允许的范围内的格式集合中。

【免费下载链接】quillQuill is a modern WYSIWYG editor built for compatibility and extensibility项目地址: https://gitcode.com/GitHub_Trending/qu/quill