flutter 富文本思考

https://flutter.cn/docs/get-started/install/windows

https://pub-web.flutter-io.cn/packages/flutter_widget_from_html

1 如何保证多渠道内容

方案一: 直接使用基本的 html 格式来存储 特殊信息使用 自定义属性来做区分 自定义属性来做信息存储

app 端使用 flutter_widget_from_html 将html 转换成 原生组件

web端 css 属性选择器进行 css 注入

需要存储@的相关信息

实现思路:

网页做输入,重写富文本编辑器

优点: 只需要解析特定标签的属性值 为特定组件

缺点:

html 不同解析器 可能解析的样式不一样

方案二: 将所有信息使用数组来存储 ,数组内存储不同节点的信息,然后按照信息的类别 逐条进行信息拼接

app 端 和 web 按照同一套解析规则 来解析

方案三:如果只有图文 链接 @ # 等特殊格式的内容, 存储时 图片单独字段 文字单独字段,@信息单独字段 #信息单独字段。渲染时 @ 和 # 按照格式进行 样式渲染。点击触发时再查询节点信息 做处理。

4、技术思路

通过分析业内的主流实现,@人功能的技术实现思路大致如下:

1)监听用户输入,匹配用户以@开头的文字;

2)调用搜索弹窗,展示搜索出来的用户列表;

3)监听上、下、回车键控制列表选择,监听ESC键关闭搜索弹窗;

4)选择需要@的用户,把对应的HTML文本替换到原文本上,在HTML文本上添加用户的元数据。

https://www.sohu.com/a/506642053_100038287#google_vignette

需要考虑的问题

1 如@ # 特定内容的输入

2 不同平台的 如何解析 @ # 等的特殊内容

3 实现的难点 和 花费的时间

1 网页做内容输入 =》富文本 难点

https://react-mentions.vercel.app/

https://github.com/codex-team/editor.js

editorjs富文本编辑器 ==》实现插件的形式

https://editorjs.io/

wangeditor 富文本编辑器 ==》调用api 新增功能

https://www.wangeditor.com/v5/for-frame.html#demo-2

2 app 多内容输入 =》 难点

不同端多内容解析

相关推荐
千逐6813 分钟前
《Flutter for OpenHarmony:星轨天气的粒子化气象宇宙可视化系统》
flutter
晚霞的不甘1 小时前
Flutter for OpenHarmony 实现计算几何:Graham Scan 凸包算法的可视化演示
人工智能·算法·flutter·架构·开源·音视频
千逐681 小时前
气象流体场:基于 Flutter for OpenHarmony 的实时天气流体动力学可视化系统
flutter
一只大侠的侠1 小时前
Flutter开源鸿蒙跨平台训练营 Day12从零开发通用型登录页面
flutter·开源·harmonyos
晚霞的不甘2 小时前
Flutter for OpenHarmony天气卡片应用:用枚举与动画打造沉浸式多城市天气浏览体验
前端·flutter·云原生·前端框架
子春一2 小时前
Flutter for OpenHarmony:语桥 - 基于Flutter的离线多语言短语速查工具实现与国际化设计理念
flutter
一只大侠的侠3 小时前
Flutter开源鸿蒙跨平台训练营 Day 15React Native Formik 表单实战
flutter·开源·harmonyos
ujainu3 小时前
《零依赖!用 Flutter + OpenHarmony 构建鸿蒙风格临时记事本(一):内存 CRUD》
flutter·华为·openharmony
renke33643 小时前
Flutter for OpenHarmony:光影迷宫 - 基于局部可见性的沉浸式探索游戏设计
flutter·游戏
晚霞的不甘3 小时前
Flutter for OpenHarmony实现 RSA 加密:从数学原理到可视化演示
人工智能·flutter·计算机视觉·开源·视觉检测