在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

laurent22/joplin

菜单

富文本编辑器

相关源文件

富文本编辑器（RTE）是Joplin主要的笔记编辑界面之一，提供所见即所得（WYSIWYG）的编辑功能。本文档将解释富文本编辑器的架构、组件和主要功能。有关Markdown编辑器的信息，请参阅Markdown编辑器。

概述

Joplin的富文本编辑器基于TinyMCE构建，这是一个流行的开源所见即所得HTML编辑器。该编辑器允许用户格式化文本、插入图片和其他资源、创建表格以及执行其他富文本编辑操作，而无需直接编写Markdown代码。在后台，富文本编辑器会自动在HTML（用于编辑）和Markdown（用于存储）之间进行转换。

来源：packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx1-148 packages/app-desktop/gui/NoteEditor/utils/htmlToMarkdown.ts

架构

富文本编辑器的实现由几个关键组件协同工作构成

来源：packages/app-desktop/gui/NoteEditor/NoteEditor.tsx73-132 packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx97-157

主要组件

  1. NoteEditor - 管理笔记状态并处理编辑器选择的父组件
  2. TinyMCE - 核心的所见即所得编辑器组件
  3. FormNote - 用于管理笔记状态和同步的自定义hook
  4. Context Menu - 为资源、链接和文本提供右键功能
  5. Resource Handling - 管理编辑器内的附件

内容流和转换

富文本编辑器的关键方面在于HTML（TinyMCE使用）和Markdown（存储在数据库中）之间的双向转换。当加载或保存笔记时，这些转换会自动发生。

来源：packages/app-desktop/gui/NoteEditor/utils/useFormNote.ts155-333 packages/renderer/MarkupToHtml.ts1-115 packages/renderer/HtmlToHtml.ts1-194

HTML 转 Markdown 转换

当用户在富文本编辑器中编辑内容时，HTML内容需要转换为Markdown以进行存储。此过程处理：

  • 将格式化文本（粗体、斜体等）转换为Markdown语法
  • 处理表格和列表
  • 处理嵌入式资源（图片、文件）
  • 保留链接和其他属性

Markdown 转 HTML 转换

加载笔记时，存储的Markdown会转换为HTML以便在编辑器中显示。此过程：

  • 将Markdown语法转换为HTML元素
  • 处理资源和附件以正确显示
  • 确保表格和代码块等复杂元素得到正确渲染
  • 根据当前主题应用适当的样式

TinyMCE 集成

TinyMCE组件是富文本编辑器的核心，提供了所见即所得的编辑界面。

来源：packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx97-321 packages/app-desktop/gui/NoteEditor/utils/types.ts85-142

TinyMCE 实现的关键功能

  1. 自定义工具栏：已修改以包含Joplin特定的按钮和功能

    • 格式按钮（粗体、斜体、高亮等）
    • 资源附件按钮
    • 列表和待办事项按钮
    • 标题按钮
    • 插件按钮

  2. 自定义样式：将Joplin的主题应用于TinyMCE界面

  3. 资源处理：用于处理编辑器内附件的自定义逻辑

  4. 上下文菜单集成：增强的右键上下文菜单，包含自定义选项

  5. 插件架构：支持Joplin插件扩展编辑器

TinyMCE 初始化

TinyMCE 编辑器使用特定配置进行初始化，以与Joplin集成

  1. 自定义图标和按钮
  2. 主题集成
  3. 自定义插件
  4. 自定义事件处理程序
  5. 资源处理

来源：packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx657-927 packages/app-desktop/gui/NoteEditor/utils/types.ts85-142

Form Note 状态管理

富文本编辑器使用一个名为 useFormNote 的自定义React hook来管理笔记状态

来源：packages/app-desktop/gui/NoteEditor/utils/useFormNote.ts155-333 packages/app-desktop/gui/NoteEditor/utils/types.ts144-209

useFormNote hook

  1. 管理正在编辑的笔记的当前状态
  2. 处理从数据库加载笔记
  3. 跟踪更改并安排笔记保存
  4. 管理附加的资源
  5. 处理笔记的加密/解密
  6. 当发生外部更改时刷新笔记

上下文菜单系统

富文本编辑器包含一个自定义的上下文菜单系统，为不同元素提供特定的功能

来源：packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/useContextMenu.ts1-172 packages/app-desktop/gui/NoteEditor/utils/contextMenu.ts1-239

上下文菜单系统

  1. 检测点击的元素类型（文本、图片、链接、资源）
  2. 根据元素类型提供相关的菜单选项
  3. 处理打开、保存、复制等操作
  4. 与插件系统集成，允许自定义上下文菜单项

资源处理

富文本编辑器包含对图片、PDF和其他文件的资源（附件）的强大处理功能

来源：packages/app-desktop/gui/NoteEditor/utils/resourceHandling.js packages/app-desktop/gui/NoteEditor/utils/useFormNote.ts273-311

资源处理的关键方面

  1. 附件按钮：允许用户直接附加文件
  2. 拖放支持：支持将文件拖入编辑器
  3. 资源显示：内联显示图片，并为其他文件类型提供链接
  4. 资源上下文菜单：用于管理资源的上下文菜单选项
  5. 资源同步：在资源更改时进行更新

文本模式和自动格式化

富文本编辑器支持文本模式和自动格式化，允许用户使用类似Markdown的语法来实现富文本格式化

模式结果
**text**粗体文本
*text*斜体文本
~~text~~删除线文本
# text一级标题
## text二级标题
1. text有序列表
* text无序列表
[ ] text未勾选的复选框
[x] text已勾选的复选框
`code`行内代码

此功能通过 editor.enableTextPatterns 设置启用

来源：packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx687-697 packages/lib/models/settings/builtInMetadata.ts687-697

插件集成

富文本编辑器与Joplin的插件系统集成，允许插件扩展编辑器的功能

来源：packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx655-875 packages/app-desktop/gui/NoteEditor/NoteEditor.tsx83-118

插件集成的关键方面

  1. 工具栏按钮：插件可以向编辑器工具栏添加自定义按钮
  2. 上下文菜单项：插件可以向上下文菜单添加自定义项
  3. 内容处理：插件可以在内容显示之前/之后进行处理
  4. 自定义视图：插件可以提供与编辑器集成的自定义UI组件

设置和配置

富文本编辑器包含几个可配置的设置

设置描述
editor.autoMatchingBraces自动匹配括号、圆括号、引号等
editor.enableTextPatterns启用Markdown模式替换
editor.pastePreserveColors粘贴文本时保留颜色
editor.tabMovesFocus使Tab键移动焦点而不是插入制表符
editor.keyboardMode键盘交互模式

来源：packages/lib/models/settings/builtInMetadata.ts655-697

结论

富文本编辑器是Joplin笔记编辑系统的一个强大组件，为用户提供了熟悉的所见即所得界面，同时保持了与Markdown存储的兼容性。它与Joplin的基础设施深度集成，用于处理资源、插件和主题，以提供无缝的编辑体验。