更新记录

1.0.0（2026-04-15）

• 初始版本发布
• 支持富文本排版所有基础功能
• 优化图片上传：压缩、重命名、居中显示
• 完善按钮高亮激活状态
• 修复已知运行报错问题

平台兼容性

uni-app(4.08)

其他

图文富文本编辑器（uniapp 专用）

基于 uni-app 原生 editor 组件封装的富文本编辑器，支持文字格式、段落对齐、引用、列表、分割线、图片压缩上传，开箱即用，适合文章发布、内容编辑、笔记排版。

功能特性

• ✅ 文字格式化：加粗、删除线，激活状态高亮显示
• ✅ 段落对齐：左对齐 / 居中对齐 / 右对齐
• ✅ 段落样式：引用、分割线
• ✅ 列表功能：有序列表、无序列表
• ✅ 图片上传（完整优化版），直接将图片上传到云存储
  • 自动压缩：宽度最大 1000px，高度自适应
  • UUID 重命名，防止文件重名冲突
  • 仅相册选择，不弹出相机选择菜单
  • 插入编辑器自动 90% 宽度 + 水平居中
• ✅ 按钮激活高亮：背景色 #cccccc，视觉清晰
• ✅ 基于 uni-app 原生 editor，稳定兼容
• ✅ 支持 uniCloud 云存储上传图片
• ✅ 界面简洁，可直接用于发布页面

平台兼容性

注意：图片上传功能需要开通 uniCloud 云存储服务

使用说明

1. 直接使用

<zmt-publish-article :content="{title:'默认标题',content:'默认内容'}" @submit="getContent"></zmt-publish-article>

参数说明

//获取编辑器的内容
getContent(e){
    console.log('获取到的编辑器的内容为',e);
}

//返回结果：
{
    "title": "默认标题啦啦啦啦",
    "content": "<p>默认内容啦啦啦啦兔兔</p>"
}

2. 图片上传（无需额外配置）

• 内置 uni.compressImage 图片压缩
• 内置 UUID 文件名生成
• 内置 uniCloud.uploadFile 上传逻辑
• 插入编辑器自动居中、90% 宽度显示

3. 样式说明

• 按钮激活高亮背景色：#cccccc
• 引用样式：左侧 5px #eee 边框
• 分割线：1px #eee
• 图片：90% 宽度、水平居中、上下边距自适应

功能方法

• formatText('bold') - 加粗切换
• formatText('strike') - 删除线切换
• formatText('align', 'left/center/right') - 段落对齐
• insertQuote() - 插入引用格式
• insertDivider() - 插入分割线
• insertUl() - 无序列表
• insertOl() - 有序列表
• chooseImage() - 选择并上传图片

更新日志

v1.0.0

• 初始版本发布
• 支持富文本排版所有基础功能
• 优化图片上传：压缩、重命名、居中显示
• 完善按钮高亮激活状态
• 修复已知运行报错问题

注意事项

1. 使用图片上传必须开通 uniCloud 云服务
2. 依赖 uni-app 官方原生 editor 组件
3. 建议在真机环境测试，体验更流畅
4. 样式、颜色、图标均可自由二次修改
5. 无后端依赖，不收集任何用户数据

适用场景

• 文章发布 / 编辑页面
• 社区发帖、评论编辑
• 笔记、备忘录、文案排版
• 移动端内容创作类 APP/小程序