文档

安装编辑器、进行配置,并通过代码控制它。共 108 篇指南和参考页面。

从这里开始

入门

如何安装、设置和配置编辑器。

快速入门

让 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 写作工具,以及如何接入您自己的服务商。

文档与写作

Word 导出、页面布局、结构化内容和输入。

协作

批注、修订跟踪和实时编辑。

图片与上传

上传、存储和浏览图片及文件。

自定义与扩展

工具栏、命令、事件以及自定义插件。

逐一了解各项功能

每项功能的作用、启用方法及其选项。

表情选择器

一个可搜索的选择器,包含八个类别共 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 合规,以及在生产环境中运行编辑器。

方法参考

编辑器的所有方法,每个方法单独一页。

事件

编辑器触发的事件,以及如何监听这些事件。

想先看看运行效果?

本文档中的每项功能都有在线演示,可以直接编辑和查看。