內容快改 QuickEdit
boihk.com · internal tool
可移除的臨時編輯器

給任何網站，一行加上
「點文字就能改」的編輯器

上線前打磨文案，不必翻代碼、不必動 CMS。把一行 <script> 貼到網站底部，就能在頁面上點擊任何文字直接修改、自動儲存、隨時匯出；定稿後刪掉這一行即可，不留痕跡。

貼到 </body> 之前 · 就這一行
<script src="https://website-edit.boihk.com/quickedit.js" defer></script>

↙ 本頁正在使用它：點左下角「編輯內容」，開啟後試著改這段文字。

為什麼要用這個「獨立版」

宏泰官網（test.boihk.com）裡那個編輯器是綁定該站的多語系字典（content.js + data-i18n）寫的，直接複製到別的網站無法運作。

所以我把它抽成了一個零依賴、單檔、自帶樣式的通用版 quickedit.js——不需要多語系、不需要改動你原本的 HTML，放到任何網站都能用。下面是把它加到其他網站的最佳方式。

推薦

方式一一行嵌入（最省事）

適合：快速在自己的網站上打磨文案。零改動、零依賴。

  1. 貼一行 script。在你網站每個頁面的 </body> 前加入：
    HTML
    <script src="https://website-edit.boihk.com/quickedit.js" defer></script>
  2. 開啟編輯。頁面左下角會出現「編輯內容」按鈕 → 打開「編輯模式」開關 → 點擊頁面上任何文字直接改。
  3. 自動儲存。修改會即時存在你這台瀏覽器裡（localStorage），重新整理也還在。可隨時「匯出修改」下載一份清單。
  4. 定稿後移除。把文案敲定的內容更新回你的 HTML 原始碼，然後刪掉那一行 script——編輯器與所有痕跡即完全消失。
可調參數（寫在 script 標籤上，皆可選）：
data-pos="right" 按鈕靠右 · data-key="home-v2" 自訂儲存名稱 · data-save="/api/qe-save" 改用伺服器儲存（見下方）· data-token="xxx" 伺服器授權 token。
更穩健

方式二data-edit 精確模式

方式一靠「元素在頁面中的位置」來記住每處修改；若頁面結構之後大改，對應可能失準。若你想要長期、可靠、可匯出對照，給要編輯的元素加一個穩定的 data-edit 名稱即可：

HTML
<h1 data-edit="home.hero.title">為您的長期財務穩定保駕護航</h1>
<p  data-edit="home.hero.sub">我們致力於……</p>

<script src="https://website-edit.boihk.com/quickedit.js" defer></script>

編輯器會優先用 data-edit 的名稱作為 key，匯出的修改清單也會用這些名稱，方便你對照著更新原始碼。沒有 data-edit 的元素仍可照方式一自動編輯。

零安裝

方式三書籤工具（不改網站也能用）

如果你只是想臨時在某個頁面上比劃文案、截圖給人看，連 script 都不用加。把下面這顆按鈕拖到瀏覽器書籤列，之後在任何頁面點它，就會即時載入編輯器：

✎ 內容快改（拖我到書籤列）

書籤模式的修改僅存在當下這台瀏覽器、且不會自動套回——適合臨時預覽，不適合正式改稿。

進階修改要「存到哪裡」

本機模式（預設）

存在瀏覽器

零後端。修改存在你這台瀏覽器，適合一個人打磨、預覽、匯出清單後手動更新原始碼。換一台電腦或清快取就沒了。

伺服器模式

存到後端 · 全站生效

設定 data-save 後，修改會 POST 到你的端點存成檔案；所有訪客載入頁面時都會套用。適合多人協作或當作輕量文案後台。

最小後端範例（Node，零依賴）

把修改寫進 qe-overrides.json；再讓 quickedit.js 於載入時讀回套用。可掛在任何既有服務下：

server-snippet.js
// POST /api/qe-save  { key, overrides }   （帶標頭 X-QE-Token）
const fs = require('fs');
const TOKEN = process.env.QE_TOKEN || 'change-me';

function handleQeSave(req, res) {
  if (req.headers['x-qe-token'] !== TOKEN) { res.writeHead(401); return res.end(); }
  let body = ''; req.on('data', c => body += c);
  req.on('end', () => {
    try {
      const { key, overrides } = JSON.parse(body || '{}');
      const all = JSON.parse(fs.readFileSync('qe-overrides.json', 'utf8') || '{}');
      all[key] = overrides;
      fs.writeFileSync('qe-overrides.json', JSON.stringify(all, null, 2));
      res.writeHead(200, { 'Content-Type': 'application/json' });
      res.end('{"ok":true}');
    } catch (e) { res.writeHead(400); res.end(); }
  });
}
上線在 *.boihk.com 時：把端點放到同一個網域（避免跨域），並務必用 data-token + X-QE-Token 保護，否則任何人都能改你的站。

收尾定稿與移除

注意事項