更新记录

1.3.2（2026-08-26） 下载此版本

修复更多面板选单交互：

• 面板内行高/字间距/段前距/段后距选单不再收起更多面板（上版 togglePopover 误伤），面板保持展开供连续选择
• 四个选单改为锚点定位：出现在各自按钮正下方（原挂在面板底部右对齐，位置错乱）
• 移除废弃的 is-in-more 定位样式

平台兼容性

uni-app(5.24)

wc-editor 望潮富文本编辑器

基于 uni-app 官方 editor 组件 + editorContext API 封装的富文本编辑组件（easycom 自动注册）。双排工具栏 + 可收起的更多面板，只实现官方文档声明支持的能力。

官方文档：

• 组件：https://uniapp.dcloud.net.cn/component/editor.html
• API：https://uniapp.dcloud.net.cn/api/media/editor-context.html

数据源为 HTML 字符串（服务端 content 字段即 HTML，展示端 rich-text 直接渲染）。 平台支持：mp-weixin（基础库 2.7.0+）/ H5 2.4.5+ / App-vue 2.0+。

依赖

• wc-upload（图片上传默认适配器：选图 → OSS 直传 → 公网 URL）

工具栏图标为内联 SVG 图标集（Lucide 线性风格，24×24 / 2px 圆头描边），由 commons/icons.ts 生成 data URL，无字体文件、无第三方图标库依赖。

快速使用

<template>
    <wc-editor
        ref="editorRef"
        v-model="content"
        placeholder="请输入活动详情"
        :min-height="500"
        @ready="onReady"
    />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const content = ref('')
const editorRef = ref()

// v-model 之外也可主动读取
async function save() {
    const html = await editorRef.value?.getHTML()
}
</script>

v-model 绑定 HTML 字符串；编辑器内部对 change 事件做了 200ms 节流。

editorContext 获取方式（官方推荐）

uni.createSelectorQuery().in(this).select('#editor').context((res) => {
    this.editorCtx = res.context
}).exec()

组件内部即按此方式获取（勿用 wx.createEditorContext / uni.createEditorContext，均非官方跨端方式）。

功能清单（与官方 format 白名单一一对应）

待办列表为原生能力（list: check）：正文中的 checkbox 可直接点击切换勾选状态。

官方不支持、组件未实现（依据官方 format 白名单与支持标签清单）：

• 链接（link）：format 支持的样式列表中没有 link（<a> 虽是编辑器支持的展示标签，但无法通过 format 命令创建）
• 引用（blockquote）/ 代码块 / 表格：format 白名单与支持标签均无
• 视频 / 音频 / 文件直插：官方明确"不能直接插入"，建议用图片占位 + insertImage 的 data 属性存元数据，预览时还原（V1.1 扩展方向）

Properties

toolbarConfig 默认值

{
  undo: true, redo: true, image: true,
  bold: true, italic: true, list: true, align: true,
  more: {
    todo: true, divider: true, strike: true, underline: true,
    ins: true, sub: true, super: true, indent: true,
    lineHeight: true, letterSpacing: true, paragraphMargin: true, clearFormat: true,
  },
}

Events

Methods（ref 调用）

execCommand 支持的 name：undo redo bold italic underline strike ins script header fontSize color backgroundColor align list indent lineHeight letterSpacing marginTop marginBottom insertDivider insertText insertImage（字符串或 {src, alt, data, width} 对象）removeFormat scrollIntoView。

已知边界（官方行为）

1. 图片先上传后插入：上传中显示遮罩，成功后插入远端 URL；插入统一 width: '100%' 通栏。
2. 导出 html 的渲染样式：在其它环境（如 rich-text）渲染编辑器导出的 html 时，官方说明需自行维护 <ql-container><ql-editor> 结构样式。
3. 粘贴为纯文本：官方行为，粘贴仅保留文字。
4. 插入非法标签会被清理：setContents 的 html 含不支持标签时会被编辑器规范化（div → p 等）。

目录结构

wc-editor/
├── components/wc-editor/wc-editor.vue   # easycom 组件
├── commons/config.ts                    # 默认色板 / 字号 / 段落 / 工具栏配置
├── package.json
├── readme.md
└── changelog.md