APP长文本内容编辑器功能实现方案

背景

CSDN APP 中原有编辑器页面为纯H5适配，整体用户交互体验差，如何优化APP端编辑器用户体验是我们团队需要思考的问题。下面我们以iOS为例展开讨论。

一、方案调研

我们分析了几款国内内容发布的APP，如知乎、今日头条、简书，让我们来看看他们是如何实现APP编辑器功能的。

1、知乎APP编辑器实现方案

从图上可以看出：

a、知乎APP编辑器的输入标题内容为原生实现

b、知乎APP编辑器的正文部分为WebView

c、知乎APP编辑器的工具栏全部由原生实现

2、今日头条APP编辑器实现方案

从图上可以看出：

a、今日头条APP编辑器的输入标题内容与正文部分均为WebView实现

b、今日头条APP编辑器的工具栏全部由原生实现

3、简书APP编辑器实现方案

从图上可以看出：

a、简书APP富文本与MarkDown编辑器的内容区域(标题+正文)均为WebView实现，MarkDown预览功能也由WebView实现

b、简书APP编辑器的工具栏全部由原生实现

c、通过查看简书APP编辑器文件发现，编辑器是本地加载HTML JS等资源文件

综上所述，可以看出APP基本上都是是通过WebView + 原生交互方式来实现编辑器功能

方案选择

1、也是用Hybrid方案，由原生与H5混合开发。

2、将H5资源打包放到远端，APP首次打开应用，从远端下载编辑器资源包，本地加载资源文件。

3、如果资源版本发生变化，将从远程再次下载，覆盖原来本地资源。

4、通过JSBrigde 通信来实现工具栏与内容区域交互。

方案实现

1、资源下载

if (是否首次下载资源 || 是否需要更新资源) {
   //下载请求
   [CNNetManager getEditorResource:url {}];
}

2、功能结构

3、效果展示