当前位置: 首页 > article >正文

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、效果展示

请添加图片描述
请添加图片描述
请添加图片描述


http://www.kler.cn/news/288803.html

相关文章:

  • MySQL之UDF提权复现
  • 老师怎样发布新生月考成绩查询?
  • 车载测试协议:ISO-14229、ISO-15765、ISO-11898、ISO-26262【实操项目学习】
  • jmeter中上传文件接口,当文件名为中文时出现乱码
  • JPG转SVG,分享便捷的转换方法
  • 【EI稳定检索】2024年第三届环境工程与可持续能源国际会议
  • 【SpringBoot】自动配置原理
  • MySQL知识点复习 - 事务篇
  • Linux性能调优,从优化思路说起
  • MariaDB VS MySQL
  • Python数据分析实战,兰州市二手房市场深度分析
  • 【从问题中去学习k8s】k8s中的常见面试题(夯实理论基础)(二十一)
  • Unity 不规则进度条显示根据点对点进行
  • yolov9目标检测pyside6可视化检测界面python源码-用于计数统计-摄像头可用
  • jquery swiper插件的用法
  • c++vscode多文件实现通讯录管理系统
  • DRY原则-用函数和模块化来避免重复代码
  • 算法训练营|图论第6天 108.冗余连接 109.冗余连接2
  • 【黑马点评】达人探店
  • 使用sass的混合插入模式进行@media响应式媒体查询做自适应开发
  • Github 2024-08-28 C开源项目日报 Top9
  • 算法笔试-编程练习-好题-03
  • 前端框架大观:探索现代Web开发的基石
  • react- native创建pdf
  • mysql学习教程,从入门到精通,MySQL介绍(1)
  • 设计模式及创建型模式-python版
  • C++ Qt进程间通信机制之QRO、QRemoteObjectHost
  • Anaconda安装并配置Python环境 | Python系列教程
  • 把设计模式用起来!(一)——楔
  • 【日常记录-JS】HTML5中使用SVG元素