正文超过 iframe 高度时会在编辑器内部出现第二根滚动条,正文应该随页面一起变长。 登录态实测确认了滚动来源与两个副作用: 1. 经典投稿表单完全没做高度同步(iframe 固定 504px,正文 1824px → 内滚动)。 在共用基础插件里补上 syncHeight():测量正文高度并同步 iframe, 下限取编辑器声明高度;图片加载后重新同步。工作台自带 syncEditorHeight() 负责块浮层定位,用 __jioStudioOwnsEditorHeight 让插件跳过,避免双写。 2. 直接量 scrollHeight 会把 body 的 min-height 撑满算进内容高度,形成 「撑高 → 再撑高」的反馈循环(实测涨到 22616px)。测量时临时把 min-height 归零、同帧恢复。 3. body 的 min-height 基准从 100% 改成 100vh:iframe 随正文变高, 百分比会跟着循环;同时把 WordPress content CSS 的 body 外边距改内边距, 外边距不计入高度,会让 html 比 iframe 高一截、长正文时又冒出内滚动。 登录态实测(studio 与经典两条路径): - iframe 2152px / 1874px,与正文一致,innerHasScrollbar=false; - 空正文占位符正常、点击空白落光标正常; - 只有页面级滚动。 测试:新增 iframe 随正文增长、测量忽略 min-height 两个回归用例;903 全通过。 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Jio Creator Studio(前台沉浸式创作工作台)
面向作者的前台写作体验:WordPress TinyMCE 负责 HTML 正文编辑,React + TypeScript 负责两行固定顶栏(站点身份 + 居中工具条)、写作工作台与发布抽屉,Jio 服务端继续作为权限、审核、付费与附件交付的唯一权威。
启动
cd assets/creator-studio
npm install # 首次安装(packages 已锁定 WordPress 6.4 时代的版本)
npm run build # 产物写入 assets/creator-studio/build/
build/ 是构建产物,不进版本库(与 assets/admin/build 同一约定);部署时在目标机上执行上面的 npm run build。
PHP 读取 build/index.asset.php(依赖清单 + 版本)并只在投稿模板加载,构建产物缺失时自动回退到原有 TinyMCE 投稿表单。
使用前提
- 已登录且具备
new_post_add(编辑已有文章需作者本人或审核权限)。 - 私有附件(付费资料)需要在
wp-config.php里配置私有目录:
define('JIO_PRIVATE_STORAGE_DIR', '/var/private/jio-assets'); // ABSPATH 之外
若目录位于站点根目录内,还必须在 Web 服务器层禁止访问,并显式声明:
define('JIO_PRIVATE_STORAGE_VERIFIED', true);
未配置时付费资料上传/下载接口返回 501(fail closed),普通图片与视频上传不受影响。
关键行为
| 场景 | 行为 |
|---|---|
| 新文章草稿/投稿 | 复用 FrontSubmit::persist();草稿为 draft,投稿按 new_post_audit_no 决定 publish 或 pending |
| 编辑已发布文章 | 写入私有改稿版本(jio_submission),线上文章与永久链接保持不变 |
| 审核通过 | 后台「文章 → 改稿审核」一次性应用内容、摘要、分类、标签、封面与付费设置 |
| 自动保存 | 云端 4 秒防抖 + rev 版本号;冲突返回 409,不覆盖较新内容 |
| 本地恢复 | 仅保存标题与 TinyMCE HTML 正文,恢复前询问用户 |
| 付费附件 | 上传到私有存储,只保存随机 asset_key;下载先取短期令牌,服务端每次复核订单/VIP/配额 |
相关代码
- 服务端:
src/Core/CreatorRest.php、CreatorStudio.php、SubmissionVersion.php、PreviewToken.php - 安全交付:
src/Content/PrivateAssets.php、src/Content/ProtectedDownload.php - 原生审核:
src/Admin/Native/SubmissionReview.php - 前端:
assets/creator-studio/src/(index.tsx/components/editor-toolbar.tsx/panels//hooks//services//styles/) - 契约测试:
tests/widget-system/creator-studio-contract.test.cjs
测试
node --test tests/widget-system/*.test.cjs
php tools/audit-psr4-paths.php