前言¶
在 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
