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

news/2024/9/16 22:53:41/ 标签: 编辑器, ios

背景

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.ppmy.cn/news/1521802.html

相关文章

谷歌的 GameNGen:无需游戏引擎,人工智能模拟 “毁灭战士“,开辟新天地

谷歌公司的研究人员创建了一个神经网络,可以在不使用传统游戏引擎的情况下生成经典射击游戏《毁灭战士》的实时游戏,从而实现了人工智能领域的一个重要里程碑。这个名为 GameNGen 的系统标志着人工智能向前迈出了重要一步,它能在单芯片上以每…

淘客APP的前后端分离架构设计

淘客APP的前后端分离架构设计 大家好,我是微赚淘客返利系统3.0的小编,是个冬天不穿秋裤,天冷也要风度的程序猿! 在现代的软件开发中,前后端分离架构已经成为了一种主流的设计模式。这种架构模式将前端和后端的职责明…

[论文笔记] LLaVA

一、LLaVA 论文中的主要工作和实验结果 Existing Gap: 之前的大部分工作都在做模态对齐,做图片的 representation learning,而没有针对 ChatBot(多轮对话,指令理解)这种场景优化。 Contribution: 这篇工作已经在 BLIP-2 之后了,所以 Image 的理解能力不是 LLaVA 希望提升…

0902,DEQUE,LIST,VECTOR

目录 01_vector.cc 02_vector.cc 作业 01STL包括哪些组件?各自具有哪些特点? 02 序列式容器包括哪些?他们之间有哪些异同? 03 下面程序有什么错误? 04 创建和初始化vector的方法,每种都给出一个实例…

OpenCV Jet颜色映射和HSV颜色空间对比

目录 一、概述 二、Jet颜色空间映射 2.1优势 2.2颜色变化范围 2.3应用场景 三、HSV 颜色空间 3.1优势 3.2颜色分布 3.3应用场景 四、Jet与HSV区别 4.1对比总结 4.2选择建议 OpenCV图像处理与应用实战算法汇总地址: OpenCV 图像处理应用实战算法列表汇总…

Elasticsearch 再次开源

作者:来自 Elastic Shay Banon [D.N.A] Elasticsearch 和 Kibana 可以再次被称为开源了。很难表达这句话让我有多高兴。我真的激动得跳了起来。Elastic 的所有人都是这样的。开源已经融入我的 DNA,也融入了 Elastic 的 DNA。能够再次将 Elasticsearch 称…

电脑回收站被清空,怎么恢复丢失数据?

回收站,这个看似不太起眼的电脑功能,实际上在关键时刻能够为我们挽回重大损失,帮助我们重新获得至关重要的文件和数据。对于经常与电脑打交道的朋友们来说,当某个文件被不小心删除时,回收站往往成为我们文件找回和恢复…

【实战案例】项目经理和产品经理高效配合的秘诀:产品与项目关联

最近,不断收到关于项目经理岗位以及产品经理岗位相关的提问,比如: “产品经理和项目经理,有什么区别?” “产品经理和项目经理,哪个发展前景更好?” “产品经理和项目经理发生冲突&#xff0…

开源云原生数据库PolarDB PostgreSQL 15兼容版本正式发布

开源云原生数据库PolarDB PostgreSQL 15兼容版正式发布上线,该版本100%兼容开源PostgreSQL 15。PolarDB是阿里云自研云原生关系型数据库,基于共享存储的存算分离架构使其具备灵活弹性和高性价比的特性,在开源PostgreSQL很好的性能表现的基础上…

Matlab 并联双振子声子晶体梁结构带隙特性研究

参考文献:吴旭东,左曙光,倪天心,等.并联双振子声子晶体梁结构带隙特性研究[J].振动工程学报,2017,30(01):79-85. 为使声子晶体结构实现范围更宽的多带隙特性,基于单振子型声子晶体结构弯曲振动带隙频率范围窄的局 限,提出了一种双侧振子布置…

