更新记录

1.0.0（2026-11-11） 下载此版本

• 首个版本，按 uni_modules 规范发布：uni_modules/czh-edit，支持插件市场一键导入与从市场更新
• 组件标签为 <czh-edit>，easycom 自动扫描，页面里不需要 import 或注册
• 基于 uni-app x <editor> 组件：固定双行工具栏，第一行插图 / 文字样式 / 分割线 / 撤销 / 重做 / 发布，第二行加粗 / 斜体 / 下划线 / 标题 / 居中 / 居右
• 工具栏按钮状态随光标位置自动高亮（statuschange），发布时通过 editOk 回调 html / text / delta
• 图标随插件分发（static/edit，12 字形 × 默认/激活两色共 19 张 PNG），组件内以 /uni_modules/czh-edit/static/edit/... 引用，导入即用
• 图标字体源 fonts/jin-font.ttf 一并分发，重做/扩充图标时直接用它重新导出 PNG，不参与运行
• 页面契约：需 custom 导航并自绘 statusBarHeight + 44 头部，工具栏按此定位
• 不使用 uni.upx2px（鸿蒙端未实现，调用报 undefined is not callable），rpx 换算改为按窗口宽度计算
• 微信小程序端获取编辑器上下文改走选择器：uni.createEditorContextAsync 在该端查不到自定义组件内的 #czhEditor，会导致初始 html 不回填、工具栏按钮全部失效

平台兼容性

uni-app x(5.08)

其他

czh-edit 富文本编辑器（uni-app x）

基于 uni-app x <editor> 组件的富文本编辑器，固定双行工具栏：

• 第一行：插图 / 文字样式 / 分割线 / 撤销 / 重做 / 发布
• 第二行（点「文字样式」展开）：加粗 / 斜体 / 下划线 / 标题 / 居中 / 居右

工具栏按钮状态随光标位置自动高亮（statuschange），发布时把编辑器内容通过 editOk 回调抛给页面。 组件为 uni-app x（uvue + UTS + Vue3 组合式 API）实现，easycom 直接使用，无需注册。

安装

已按 uni_modules 规范发布，二选一：

• 插件市场：插件详情页点「使用 HBuilderX 导入插件」，选择目标项目，导入后自动落在 uni_modules/czh-edit；
• 手动：把 uni_modules/czh-edit 整个目录复制到项目根目录的 uni_modules 下。

uni_modules/czh-edit/
├─ package.json
├─ readme.md
├─ changelog.md
├─ components/czh-edit/
│  ├─ czh-edit.uvue                    编辑器主体（<czh-edit>）
│  └─ czh-edit-icons.uvue              工具栏图标
├─ static/edit/                        19 张工具栏图标（12 字形 × 默认/激活两色）
└─ fonts/jin-font.ttf                  图标字体源文件，重做图标时用，不参与运行

