下面的两个示例已由 Compose Multiplatform 直接编译为 WebAssembly 与 JavaScript。 点击进入,即可在浏览器中体验与 Android / Desktop 一致的富文本编辑行为。
由 Kotlin/Compose 编译为 WebAssembly,渲染与编辑逻辑贴近原生, 适合评估工具栏、IME 与块级编辑的真实表现。
纯 JavaScript 输出,无需 WASM 运行时。适合在更多浏览器与低端设备上验证功能。
从基础格式到块级结构,从智能粘贴到表情与表格,ComposeRichEditor 把 一份完整的富文本编辑体验带进 Compose Multiplatform。
基于 BasicTextField 与 AnnotatedString,内置加粗、斜体、下划线、上下标、文字与背景颜色、字号等行内样式。
支持超链接插入与样式,选中区域感知链接行为,适配桌面与移动端选择交互。
自定义表情插入与渲染,构建品牌化或业务专属的表情面板。
块级编辑器,支持文本块、表格、块导航与共享的浮动工具栏。
智能识别纯文本、Markdown、HTML 与富 JSON 的粘贴内容并保持结构。
完整撤销/重做,以及将富文本内容以 JSON 序列化与恢复,便于本地存储与跨设备同步。
段落对齐与段落模型双向同步,排版行为与 Compose Text 体系保持一致。
针对 Android / iOS / Desktop / Web 各自的 IME、剪贴板、上下文菜单与键盘行为做了平台专有实现,commonMain 不会触及平台 API。
核心、组件、块级与示例,职责清晰,可按需引入,也可基于源码集成。
三个发布模块共同构成组件能力,另含一组跨平台示例应用,覆盖 Android、iOS、Desktop 与 Web。
查看 Maven Centralio.github.taocent:compose-richtext-core
io.github.taocent:compose-richtext
io.github.taocent:compose-block-richtext
各平台的示例与集成参考
每个平台都享有与之相称的实现细节:Android 上的 IME 选区与剪贴板,iOS 上专门处理的 CJK 输入,Desktop 的键盘选择,以及 Web 的渐进式构建。
主要移动端目标。IME、选区、工具栏与剪贴板行为经过充分测试。
Supported使用平台专有的 IME 合成处理,保证中日韩输入的稳定与连贯。
Supported完整支持键盘选区、工具栏交互与桌面级富文本编辑体验。
Supported构建目标已就绪,浏览器输入与剪贴板行为正在持续完善。
Experimental标准富文本编辑器与块级编辑器分别提供了简洁的入口。alpha 阶段,API 仍可能微调。
在 build.gradle.kts 中加入依赖即可使用。
本地开发也可以直接以 project(":…") 形式集成模块。
// ① 引入依赖 dependencies { implementation("io.github.taocent:compose-richtext-core:0.1.0-alpha01") implementation("io.github.taocent:compose-richtext:0.1.0-alpha01") implementation("io.github.taocent:compose-block-richtext:0.1.0-alpha01") } // ② 标准富文本编辑器 import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import com.taocent.simple.compose.component.richtext.RichTextEditor import com.taocent.simple.compose.component.richtext.rememberRichTextState @Composable fun EditorScreen() { val state = rememberRichTextState() RichTextEditor( state = state, modifier = Modifier.fillMaxSize(), placeholder = "Start writing…" ) }