前言¶
在 DSH 里处理前端页面时，开发者大概都遇到过这个场景：吐出一个 index.html，想微调一下文案或排版，却被内置的纯代码编辑器挡着——没有所见即所得，改几行就要反复预览。这个插件解决的就是这件事：把 TinyMCE 6 的可视化编辑接进 DeepSeek Harness 的 Better Sidebar，让 .html / .htm 文件直接在侧边栏里打开成可编辑的画布，编辑结果按原样写回磁盘。
下面介绍gustock 维护的 gustock/tinymce-for-deepseek-harness，分类是客户端，当前星标 0，仓库 README 自述 License 为 MIT。
这是什么¶
它不是独立编辑器，而是注册到 Better Sidebar 的一个文件 viewer。打开文件树里的 HTML（或智能体产出的文件链接），会走 TinyMCE 的 WYSIWYG 画布，而不是默认的代码面板。保存时通过 Better Sidebar 的写接口落盘，带冲突检测；文档的 doctype、<head>、scripts 与注释按字节保留。
核心功能¶
下面这些能力都来自 README 原文。
- TinyMCE 6 WYSIWYG 编辑文档 body，工具栏针对窄侧边栏做了裁剪：undo/redo、block/heading、行内格式、颜色、列表、对齐、链接、图片、表格、媒体、源码对话框。
- 提供来自 OSS 插件的 Preview（渲染后的页面）与 Fullscreen 按钮。
- Save 按钮 +
Ctrl/Cmd+S，带 dirty 指示与保存状态。 - 磁盘冲突检测：若文件在打开后被外部改动，保存会被拒绝，转而提示 Reload，而不是覆盖。
<head>里的<style>块会在编辑画布中重放，让所见即所得接近真实页面。- 自带英文与中文 UI 文案，可以在 Better Sidebar 的 Side card 设置页禁用该 viewer。
安装与启用¶
README 给的安装命令如下。先做 npm 安装：
dsh plugin --profile web add dsh-tinymce-html-editor
从源码安装：
dsh plugin --profile web add github:gustock/TinyMCE-for-Deepseek-Harness
也可以从 DSH 界面（Settings → Plugins → Install bundle）或 plugin_manager 安装：
// plugin_manager
{ action: 'install_bundle', target: 'dsh-tinymce-html-editor@1.0.0' }
安装完会在 bundle 里插入一行 Loader，名字为 tinymce-html-editor。需要注意的是，Better Sidebar bundle 必须先装好并启用，viewer 才会出现。若装完在已打开的 GUI 里没立刻生效，刷新一次页面即可——新加的客户端模块能被 live plugin graph 拾取，但安装前已启动的页面可能仍在跑旧的模块集。
卸载则用 plugin_manager 的 remove_bundle（参数 dsh-tinymce-html-editor），或走 Plugins 页面。
典型用法¶
仓库里带了一个安全的演示页 sample.html。在 Better Sidebar 打开它，即可尝试编辑、保存、重开，验证整条链路：
- 从文件树打开
sample.html，确认进入 TinyMCE 画布而非代码面板。 - 在画布上改一段正文或图片，观察 dirty 指示与画布渲染。
- 用 Save /
Ctrl+S保存，验证只替换 body 而前后文不动。 - 在外部改动文件后再次保存，确认出现 Reload 提示。
健康检查可以单独验证插件是否就绪，clientReady 在页面加载完客户端并注册 viewer 后翻为 true：
{ "ok": true, "version": "1.0.0", "clientUrl": "plugins/??dsh-tinymce-html-editor/client.js&rev=…",
"clientReady": true, "clientReadyAt": 1730000000000 }
工作原理¶
插件分两半，Half 测试对应下面这张职责表。Host 端在 /tinymce-editor/vendor/tinymce 提供本地静态资源，客户端注册 .html/.htm viewer 并挂载 TinyMCE。
| Half | File | 职责 |
|---|---|---|
| Host | index.js |
以 /tinymce-editor/vendor/tinymce 提供 vendor/tinymce/**（GET/HEAD、MIME、路径穿越防护、ETag/304）。 |
| Client | client.js |
注册 .html/.htm viewer（priority 20、fsRead），挂载 TinyMCE，把编辑后的 body 拼回原文档，通过 /sidebar/write 保存。 |
改动集中在 body 上。TinyMCE 6 移除了 fullpage 插件，因此这个 viewer 不会把整份文档交给编辑器，而是在 <body> / </body> 处切分：
prefix (doctype + <html> + <head> + <body …>) ← 不改动
body ← 由 TinyMCE 编辑
suffix (</body> + </html>) ← 不改动
保存时，编辑器产出的 body HTML 被放回前后文之间，doctype、meta、head 里的 script/style 与注释都能原样保留；body 内的 <script> / <style> 还会被 TinyMCE 的 protect 选项包一遍，保证往返不变。没有 <body> 标签的片段（fragments/partials）按整份编辑。
保存走的是侧边栏自己的 POST /sidebar/write，携带加载时的 mtime，因此工作区权限和冲突检查都集中在一处；fs-conflict 响应会转成 Reload 提示。
适用场景与注意¶
适合在 DSH 里处理 HTML 产出物、并已在用 Better Sidebar 的团队或个人。该插件以当前 dsh 进程的身份运行，安装前应先检查源码与许可证（MIT），确认与环境兼容。
兼容性按 README 自述：DeepSeek Harness >= 0.2.1-rc.2，Better Sidebar >= 0.28.0（viewer 通过它的 ctx.betterSidebar 服务注册），Node.js >= 20，平台为 macOS / Windows / Linux 的 DSH web 或桌面 UI，内嵌 TinyMCE 6.8.6（MIT）。README 标注已在 DSH 0.2.1-rc.2（desktop、macOS）搭配 Better Sidebar 0.28.0 验证，包内单测与一个 headless 浏览器编辑/保存测试通过。
限制同样来自 README，落地前要了解：
- 只编辑 body：
<body>之外的内容保留但不可改，改 head 请走代码编辑器。 - 相对资源路径：相对的图片/链接 URL 保存时原样保留，但画布会以 Harness 页面为基准解析，编辑过程中相对图片可能显示为坏图；绝对 URL 与 data URL 正常。
- TinyMCE 会规范化标记：属性引号、自闭合标签、空白等，你碰过的区域会有变化，没碰过的文档原样往返。
- 这一版强依赖 Better Sidebar：没有它插件会安装成功但不注册 viewer；README 提到后续计划提供无依赖的原生文档预览作为兜底。
- TinyMCE 自身的 UI 是英文，插件提供的标签才会本地化。
结尾¶
这个插件的价值在于把 HTML 编辑收进 DSH 既有的 Better Sidebar，不引入新的源码编辑器，也不改变工作区之外的权限面：运行时无网络请求，TinyMCE 与皮肤、plugins 都 vendored 在包内，由插件自己的 Host 路由提供，没有 CDN、没有 API key、没有 telemetry；只读写本地工作区的 .html/.htm，并提供路径穿越防护。如果你本来就用 Better Sidebar，又需要在 DSH 里直接改 HTML body，它是成本很低的一个选择；要改 head 或做结构性的重写，仍然需要回到代码编辑器。
目录页：https://www.skillhub.cn/plugins/gustock/TinyMCE-for-Deepseek-Harness
GitHub：https://github.com/gustock/TinyMCE-for-Deepseek-Harness
