如何用TYZRNEditor获取编辑内容：getContentString与getTitleString方法实战

如何用TYZRNEditor获取编辑内容：getContentString与getTitleString方法实战

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

在React Native开发中，TYZRNEditor是一款非常实用的原生富文本编辑器组件，它最大的魅力在于：编辑器界面由iOS原生实现，而业务逻辑全部由JavaScript层控制。很多新手刚接触TYZRNEditor时，最头疼的问题就是——用户编辑完内容后，如何把编辑内容从原生编辑器里取出来？别担心，这篇文章就是为你准备的。本文将带你一步步掌握getContentString获取正文内容与getTitleString获取标题内容两个核心方法，让你轻松打通"编辑→取值→保存"的完整流程。

认识TYZRNEditor：一次了解它的两大组件

TYZRNEditor项目基于React Native与Native UI相结合，专为iOS平台打造，提供了两类编辑器组件：

简单来说，富文本编辑器适合做"所见即所得"的图文编辑，比如写博客、发帖子；Markdown编辑器则适合喜欢纯文本标记的写作者。而今天的主角getContentString与getTitleString正是富文本编辑器 TYZRNEditorView对外暴露的两个取值方法。

为什么要获取编辑内容？常见应用场景

在动手写代码之前，先想清楚你的业务需求。绝大多数场景都离不开"读取编辑内容"这一步：

• 📝文章发布：用户在编辑器里写完标题和正文，点击"发布"按钮时需要读取内容并提交到服务器。
• 💾草稿自动保存：定时或退出时读取编辑内容，保存为本地草稿，防止用户数据丢失。
• 🔄内容回显：编辑已有文章时，先把旧内容传入编辑器，修改后再取回最新内容。

无论是哪种场景，getContentString（取正文）和getTitleString（取标题）都是你绕不开的"关键钥匙"。

getContentString方法实战：一步步获取正文内容

先来看方法在JS层的定义，位于 TYZRNEditorView.js：

//获取编辑器内容 getContentString: function() { TYZRNEditorViewManager.getContentStrMethod((error, events) => { if (error) { console.error(error); return null; } else { this.setState({ contentStr: events }); return events; } }); }

可以看到，这个方法调用原生模块TYZRNEditorViewManager的getContentStrMethod，通过回调拿到编辑内容，并同步到组件的contentStr状态中。调用方式非常简单：

// 获取富文本编辑器里的正文内容 var content = this.refs.EditorView.getContentString(); console.log('当前正文内容：' + content);

理解原生层的实现

想深入理解的朋友可以看一下iOS原生实现 TYZRNEditorViewManager.m：

RCT_EXPORT_METHOD(getContentStrMethod:(RCTResponseSenderBlock)callback) { dispatch_async(dispatch_get_main_queue(), ^{ callback(@[[NSNull null], [self getContentStr]]); }); }

原生层通过RCT_EXPORT_METHOD把方法暴露给JS层，取到editorView.contentStr后通过回调返回。整个过程JS与原生配合默契，你完全不用关心底层的UIWebView细节。

getTitleString方法实战：轻松读取文章标题

标题和正文往往需要一起读取，TYZRNEditor当然也为你准备好了对应的方法。同样是定义在 TYZRNEditorView.js 中：

//获取编辑器内容题目 getTitleString: function() { TYZRNEditorViewManager.getTitleStrMethod((error, events) => { if (error) { console.error(error); return null; } else { this.setState({ titleStr: events }); return events; } }); }

用法和getContentString完全对称：

// 获取编辑器里的文章标题 var title = this.refs.EditorView.getTitleString(); console.log('当前标题：' + title);

组合使用：一次取出标题与正文

在实际开发中，我们通常会在点击"保存"按钮时同时获取标题和正文，形成完整的数据对象：

_saveArticle: function() { var title = this.refs.EditorView.getTitleString(); var content = this.refs.EditorView.getContentString(); // 组装数据，提交给后端或存入本地 var article = { title: title, content: content, updatedAt: Date.now() }; console.log('保存文章：', article); // 这里可以调用你的保存接口... }

完整示例：从页面搭建到内容获取

为了让你看得更明白，这里给出一个完整的页面示例（参考 TYZEditorViewComponent.js 的写法）：

var TYZRNEditorView = require('./TYZRNEditorView'); var EditorPage = React.createClass({ render: function() { return ( <TYZRNEditorView style={styles.contentStyle} ref='EditorView' contentStr='这是初始化的测试内容' titleStr='这是一个标题' backAction={this._backAction} /> ); }, _backAction: function() { this.props.navigator.pop(); } });

上面代码中，ref='EditorView'就是关键——之后你可以随时通过this.refs.EditorView调用getContentString()和getTitleString()。同时注意初始化时传入的contentStr与titleStr，它们决定了编辑器首次加载时显示的内容，非常适合"编辑已有文章"的场景。

新手常见问题与注意事项

在实战中，这几个问题出现频率最高，提前帮你避坑：

• ⚠️this.refs.EditorView为 undefined：请确认渲染<TYZRNEditorView>时已经正确设置了ref='EditorView'。
• ⚠️取回内容为空：先检查初始化时是否传入了contentStr和titleStr，并确认编辑器已经完成加载。
• ⚠️回调里的返回值：getContentString和getTitleString内部通过回调异步取值，如果需要在回调完成后立即处理数据，建议在调用方法后基于state中的contentStr/titleStr读取，或自行封装 Promise。
• 💡编辑器内容变化事件：原生层通过DeviceEventEmitter发送event事件，内容变化时会自动同步到组件的 state，你也可以监听该事件实现实时预览。

总结：三步走，搞定编辑内容获取

回顾一下今天的实战内容，获取编辑内容只需要三步：

1. 引入组件：在页面中导入并渲染TYZRNEditorView，设置好ref。
2. 调用方法：需要取值时，调用this.refs.EditorView.getContentString()获取正文、this.refs.EditorView.getTitleString()获取标题。
3. 处理数据：把取到的内容用于保存、提交或预览。

掌握了getContentString与getTitleString这两个核心方法，你就已经掌握了TYZRNEditor数据交互的"半壁江山"。快去动手试一试，把用户编辑的每一段文字都稳稳地握在手中吧！🚀

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