能否在Jetpack Compose中使用Accompanist WebView作为编辑器？

完全可以将Accompanist WebView改造为支持HTML编辑的组件，核心是利用WebView原生能力结合HTML的contenteditable属性，以下是具体实现方案：

1. 基础配置与核心实现 #

先确保项目引入Accompanist WebView依赖，然后在Compose中初始化WebView时开启必要的Web设置，并加载带编辑属性的HTML：

val webViewState = rememberWebViewState(url = "about:blank")
val webViewClient = remember { WebViewClient() }
val webChromeClient = remember { WebChromeClient() }

AndroidView(
    factory = { context ->
        WebView(context).apply {
            settings.javaScriptEnabled = true
            settings.domStorageEnabled = true
            settings.defaultTextEncodingName = "utf-8"
            // 开启编辑相关支持
            settings.mediaPlaybackRequiresUserGesture = false
            this.webViewClient = webViewClient
            this.webChromeClient = webChromeClient
        }
    },
    update = { webView ->
        // 加载可编辑的HTML模板
        val editableHtml = """
            <html>
                <body contenteditable="true" style="padding: 16px; font-size: 16px; min-height: 200px;">
                    <p>在这里编辑你的HTML内容...</p>
                </body>
            </html>
        """.trimIndent()
        webView.loadDataWithBaseURL(null, editableHtml, "text/html", "utf-8", null)
        // 强制请求焦点，确保能唤起键盘
        webView.requestFocus()
    },
    state = webViewState
)

2. 获取编辑后的HTML内容 #

如果需要提取用户编辑后的HTML，可通过WebView的evaluateJavascript方法读取页面内容：

// 示例：通过按钮触发内容获取
Button(onClick = {
    webViewState.webView?.evaluateJavascript("document.body.innerHTML") { rawContent ->
        // 去除返回字符串的首尾引号，得到干净的HTML
        val cleanedHtml = rawContent.removeSurrounding("\"")
        // 此处可对cleanedHtml进行保存或后续处理
    }
}) {
    Text("获取编辑内容")
}

3. 关键注意事项 #

• 焦点控制：必须调用webView.requestFocus()，否则WebView可能无法响应输入
• 样式定制：可通过修改注入的HTML样式，调整编辑器的字体、背景、间距等，匹配App视觉风格
• 兼容性：不同Android版本的WebView对contenteditable支持有细微差异，建议在目标版本真机测试
• 权限处理：若需加载本地资源或支持文件上传，需添加对应权限（如READ_EXTERNAL_STORAGE）

内容的提问来源于stack exchange，提问作者Slava