组件位于 uni_modules/*/components/组件名/组件名.uvue，符合 easycom 自动扫描规则：页面里直接写 <czh-edit>， 不需要 import，也不需要注册。图标以 /uni_modules/czh-edit/static/edit/... 引用，导入即用，不需要往项目 static 里拷图。

仅支持 uni-app x（uvue），不支持 uni-app（vue2/vue3）。

使用方式

页面需 custom 导航并自绘 44px 头部（工具栏按 statusBarHeight + 44 定位）：

{
    "path": "pages/edit/edit",
    "style": {
        "navigationStyle": "custom"
    }
}

<czh-edit placeholder="请输入内容" :html="initialHtml" @editOk="onEditOk"></czh-edit>

// res 为 UTSJSONObject：{ html: string, text: string, delta: 编辑器原始操作记录 }
const onEditOk = (res : UTSJSONObject) => {
    const html = `${res['html'] ?? ''}`
}

Props

Events

结构

• components/czh-edit/czh-edit.uvue：编辑器主体，工具栏 + <editor>，管理 EditorContext 与按钮状态。
• components/czh-edit/czh-edit-icons.uvue：工具栏图标，按 icon + active 拼出 static/edit 下的 PNG 路径。
• static/edit/*.png：12 个字形 × 默认/激活两色共 19 张（divider 等无激活态）。 原版是 alicdn 的 jin 远程字体图标，本移植用同名字体预渲染成 PNG，避免依赖外网字体。
• fonts/jin-font.ttf：上面这批 PNG 的字体源文件（原版 alicdn jin 字体的本地留存）。 只用于重做图标时重新导出 PNG，运行时不引用，也不放在 static/ 下——那份会被打进 App 包。
• 接入示例：本示例工程 pages/index/index.uvue（自绘头部 + 发布结果面板，展示 editOk 返回的 html / text）。

相对原版的平台性调整

1. 图标：jin-icons 的远程 iconfont（alicdn jin 字体）渲染为插件内 static/edit/ 下 19 张 PNG （12 字形，7 个状态切换类含 #F56C6C 激活色变体），颜色取自原版 CSS； 字体源文件 fonts/jin-font.ttf 随插件分发，改图标时用它重新导出 PNG 覆盖 static/edit/ 即可；
2. EditorContext 获取：原版 createSelectorQuery().fields({context:true}) 在 uni-app x 不可用， 改为 uni.createEditorContextAsync({ id, component })（在组件内使用必须传 component 实例）；
3. statuschange 字段差异（依据 uni-app x 类型声明）：下划线态由 detail.underline 上报 （原版检查 ins 键），header 为 number（原版按键存在性判断）；
4. format 关闭值：value 类型为 string | number | null，原版的 false 改为 null；
5. showMore 的残留调用：原版展开样式栏时空参 setContents()（会把内容置空，疑似笔误）， 改为 blur() 收起键盘；
6. 未随迁的属性：uploadFileUrl / fileKeyName / header（原版声明了但从未使用）——插入的是 本地临时图片路径，业务侧在 editOk 后自行上传替换 html 内的本地路径； $scrollHeight 全局 mixin 改为窗口信息计算；
7. CSS：calc(100% - 60rpx) 改为等价 padding、100vw/100vh 改 100%、 删除原版未使用的 .setting-layer* 死样式与 transition；
8. rpx 换算：uni.upx2px 是旧版 uni-app 的 API，鸿蒙端没有实现（调用直接报 undefined is not callable），组件内改用按 750 设计宽度换算的本地 rpx2px()， 三端行为一致（uni-app x 官方对应 API 是 uni.rpx2px，但集中在本地算更稳）；
9. 微信小程序端获取 editor 上下文：uni.createEditorContextAsync 在 MP-WEIXIN 下内部直接用 原生 wx.createSelectorQuery().in(component)，没有像 uni.createSelectorQuery 那样把组件实例换成 原生实例（取 $scope）。组件是自定义组件时，选择器跨不过组件边界，查不到 #czhEditor， success 永不回调 —— 表现为初始 html 不回填、工具栏按钮也全部无效。因此小程序端改走 setup 阶段缓存组件实例后，通过 uni.createSelectorQuery().in(component).select('#czhEditor').context(...)， 其它端仍用 createEditorContextAsync（条件编译隔离）。

平台兼容性（来自 uni-app x 官方文档）

• editor 组件：Web 4.0+ / 微信小程序 4.41+ / iOS 5.08+ / HarmonyOS 5.08+ / Android 7.1.1+
• EditorContext 方法（setContents / insertImage / insertDivider / format / undo / redo / getContents / blur 等）：全平台 5.08+
• 注意：placeholder 与 show-img-* 仅初始化时生效；失焦状态下直接 format 会被后续聚焦覆盖， 需 readOnly + setTimeout 变通（见官方 editor 文档 tips）

注意事项

• 工具栏用 position: fixed + top: statusBarHeight + 44 定位，页面必须是 custom 导航并自绘同规格头部， 否则工具栏会盖住系统导航栏或与标题错位；
• 组件高度默认取 windowHeight，页面把它放在流式布局里时建议显式传 height（内容区高度）， 避免与自绘头部叠加导致底部溢出；
• 插图插入的是本地临时路径，editOk 后需要业务侧自行上传并把 html 内的本地路径替换成远程地址。