需求

 原生支持富文本编辑，能插入图文视频，支持预览

问题

flutter inappwebview嵌入后由于富文本过长导致app crash

原本实现方案

使用webview + 本地html 实现富文本编辑，预览使用flutter加载webview动态注入富文本内容

Android: https://github.com/wasabeef/richeditor-android

iOS：https://github.com/cjwirth/RichEditorView

预览（flutter）：https://github.com/pichillilorenzo/flutter_inappwebview/tree/master/example

富文本生成

编辑的过程，主要通过模版html指定 <div class="editor"></div> 设置可编辑，插入图片时，通过

evaluateJavascript 执行预先写好的 js 函数，进行动态插入，并在页面变动时进行数据回调，主要通过 window.location.href 进行数据回传到native ，详细代码 可以参考 richeditor

富文本渲染

渲染过程，就是一个注入html的过程，写好模版html ，配置必备的注入js函数 

容器

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style='"margin: 0; padding: 0;'>
<div id="containerId">
</div>
</body>
</html>

注入函数

// 插入内容到容器 （需要原生调用 ）
function insertHtml(content){
    $("#containerId").html(content);
}

flutter调用,主要通过js接口执行注入函数

_controller.evaluateJavascript(source: "window.insertHtml('$richHtml}');");

问题

小米6加载超长文本，出现crash问题，也有华为手机偶发crash

日志

InAppWebView not displayed becaused it is too large to fit into software layer （or drawing cache），need 79144560 bytes，only 9849600 available

 猜测可能原因 js原生交互接口 数据限制，可以使用类似jsoup对于html进行解析并按长度拆分，分段传输和加载，最终定位问题为inappwebview限制了webview长度

最终解决方案，限定webview长度最高为屏幕高度，并通过滑动监听对于webview offset进行调整实现

参考自

Flutter 嵌套滚动的 WebView_东方睡衣的博客-CSDN博客_flutter webview 滑动

最终调整flutter页面布局解决

# flutter
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

华为技术专家出品，《华为开发者空间案例指南》带你玩转云上20+场景应用开发

avatar 华为开发者空间
cover

GaussDB高智能--智能优化器介绍

avatar 华为开发者空间
cover

在华为开发者空间，基于鲲鹏服务器快速开发打砖块小游戏

avatar 华为开发者空间