跳到主要内容

RichText 概述

DHTMLX RichText 是一款基于 JavaScript 构建的灵活轻量级所见即所得编辑器。它专为在现代 Web 应用中提供流畅的编辑体验而设计，具备简洁的 UI、丰富的格式化能力以及对内容渲染的全面控制。无论您是在构建 CMS、内部管理工具还是嵌入式文档编辑器，RichText 均可轻松集成并按需定制。

DHTMLX RichText 组件包含以下功能：

RichText 与框架无关，可轻松与 React、Angular、Vue 和 Svelte 框架集成，适用于广泛的前端生态系统。

本文档提供了关于安装、配置、使用和定制的详细指导。您将找到常见场景的示例、完整的 API 参考以及将 RichText 嵌入应用程序的最佳实践。

RichText 结构​

RichText 菜单栏提供对编辑操作的访问，例如新建文档、打印、导入/导出内容等。默认情况下它处于隐藏状态。

使用 menubar 属性可切换其可见性。菜单栏可以启用或禁用，但其内容目前不支持配置。

带有文档和文件操作的 DHTMLX RichText 菜单栏

工具栏​

RichText 工具栏提供对文本格式化和结构化编辑功能的快速访问。默认情况下，工具栏 处于启用状态，并显示一组预定义的常用控件，例如加粗、斜体、字体设置、列表格式化等。

toolbar 属性允许您完全自定义工具栏的内容和布局。您可以启用或禁用工具栏、重新排列默认控件，或使用预定义按钮标识符数组和自定义按钮对象来定义完全自定义的工具栏。

带有文本格式化控件的 DHTMLX RichText 工具栏

编辑器​

RichText 编辑器是用户创建和格式化内容的核心区域。您可以通过配置选项（如 value、layoutMode 和 defaultStyles）来控制编辑器的外观和行为。RichText 还支持自定义样式、图片嵌入以及响应式布局调整，以满足应用程序的需求。

两种工作模式​

DHTMLX RichText 可以在"classic"和"document"模式下处理内容。您可以选择最适合的模式，以便在编辑文本时获得舒适的体验。使用 layoutMode 属性可以通过编程方式切换模式。

  • "classic"

经典布局模式下的 DHTMLX RichText 编辑器

  • "document"

文档模式下的 DHTMLX RichText 编辑器

支持的格式​

RichText 编辑器支持 HTML、纯文本 和 Markdown 格式的 解析 和 序列化。

HTML 格式​

序列化为 HTML 格式的 DHTMLX RichText 内容

文本格式​

序列化为纯文本的 DHTMLX RichText 内容

Markdown 格式​

将内置的 markdown 编码器传递给 setValue() / getValue()，以 Markdown 格式加载或序列化内容：

const editor = new richtext.Richtext("#root", {
    value: "Hello world"
    // 其他配置属性
});

// 将 Markdown 加载到编辑器中
editor.setValue("# Title\n\nParagraph", richtext.markdown.fromMarkdown);

// 以 Markdown 格式读取编辑器内容
const md = editor.getValue(richtext.markdown.toMarkdown);
注意

Markdown 支持涵盖有限的语法子集——包括标题、段落、换行、强调、块引用、列表和链接等常见块级和内联元素。在序列化时，没有对应 Markdown 语法的格式（字体系列、字体大小、颜色、对齐方式、行高）将被丢弃。

不支持嵌套内联结构，唯一的例外是 斜体中的加粗。加粗内嵌链接、列表项中的斜体或多级（嵌套）列表等组合将无法正确渲染。

复制与粘贴​

RichText 编辑器通过标准系统快捷键支持剪贴板操作（Windows/Linux 上的 Ctrl+C / Ctrl+X / Ctrl+V，macOS 上的 ⌘+C / ⌘+X / ⌘+V），以及相应的 工具栏 按钮和 菜单栏 条目。

复制或剪切内容时，RichText 会将两种表示形式写入系统剪贴板：

  • 纯文本 版本，用于与简单目标（终端、代码编辑器、纯文本输入框）的兼容
  • HTML 版本，携带所有内联和块级格式（加粗、斜体、下划线、删除线、字体系列、字体大小、文字和背景颜色、标题、块引用、列表、对齐方式、缩进、行高、链接和图片）

粘贴行为取决于剪贴板内容的来源：

  • 在两个 RichText 实例之间粘贴（在同一文档或不同页面中）将使用 HTML 表示形式并保留原始格式。
  • 从任何外部来源粘贴——包括浏览器、文字处理器和其他编辑器——将作为纯文本处理。插入的内容将以不带外部格式的文本形式添加。
注意

工具栏的 粘贴 按钮使用异步 Clipboard API，该 API 仅公开纯文本。若要粘贴从另一个 RichText 复制的内容并保留其格式，请使用 Ctrl+V / ⌘+V 快捷键，该快捷键可直接从浏览器的剪贴板事件中接收完整的 HTML 内容。

键盘快捷键​

RichText 编辑器支持一组常用键盘快捷键，以加快格式化和编辑速度。这些快捷键遵循平台惯例，在 Windows/Linux（Ctrl）和 macOS（⌘）上均可使用。

文本格式化​

操作Windows/LinuxmacOS
加粗*Ctrl+B⌘B
斜体Ctrl+I⌘I
下划线Ctrl+U⌘U
删除线Ctrl+Shift+X⌘⇧X

编辑​

操作Windows/LinuxmacOS
撤销Ctrl+Z⌘Z
重做Ctrl+Y / Ctrl+Shift+Z⌘Y / ⌘⇧Z
剪切Ctrl+X⌘X
复制Ctrl+C⌘C
粘贴Ctrl+V⌘V
删除单词Ctrl+Backspace / Ctrl+Delete⌥⌫ / ⌥⌦
删除行—⌘⌫ / ⌘⌦

缩进​

操作Windows/LinuxmacOS
增加块缩进 / 嵌套列表Tab⇥
减少块缩进 / 提升列表Shift+Tab⇧⇥

特殊操作​

操作Windows/LinuxmacOS
插入链接Ctrl+K⌘K
打印Ctrl+P⌘P
信息

更多快捷键可能会在未来的更新中引入。

若要获取与 RichText 键盘快捷键相关的实际参考，请按 帮助 并选择 键盘快捷键 选项：

DHTMLX RichText 键盘快捷键参考窗口

Need more help?Contact Support