feat(shop): 商品管理编辑弹窗替换为WangEditor富文本编辑器
- 用户反馈编辑弹窗的Markdown编辑器体验差,采用website-admin的富文本编辑器替代 - 新增依赖@wangeditor/editor、@wangeditor/editor-for-vue、markdown-it及类型声明 - 新建RichTextEditor组件,去除Nuxt专用包装,适配现有文件上传接口 - shopGoodsEdit.vue移除MdEditor及相关冗余代码,改用RichTextEditor显示内容 - 实现编辑时Markdown内容转换为HTML,保持数据库存储格式新旧兼容 - 保存逻辑保持不变,提交内容为HTML格式 - 确认小程序端可兼容新旧内容格式,潜在HTML图片链接误解析风险 - build验证通过,文件产出正常,图片上传小程序域名白名单需上线后确认
This commit is contained in:
@@ -85,3 +85,31 @@
|
||||
- **⚠️ 上线前置动作(否则不生效)**:必须在 db_guilixu 执行该 SQL 加列,且 guilixu-java 需重新编译部署(实体加了字段)。
|
||||
- 此修复同时解决"运费模板"也存不进库的问题(同一根因,用户只报了 canExpress)。
|
||||
- 前端 运费模板 必填校验(save 内 `canExpress===1 && !expressTemplateId`)与动态 label 已早先存在,逻辑无需改。
|
||||
|
||||
## 商品管理编辑弹窗:Markdown 编辑器换成 WangEditor 富文本
|
||||
|
||||
### 需求
|
||||
用户反馈商品「编辑弹窗」的 Markdown 编辑器不好用,要求换成 website-admin 的 `app/pages/articles.vue` 那套编辑器。
|
||||
|
||||
### 方案(经评估后采用)
|
||||
- articles.vue 用的是 `app/components/RichTextEditor.vue`(WangEditor `@wangeditor/editor-for-vue`,输出 HTML),并非 Markdown。
|
||||
- 采用「编辑时按需转换」策略:**老商品 content 是 Markdown,编辑回显时用 markdown-it 转成 HTML 再进富文本编辑器;已是 HTML 则原样返回**。零 DB 风险,存储格式新旧混存。
|
||||
|
||||
### 改动清单
|
||||
1. **新增依赖**(guilixu-admin,pnpm):`@wangeditor/editor@^5`、`@wangeditor/editor-for-vue@^5`、`markdown-it@^14`、`@types/markdown-it@^14`(已写 package.json + node_modules)。
|
||||
2. **新建组件** `src/components/RichTextEditor.vue`:从 website-admin 的同名组件复制,**删除 Nuxt 专属 `<ClientOnly>` 包装**(guilixu-admin 是 Vite SPA 无此组件);图片上传用 `@/api/system/file` 的 `uploadFile`(返回 `res.url || res.path`,admin 已有)。
|
||||
3. **改造** `src/views/shop/shopGoods/components/shopGoodsEdit.vue`:
|
||||
- 移除 `MdEditor`(`md-editor-v3`)+ 相关 import / `markdownToolbars` / `onMarkdownUploadImg` / `editorVisible` watch / `disabled` ref / `editorRef` / 文件库 `SelectData` 弹窗(无打开入口,死代码)/ `:deep(.md-editor-*)` 样式。
|
||||
- 商品详情 tab 内改用 `<RichTextEditor v-model="content" :height="520" v-if="active==='content'"/>`(仅在 tab 激活时挂载,规避隐藏容器初始化宽度 0 问题)。
|
||||
- 新增 `md = markdownit()` 与 `toEditorContent(raw)`,编辑回显 `content.value = toEditorContent(props.data.content)`。
|
||||
- 补回被误删的 `FileRecord` import(chooseImage 等函数仍用)。
|
||||
4. **保存逻辑不变**:`save()` 已读 `content.value`,直接提交 HTML。
|
||||
|
||||
### 验证
|
||||
- `pnpm build`(vite build)通过,exit 0,dist 正常产出。
|
||||
|
||||
### 风险 / 待确认
|
||||
- **消费端(小程序 `guilixu-taro/src/pages/shop/product-detail.tsx`)已兼容两种格式**:`parseContent` 把 `` 转 `<img>`,其余 HTML 直接 `RichText nodes` 渲染 → 新旧 content 都能展示,不崩。
|
||||
- **潜在坑**:若 HTML content 里含裸 `.jpg` 链接(非 `<img>` 包裹,如 `<a href="https://x/x.jpg">`),`parseContent` 的兜底会把该 URL 误转成 `<img>` 破坏链接。WangEditor 产出的图片都是 `<img>`,正常商品详情极少触发,低概率。
|
||||
- `uploadFile` 返回的 `url` 是否为小程序域名白名单内完整 URL 需上线后在真机确认(影响商品详情页图片显示)。
|
||||
- 老商品仅在「重新编辑」时转 HTML;从未编辑过的老 Markdown 商品保持 Markdown,仍由小程序正确渲染。
|
||||
|
||||
Reference in New Issue
Block a user