文档
安装编辑器、进行配置,并通过代码控制它。共 108 篇指南和参考页面。
从这里开始
快速入门
让 RichTextEditor 2.6.12 运行起来:选择一种设置方式、创建第一个编辑器、读取和保存 HTML,并排查常见的设置问题。
配置参考
RichTextEditor 的所有配置选项:核心编辑器设置、智能排版、iframe 安全,以及 100 多个用于 AI、导出、分页、无障碍和内容安全的插件选项。
所有方法
RichTextEditor 实例的完整 JavaScript API 方法参考:内容、选区、命令、对话框和生命周期方法。
AI Toolkit
AI Toolkit 参考:Ask AI 对话框、AI Chat、AI Review、aiToolkitResolver 钩子、操作约定、自定义操作和 BYOK。
入门
如何安装、设置和配置编辑器。
快速入门
让 RichTextEditor 2.6.12 运行起来:选择一种设置方式、创建第一个编辑器、读取和保存 HTML,并排查常见的设置问题。
安装(div)
在 div 元素上安装 RichTextEditor:引入 rte.js、创建实例,并在您自己的脚本中读取或设置 HTML 内容。
安装(textarea)
在 textarea 上安装 RichTextEditor:编辑器会自动把 HTML 同步回表单字段,因此现有的表单提交仍然可以正常工作。
初始化
RichTextEditor JavaScript global enables you to create, modify and interact with instances of the editor. This is the starting point for any integration.
配置
RichTextEditor 可以通过多种方式进行配置,以符合您需要的编辑体验。
配置参考
RichTextEditor 的所有配置选项:核心编辑器设置、智能排版、iframe 安全,以及 100 多个用于 AI、导出、分页、无障碍和内容安全的插件选项。
皮肤
皮肤与主题配置:切换工具栏皮肤、覆盖 CSS 变量,并重新设置编辑器外框的样式以匹配您的产品。
设置和获取内容
用 JavaScript 设置和读取 RichTextEditor HTML 内容的常用方法,包括在提交表单之前读回内容。
React 状态与光标问题
为 RichTextEditor 选择受控或非受控的 React 状态。保存当前 HTML、防止过期的自动保存响应,并诊断光标跳动、重新挂载和严格模式清理问题。
表单验证与必填字段
验证必填的 RichTextEditor 字段,而不把空 HTML 当作内容。同步 textarea、显示无障碍的错误提示,并在服务器上再次验证。
常见问题
关于 RichTextEditor 集成、配置、授权、浏览器支持和故障排查的常见问题解答。
AI
AI 写作工具,以及如何接入您自己的服务商。
AI Toolkit
AI Toolkit 参考:Ask AI 对话框、AI Chat、AI Review、aiToolkitResolver 钩子、操作约定、自定义操作和 BYOK。
AI 服务商、流式输出与 DOCX
内置的 OpenAI / Anthropic / Azure OpenAI 服务商解析器、Server-Sent Events 流式输出,以及服务器端 DOCX 导出。
BYOK 密钥库(按租户分配密钥)
Charge AI traffic to each tenant's own provider account via the IAiKeyVault abstraction, with reference implementations, admin REST API, and cost ledger.
文档与写作
Word 导出、页面布局、结构化内容和输入。
DOCX 保真度与安全
经过测试的 HTML 到 DOCX 支持对照表、请求约定、审阅标记约定、图片安全边界以及有意设定的限制。
分页与法律文书编号
分页页面视图(A4、Letter 和 Legal,带页眉、页脚和页码)以及多级法律文书编号,包含在标准授权中。
脚注、格式刷与大小写转换
自动编号的脚注、复制字符格式的格式刷,以及更改大小写(全大写、全小写、标题式、句首大写)——包含在标准授权中。
结构化内容
RichTextEditor 关于结构化 JSON、Markdown 转换、静态 HTML 渲染和验证的文档。
语音听写
基于 Web Speech API 的语音转文字。工具栏麦克风按钮、实时的临时识别结果,需手动启用。
移动端工具栏模式
需手动启用的移动端样式表:44x44 的点击目标、可水平滚动的工具栏、固定的页眉,以及从底部弹出的对话框。
协作
批注、修订跟踪和实时编辑。
图片与上传
上传、存储和浏览图片及文件。
上传文件
为 RichTextEditor 配置安全的文件上传:自定义处理程序、验证、进度回调和服务器端存储控制。
图片库路径
让 Insert Gallery 对话框指向您自己的图片:文件夹 JSON 约定、文件夹如何变成 URL,以及适用于 ASP.NET、ASP.NET Core 和 PHP 的端点代码。
将图片存储为文件
生产环境的图片设置:创建上传和图片库文件夹、连接上传处理程序、关闭 base64 嵌入、在服务器上拒绝 base64,并把现有的 base64 图片迁移为文件。适用于 ASP.NET Core、ASP.NET 和 PHP。
解决图片上传问题
逐步诊断 RichTextEditor 的图片上传:请求缺失、403 和 413 错误、无效的响应、损坏的图片 URL,以及保存后丢失的图片。
云上传服务商
Send uploads to S3, Azure Blob, Cloudinary, or any custom backend via IRichTextBoxUploadStore. Reference implementations included.
自定义与扩展
工具栏、命令、事件以及自定义插件。
API 基础
编辑器提供了用于读取和更新内容的客户端方法。
工具栏与菜单项参考
Every toolbar and menu item identifier RichTextEditor supports, grouped by category, for building custom toolbars in config.toolbar strings.
所有命令(execCommand)
execCommand() 的完整命令参考:格式设置、块、列表、表格、媒体和对话框命令及其参数签名。
所有属性
RichTextEditor 实例的只读属性,用于在您自己的代码中访问与编辑器相关的对象。附示例。
所有方法
RichTextEditor 实例的完整 JavaScript API 方法参考:内容、选区、命令、对话框和生命周期方法。
处理事件
runjsevent 参考:把工具栏按钮连接到您自己的 JavaScript 处理函数,并在应用代码中响应编辑器命令。
编写第一个插件
从头到尾构建一个 RichTextEditor 插件:注册、配置默认值、工具栏按钮、命令、事件总线,以及它对保存内容的影响。
包体积与按需加载插件
默认情况下,所有插件都包含在 all_plugins.min.js 中。只加载用到的插件,编辑器即可从 529 KB 降到 214 KB(gzip)。提供 blog、documents、review 和 collaboration 的实测预设,并附各自的 script 标签。
逐一了解各项功能
每项功能的作用、启用方法及其选项。
表情选择器
一个可搜索的选择器,包含八个类别共 1,037 个表情,带有最近使用选项卡和键盘导航。表情以普通 Unicode 字符保存。
表情自动补全
输入 :smile: 即可得到表情,或者输入冒号和几个字母从列表中选择。介绍短代码映射、如何添加您自己的代码以及撤销。
内容模板
在一个带实时预览、可搜索的对话框中提供现成的文档。介绍如何定义 htmlTemplates、模板可以采用的形式,以及替换内容意味着什么。
数学公式
通过带实时预览的对话框插入 TeX 和 LaTeX 公式。介绍它如何使用页面上的 KaTeX 或 MathJax、保存什么内容,以及如何显示公式。
Mermaid 图示
根据 Mermaid 文本绘制流程图、时序图、饼图和甘特图。加载 Mermaid 或在服务器上渲染;介绍保存的内容以及之后如何显示。
书签卡片
把链接插入为带有标题、描述、图标和图片的预览卡片。编辑器本身不获取任何内容:请把 bookmarkResolver 连接到您自己的端点。
自动嵌入
在单独一行粘贴 YouTube、Vimeo、Loom 或其他视频链接,即可得到一个 16:9 的播放器。介绍支持的网站、添加您自己的服务商,以及保存的标记。
智能标签
保存机器可读值的内联日期、人员和链接标签。介绍快捷日期、来自您自己 chipResolver 的建议,以及保存的标记。
布局表格
用 role=presentation 标记只用于定位内容的表格,让屏幕阅读器跳过网格。介绍命令、斜杠菜单、API 以及会发生哪些变化。
@提及
输入 @,从静态列表或您自己的服务器搜索中选择人员。标签会在 HTML 中保存此人的 id,因此您的服务器可以知道提及了谁。
灰色文本补全
在光标之后显示由您编写的解析器函数提供的灰色内联建议。按 Tab 接受,按 Esc 取消。不附带任何模型;请调用您自己的 AI 端点。
内联代码
用 inlinecode 按钮或命令把单词或选区标记为代码。保存为不带属性的 <code> 元素;再按一次按钮即可移除代码。
折叠标题
点击标题旁边的箭头或通过脚本,折叠标题下的章节。折叠只影响屏幕显示;保存的 HTML 完整保留每一个章节。
间隙光标
通过方向键、点击间隙或块之间的蓝色提示线,在开头的表格之前,或在两个表格、分隔线或图片之间添加段落。
表格排序与行号
按列对表格行排序并自动识别数字、金额和日期,添加会自动重新编号的行号列,并通过菜单移动行和列。
可读性统计
Flesch 易读度、Flesch-Kincaid 年级、阅读时长以及单词、句子和音节数,均在浏览器中计算。在对话框中显示,或通过脚本读取。
朗读
使用浏览器的语音合成逐句朗读文档或选区,并在一个小栏中提供播放、暂停、语音和语速控制。
图片编辑器
对文档中的图片进行裁剪、旋转、翻转、绘制、添加文字或滤镜。保存时,PNG 会通过您的上传处理程序发送,或者以 data URL 的形式嵌入。
拼写检查
在编辑区域中使用浏览器拼写检查,另有一个 Spell Check 命令,可显示一个审阅面板,其中的建议来自您自己的拼写服务。
文本片段语言
用 span lang 把单词或段落标记为法语、希伯来语或其他语言,让屏幕阅读器正确发音(WCAG 3.1.2 部分内容的语言)。
从右到左界面
为阿拉伯语、希伯来语、波斯语和乌尔都语用户自动或始终镜像编辑器的工具栏、菜单、对话框和状态栏。内容保持不变。
导入样式
用您网站自己样式表中的 CSS 类填充段落、内联、图片和链接样式菜单,并按每个选择器中的元素进行归类。
电子邮件 HTML
getEmailHTML() 把计算样式复制为内联样式、删除类名和 id,并把内容包装在一个固定宽度的表格中,使其在电子邮件客户端中正常显示。
多个可编辑区域
把标题、摘要和正文等多个编辑器编为一组,只有正在使用的区域显示工具栏,并由一个 API 同时保存和加载所有区域。
Shadow DOM
在 shadow root 或 Web 组件中运行编辑器。插件会把编辑器的样式表(包括之后添加的样式表)复制到 shadow root 中。
对话框无障碍
为编辑器的对话框提供 dialog 角色、取自标题的名称以及字段的可访问名称,让屏幕阅读器读出 URL 而不是 edit。
无障碍与运维
WCAG 合规,以及在生产环境中运行编辑器。
方法参考
编辑器的所有方法,每个方法单独一页。
execCommandattachEventdetachEventgetHTMLCodesetHTMLCodegetPlainTextgetReadOnlysetReadOnlyisCommandEnabledisCommandActivesetContentCssTextsetPreviewCssTextinsertRootParagraphinsertByTagNamesurroundByTagNameinsertElementsurroundElementinsertTextinsertHTMLselectControlselectDoccollapsedeletefocuscommitBookmarkclearHistorynotifySelectionChangehtmlEncodehtmlDecodegetDocumentgetEditablegetSelectiongetSelectedControlgetSelectionElementgetSelectedTextgetJSON(桥接)setJSON(桥接)createToolbarButtoncreateToolbarDropDowncreateDialogcloseCurrentPopupsetImageForCommand
事件
编辑器触发的事件,以及如何监听这些事件。
想先看看运行效果?
本文档中的每项功能都有在线演示,可以直接编辑和查看。