监理工程师职业资格考试

根据住房城乡建设部、交通运输部、水利部、人力资源社会保障部关于印发《监理工程师职业资格制度规定》《监理工程师职业资格考试实施办法》(建人规〔2020〕3号)文件精神,监理工程师职业资格考试实行全国统一大纲、统一命题、统一组织。 一、…

TikTok直播为什么要用独立IP

TikTok直播作为一种受欢迎的社交媒体形式,吸引了越来越多的用户和内容创作者。在进行TikTok直播时,选择使用独立IP地址是一种被广泛推荐的做法。本文将探讨为什么在TikTok直播中更推荐使用独立IP,并解释其优势和应用。 独立IP是指一个唯一的互…

Linux是如何收发网络包的

Linux网 络协议栈 从上述⽹络协议栈,可以看出: 收发流程 ⽹卡是计算机⾥的⼀个硬件,专⻔负责接收和发送⽹络包,当⽹卡接收到⼀个⽹络包后,会通过 DMA 技术,将⽹络包放⼊到 Ring Buffer ,这个是…

Identifying User Goals from UI Trajectories论文学习

通过UI轨迹识别用户的需求。 这篇论文同样聚焦于UI agent,只是思路比较特别。他们想要通过训练agent通过用户的行为轨迹反推出他们想要干什么的能力来锻炼agent识别,理解,使用UI的能力。同时这个训练项目本身也有一定的实际意义,…

RISC-V单片机智能落地扇方案

在众多产品中,智能落地扇产品凭借其出色的性能和质量优势,备受消费者青睐。智能落地扇有着卓越的性能和智能化的操作。 RAMSUN提供的智能落地扇方案主控单片机芯片采用RISC-V微处理器,内置高速存储器,最高工作频率可达144MHz&…

Mac基本使用记录

快捷键 将窗口拆分为两个面板Command-D关闭拆分面板Shift-Command-D 打开任务管理器 基本操作 在 Mac 上使用桌面叠放 - 官方 Apple 支持 (中国) commandc 复制 commandv 粘贴 聚焦 快捷键 commandspace 可以用于搜索文件,应用和网页等内容。 也…

TOMCAT实验

TOMCAT 一、TOMCAT功能介绍 1.1 安装TOMCAT 配置Java环境 [roottomcat1 ~]# yum install java-1.8.0-openjdk.x86_64 -y [roottomcat2 ~]# dnf install java-1.8.0-openjdk.x86_64 -yJava环境被存放在 /etc/alternatives/目录下 [roottomcat1 ~]# ls /etc/alternatives/…

软件测试 - 性能测试 (概念)(并发数、吞吐量、响应时间、TPS、QPS、基准测试、并发测试、负载测试、压力测试、稳定性测试)

一、性能测试 目标:能够对个人编写的项目进行接口的性能测试。 一般是功能测试完成之后,最后做性能测试。性能测试是一个很大的范围,在学习过程中很难直观感受到性能。 以购物软件为例: 1)购物过程中⻚⾯突然⽆法打开…

Java项目: 基于SpringBoot+mysql+mybatis校园管理系统(含源码+数据库+答辩PPT+毕业论文)

一、项目简介 本项目是一套基于SpringBootmysql校园管理系统 包含:项目源码、数据库脚本等,该项目附带全部源码可作为毕设使用。 项目都经过严格调试,eclipse或者idea 确保可以运行! 该系统功能完善、界面美观、操作简单、功能齐…

visual studio 2022更新以后,之前的有些工程编译出错,升级到Visual studio Enterprise 2022 Preview解决

系列文章目录 文章目录 系列文章目录前言一、解决方法 前言 今天遇到一个问题:visual studio 2022升级成预览版以后,之前的有些工程编译出错。首先代码、项目设置都没有改变,只是更新了visual studio 2022。 在编译工程时,编译器…