如何二次开发TYZRNEditor：扩展富文本功能与工具栏的完整指南

如何二次开发TYZRNEditor：扩展富文本功能与工具栏的完整指南

【免费下载链接】Blum-auto-botBlum-auto-bot项目地址: https://gitcode.com/gh_mirrors/blumauto/Blum-auto-bot

TYZRNEditor 是一款将 React Native 与原生 UI 深度融合的 iOS 富文本编辑器与 Markdown 编辑器开源项目，它基于 WordPress-Editor-iOS、MMMarkdown、Moleskine 等成熟库二次封装而来。本文面向初次接触编辑器二次开发的开发者，用最简洁的方式带你读懂 TYZRNEditor 的源码结构，并手把手演示如何扩展富文本功能、自定义工具栏按钮与预览能力。无论你是要做图文笔记 App、博客写作工具，还是社区发帖编辑器，这篇 TYZRNEditor 二次开发指南都能帮你快速上手。

TYZRNEditor 是什么：一套编辑器，两种编辑模式

TYZRNEditor 提供了两个开箱即用的 React Native 组件：

• TYZRNEditorView：富文本编辑器，基于 WebView + 原生格式栏实现，支持标题、加粗、斜体、引用、列表、链接、图片/视频插入等功能；
• TYZRNMKEditor：Markdown 编辑器，基于 Moleskine 高亮文本框，支持实时语法高亮与一键预览。

两个组件都通过原生 Manager 桥接到 React Native，JS 侧只需几行代码即可嵌入页面。项目自带演示动图，可以直观感受编辑器的整体效果：

二次开发前的准备工作：工程导入与日志配置

由于项目通过 XIB 构建格式栏，暂时无法直接通过 npm 安装，因此二次开发的正确姿势是下载完整工程后手动引入。仓库地址为：https://gitcode.com/gh_mirrors/blumauto/Blum-auto-bot

下载后你需要做三件事：

1. 将TYZRNEditorView.js与TYZRNMKEditor.js复制到你的 React Native 工程相应目录；
2. 在 Xcode 工程中引入 TYZRNEditor 相关的原生文件（头文件、实现文件、资源与OtherLib第三方库）；
3. 在 AppDelegate 中配置 CocoaLumberjack 日志系统。

工程的文件结构可以参考下图，红框内就是二次开发最常打交道的 TYZRN 系列文件：

日志配置代码集中在 AppDelegate 中，使用 DDLog 输出到控制台与文件，方便你在扩展工具栏时追踪调用链：

快速理解源码结构：四大核心文件

开始改代码之前，先花两分钟认清这四类文件的分工，它们构成了整个编辑器的调用链：

在TYZRNEditorViewManager.m中可以看到桥接的完整形态：RCT_EXPORT_MODULE()导出模块，RCT_EXPORT_VIEW_PROPERTY(contentStr, NSString)导出初始化属性，RCT_EXPORT_METHOD(getContentStrMethod:)导出供 JS 调用的取内容方法。理解这层桥接，是扩展富文本功能的地基。

如何扩展富文本功能：工具栏按钮的完整生命周期

第一步：找到工具栏的"户口本"

富文本编辑器的格式栏由 WordPress-Editor-iOS 提供，核心文件位于ios/OtherLib/WordPress-Editor-iOS-develop/Classes/WPEditorFormatbarView.m，它负责渲染一排格式按钮；而按钮按下后的行为分发，则集中在WPEditorViewController.m（约 100~240 行）。工具栏的初始化、置灰逻辑、选中状态都在这个控制器里管理。

第二步：新增一个按钮

在WPEditorFormatbarView.xib中新增一个 BarButtonItem，然后在WPEditorFormatbarView.m里给它绑定action。接着在WPEditorViewController.m中实现对应的方法，调用editorView上已有的命令接口即可。以"插入引用"为例，最终执行的其实是 WebView 中的 execCommand，而这套命令体系封装在ZSSRichTextEditor.js中。

第三步：把按钮结果传回 JS

按钮触发的格式变更会通过editorFormatBarStatusChanged等代理方法通知，而内容变化则通过editorTextDidChange回调。TYZRNEditorViewController.m中的editorView:title:content:方法会把最新内容打包成字典，再由 Manager 层通过sendDeviceEventWithName:@"event"推送给 JS 侧，JS 端在TYZRNEditorView.js里用DeviceEventEmitter监听即可。一条从按钮到 JS 的完整链路就是：XIB 按钮 → 原生命令 → 内容变更事件 → 桥接 → JS 回调。

扩展 Markdown 编辑器：从高亮到预览

如果你更关心 Markdown 编辑器 TYZRNMKEditor 的二次开发，重点看两个文件：

• TYZRNMKEditor.m：负责初始化高亮文本框MKTextView、管理"预览/编辑"切换，以及键盘高度适配；
• TYZENMKPreView.m：负责把 Markdown 文本交给 MMMarkdown 转成 HTML，再通过 WebView 渲染预览。

想给 Markdown 编辑器增加新能力，最常见的两个切入点：一是修改TYZENMKPreView.m中的setBodyMarkdown:方法，自定义 HTML 模板（markdown.html）与样式（markdown.css）；二是扩展高亮规则，在MKMarkdownCodeBlockHighlighter等系列类中新增语法高亮器。预览切换的逻辑藏在rightButtonAction方法里，改标题、改按钮文案都很直观。

双向通信的三种姿势：属性、方法、事件

二次开发中 90% 的需求都能用这三种通信方式解决：

JS 组件TYZRNEditorView.js中getContentString()与getTitleString()展示了方法调用的写法，componentWillMount中注册的监听器则展示了事件接收的写法。想要新增"保存草稿"、"字数统计"之类的功能，照着这个模式复制即可。

调试建议：让扩展之路更顺畅

最后分享几条实用的调试经验，帮助你少走弯路：

• 打开TYZRNEditorViewManager.m里被注释掉的RCTLogInfo，可以在控制台看到完整的 HTML 源码，排查格式问题很管用；
• 图片上传的进度与失败逻辑在TYZRNEditorViewController.m的timerFireMethod:中，测试上传失败时放开注释掉的模拟代码即可；
• 修改OtherLib下的库文件后，记得在 Xcode 中执行 Clean 再编译，避免缓存导致改动不生效；
• 日志系统是二次开发的好帮手，editorDidFinishLoadingDOM等生命周期回调里多打日志，能帮你快速定位"内容没显示"的根因。

至此，你已经掌握了 TYZRNEditor 二次开发的核心脉络：从工程导入、源码结构，到富文本工具栏扩展、Markdown 预览增强，再到 JS 与原生双向通信。下一步，打开源码动手改一个按钮试试吧，相信很快你就能打造出属于自己的富文本编辑器。

【免费下载链接】Blum-auto-botBlum-auto-bot项目地址: https://gitcode.com/gh_mirrors/blumauto/Blum-auto-bot