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.mzph.cn/news/878317.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

华为海思招聘-芯片与器件设计工程师-数字芯片方向- 机试题——(共九套)(每套四十题)

华为海思招聘-芯片与器件设计工程师-数字芯片方向- 机试题-题目分享——共九套(每套四十题) 岗位——芯片与器件设计工程师 岗位意向——数字芯片 真题题目分享,完整版带答案(有答案和解析,答案非官方,未仔细校正&am…

不再畏惧猫咪浮毛,希喂、安德迈、美的宠物空气净化器性能PK

夏天来了,宠物换毛季加上天气闷热,难消的异味和漫天乱飞的猫毛双重夹击,家里的空气质量直线下降。还是鼻炎患者的我感到非常不适,有股想把家里两只毛孩子逐出家门的冲动。每天不是梳毛就是在吸毛的路上,猫咪们还爱到处…

若依 Vue3的前后端分离系统管理 创建

RuoYi 若依官方网站 |后台管理系统|权限管理系统|快速开发框架|企业管理系统|开源框架|微服务框架|前后端分离框架|开源后台系统|RuoYi|RuoYi-Vue|RuoYi-Cloud|RuoYi框架|RuoYi开源|RuoYi视频|若依视频|RuoYi开发文档|若依开发文档|Java开源框架|Java|SpringBoot|SrpingBoot2.0…

uniapp 封装uni.login 实现全局调用

封装utils app.vue中 使用globalData 注册 utils 页面中使用方法 定义app 调用方法

【Docker】个人笔记

文章目录 Docker三个基本概念镜像(Image)容器(Container)仓库(Repository) Docker命令基础命令查看版本信息显示详细信息从仓库拉取镜像列出本地存储的镜像删除一个或多个镜像列出所有运行中的容器运行一个新的容器停止一个运行中的容器启动一个已停止的容器重启一个容器删除一…

回归预测|基于卷积神经网络-鲸鱼优化-最小二乘支持向量机的数据回归预测Matlab程序 CNN-WOA-LSSVM

回归预测|基于卷积神经网络-鲸鱼优化-最小二乘支持向量机的数据回归预测Matlab程序 CNN-WOA-LSSVM 文章目录 一、基本原理1. 数据预处理2. 特征提取(CNN)3. 参数优化(WOA)4. 模型训练(LSSVM)5. 模型评估和优…

(最新)华为 2024 届秋招-硬件技术工程师-单板硬件开发—机试题—(共12套)(每套四十题)

(最新)华为 2024 届秋招-硬件技术工程师-单板硬件开发—机试题—(共12套)(每套四十题) 岗位——硬件技术工程师 岗位意向——单板硬件开发 真题题目分享,完整版带答案(有答案和解析&#xff0…

单位的一位干部去世了,该单位领导参加他的追悼会致辞是这样写的?

单位的一位干部去世了,该单位领导参加他的追悼会致辞是这样写的? 这是一篇单位工会领导参加本单位一位普通干部追悼会的致词 (范文点评) 胡某晔同志追悼会悼词 各位来宾、各位亲友: 今天,我们怀着十分沉痛…

基于深度学习的单目标跟踪系统

基于深度学习的单目标跟踪,效果吊打传统算法,3060显卡上达到实时,代码python和c两个版本都有。 基于深度学习的单目标跟踪系统是一种先进的计算机视觉技术,它可以实现实时的、高精度的目标跟踪。与传统的基于特征匹配或模板匹配的…

【宝马中国-注册/登录安全分析报告】

前言 由于网站注册入口容易被黑客攻击,存在如下安全问题: 暴力破解密码,造成用户信息泄露短信盗刷的安全问题,影响业务及导致用户投诉带来经济损失,尤其是后付费客户,风险巨大,造成亏损无底洞…

关于武汉芯景科技有限公司的实时时钟芯片XJ8337开发指南(兼容DS1337)

一、芯片引脚介绍 1.芯片引脚 2.引脚描述 二、系统结构图 三、功能描述 1.时钟功能 2.闹钟功能(两个闹钟) 3.振荡器停止控制 4.频率输出(1HZ、1.096KHZ、8.192KHZ、32.768KHZ) 5.振荡器停止检测 6.闹钟中断标志 四、程序代…

#C++ 笔记三

七、异常处理 1.概念 异常是程序在执行期间产生的问题。 C异常是指在程序运行时发生的特殊情况,比如下标越界等。 异常提供了一种转移程序控制权的方式。 2.抛出异常 throw语句的操作数可以是任意表达式,表达式结果的类型决定了抛出异常的类型。 …

进程和线程(操作系统八股文part2)

一个操作系统的进程和线程部分的笔记,大部分来源于:小林coding和Javaguide,以及操作系统黑书。 进程和线程 什么是进程 运行中的程序叫进程**(Process)**。 进程是资源分配的最小单位,线程是执行的最小…

redis分布式是如何实现的(面试版)

需要结合项目中的业务进行回答,通常情况下,分布式锁使用的场景:集群情况下的定时任务、抢单、幂等性场景。 下面先来看一个抢卷场景: 以下情况会出现超卖情况: 因为线程会交替执行,所以线程查询优惠价的数…

Socket编程---UDP篇

目录 一. UDP协议 二. Socket编程 2.1 sockaddr家族 2.2 接口介绍 三. 服务端实现 四. 服务端调用实现 五. 客户端实现 六. 效果展示 一. UDP协议 何为UDP协议的含义,上篇粗略提及了一下TCP与UDP的区别: TCP: •…

SpringBoot集成kafka-消息转发@sendTo()注解

SpringBoot集成kafka-消息转发sendTo 1、消费者2、生产者3、实体类对象4、JSON工具类5、配置文件application.yml6、测试类7、测试 1、消费者 启动消费者进行消息监听,消费者A监听到生产者发送的消息使用sendTo()注解将消息转发给消费者B package com.power.consu…

Django+Vue二手交易平台的设计与实现

目录 1 项目介绍2 项目截图3 核心代码3.1 需要的环境3.2 Django接口层3.3 实体类3.4 config.ini3.5 启动类3.5 Vue 4 数据库表设计5 文档参考6 计算机毕设选题推荐7 源码获取 1 项目介绍 博主个人介绍:CSDN认证博客专家,CSDN平台Java领域优质创作者&…

cesium 地形获取和生成

1.先从网上下载12.5m精度的地形,然后叠加无人机的地形数据 2.使用global mapper pro合并并导出完整的tiff 3.使用cesiumLab进行tiff的文件数据切片生成terrain格式的数据

.NET HandyControl 深度解析:一个现代化的UI控件库

文章目录 前言一、选择HandyControl的原因二、如何使用HandyControl1.安装HandyControl2.使用代码例子 总结 前言 在.NET开发领域,UI(用户界面)设计的美观性和易用性对于应用程序的成功至关重要。为了帮助开发者快速构建现代化、美观且用户友…

如何使用住宅代理获取价格对比和更多选择

在购物和预订过程中,网站通常会根据用户的地理位置提供不同的价格和库存信息。这种做法称为地理定价或区域定价。使用静态住宅代理可以帮助用户准确查看他们想要了解的区域,获得更多选择和更优惠的价格。 查找更低的价格: 价格差异&#xff1…