web-data-editor

一个 npm 包：在目标网页里用 data-* 标注可编辑区域，然后在后台侧通过 iframe 引入目标页，自动扫描生成 Draft-07 JSON Schema + JSON Forms uischema，并提供一个 Vue3 编辑器组件（表单 + 可选实时回写预览）。

注意：要让编辑器能读写 iframe DOM，需要目标页同源；跨域场景建议通过反向代理把目标页变成同源地址。

1. 安装

npm i web-data-editor

1.1 Vue2/webpack4 注意事项

• web-data-editor/vue2 是导入子路径，不是 npm 包名。
• 不要执行 npm i web-data-editor/vue2，正确安装命令仍是：npm i web-data-editor
• Vue2 兼容范围：>=2.6.10（推荐升级到 2.6.14+）
• vue-cli4(webpack4) 项目如果子路径解析异常，可改用兜底导入：web-data-editor/dist/vue2/index.cjs

2. 最小使用（Vue）

<template>
  <WebDataEditor
    iframe-src="/target.html"
    :initial-values="initialValues"
    :live-preview="true"
    default-form-engine="element"
    :on-change="onChange"
  />
</template>

<script setup lang="ts">
import { WebDataEditor } from 'web-data-editor';

const initialValues = {
  title: '外部初始标题（优先）'
};

function onChange(pkg: any) {
  // pkg = { schema, uischema, values, bindings, meta }
  console.log('export pkg', pkg);
}
</script>

2.1 Vue2 使用（ElementAutoForm + core API）

import Vue from 'vue';
import { ElementAutoForm, scanToEditPackage, applyValuesToDom } from 'web-data-editor/vue2';

Vue.component('ElementAutoForm', ElementAutoForm);

说明：

• web-data-editor/vue2 不导出 Vue3 的 WebDataEditor.vue。
• Vue2 场景建议使用 ElementAutoForm + scanToEditPackage/applyValuesToDom 组合。
• 如果你在 webpack4 下无法解析 web-data-editor/vue2，请使用： import { ... } from 'web-data-editor/dist/vue2/index.cjs'

3. data-* 标注约定（MVP）

3.1 普通字段

<h1 data-edit-key="title" data-edit-type="text">默认标题</h1>

<img
  data-edit-key="hero.image"
  data-edit-type="image"
  data-edit-read="attr:src"
  data-edit-write="attr:src"
  src="https://cdn.xxx/default.png"
/>

<a
  data-edit-key="hero.cta"
  data-edit-type="link"
  data-edit-read="attr:href"
  data-edit-write="attr:href"
  href="https://example.com"
>立即查看</a>

<video
  data-edit-key="media.video"
  data-edit-type="video"
  data-edit-read="attr:src"
  data-edit-write="attr:src"
  controls
  src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
></video>

3.2 数组（模板 clone）

• 数组容器：data-edit-type="array" + data-edit-key="blocks"
• item 模板：data-edit-array-template="true"
• item 内部字段：使用 相对 key（例如 title），最终会生成 blocks[].title

<section data-edit-key="blocks" data-edit-type="array">
  <div data-edit-array-template="true" style="display:none;">
    <h3 data-edit-key="title" data-edit-type="text">块标题</h3>
    <p data-edit-key="desc" data-edit-type="text">块描述</p>
  </div>
</section>

3.3 数组操作（新增/删除/上移/下移）

编辑器内置了一个 JSON Forms 的数组自定义 renderer：当 schema 上存在 x-array（本包生成的数组字段都会带）时，数组会以“卡片列表 + 操作按钮”的方式呈现，支持：

• 新增（会 push 一条 item，并触发 iframe DOM 按模板 clone）
• 删除
• 上移/下移（调整 values 数组顺序，并立即回写到 iframe）

3.4 布局标注（用于 Element UI/Plus 渲染）

你可以在可编辑元素上加这些可选字段，用于生成 tabs/collapse/group/grid：

• data-edit-tab="基础信息"：分 Tab（可选；默认会按 DOM 顺序线性生成，不强制拆 Tab）
• data-edit-collapse="SEO设置"：折叠面板
• data-edit-group="Hero"：分组
• data-edit-col="12"：栅格列宽（1-24），默认 24

数组容器额外支持：

• data-edit-array-view="card|table"：默认视图
• data-edit-array-switch="true|false"：是否允许切换

3.5 Element(UI/Plus) 表单渲染（实验版）

本包新增 ui（统一 UI DSL），并提供 ElementAutoForm 组件用于渲染 Element UI/Element Plus 风格表单：

<ElementAutoForm :pkg="pkg" v-model="pkg.values" />

说明：

• 组件不直接依赖 element-ui/element-plus（需业务侧自行安装并全局注册）
• 支持 tabs/collapse/group/grid
• 数组支持卡片/表格两种展示并可切换
• 每次 values 变化会触发 AJV 校验，并把错误信息显示在对应表单项上
• 图片/视频字段会在 URL 输入框后追加“选择/上传”按钮，并向 WebDataEditor 触发 upload 事件（由父页面接管）

4. 本仓库自带可运行 demo（推荐先跑 demo 验证闭环）

cd web-data-editor
npm i
npm run dev:demo

如果你在 macOS 上遇到 Cannot find module @rollup/rollup-darwin-arm64（npm optionalDependencies 漏装问题），按 Vite/rollup 的提示删除 demo 目录的 node_modules + package-lock.json 后重新 npm i，或改用 pnpm 安装。

demo 说明：

• demo 是一个 Vite + Vue3 项目
• public/target.html 是被 iframe 引入的“目标页”，里面包含 data-* 标注