發了那麼多篇文章，

真的覺得IT鐵人賽的編輯器有待加強，

所以我打算來開發個輔助擴充工具，

方便我後續上傳文章~

痛點

首先 先了解我的痛點

1. 編輯工具在最上面，很常因為文章寫得太長，要往上滑才能點到工具

2. 上傳圖片麻煩，我上傳圖片他會先有個彈跳視窗上傳圖片，上傳完成後，才能插入圖片

3.從Notion匯出要轉到IT鐵人賽文章，有點麻煩

如何解決

首先 我想說使用擴充工具解決，

這樣就可以一鍵新增套用整個IT鐵人賽網站，

這樣分享給我其他朋友也比較方便~

那另外要注意的事情是，

使用AI開發擴充套件時，

通常會預設使用純HTML、JavaScript、CSS開發，

但這樣程式會變得很攏長，

且不好切分模組、不好管理延伸，

所以這邊我有特別要求使用TypeScript進行開發~

開始開發

這邊非工程師的人可能會比較難入門

但我會按步驟說明

痛點一：工具列

第一步驟 先到編輯頁面 按下F12

或是直接在文章區塊按下右鍵 點選檢視

就會找到這個區塊

然後直接複製程式

第二部 丟改AI Cursor

使用ts 製作一個
IT鐵人賽 輔助編輯擴充工具
https://ithelp.ithome.com.tw/articles/10386813/draft

先上網查詢最新TS如何製作擴充工具

第一個功能
把
<div class="editor-toolbar"><a title="粗體 (Ctrl-B)" tabindex="-1" class="fa fa-bold"></a><a title="斜體 (Ctrl-I)" tabindex="-1" class="fa fa-italic"></a><a title="插入連結 (Ctrl-K)" tabindex="-1" class="fa fa-link"></a><a title="引用 (Ctrl-')" tabindex="-1" class="fa fa-quote-left"></a><a title="新增程式碼 (Ctrl-Alt-C)" tabindex="-1" class="fa fa-code"></a><a title="插入圖片 (Ctrl-Alt-I)" tabindex="-1" class="fa fa-picture-o"></a><i class="separator">|</i><a title="上傳圖片" tabindex="-1" class="fa fa-upload"></a><a title="加入數學公式" tabindex="-1" class="fa fa-pie-chart"></a><a title="編號清單 (Ctrl-Alt-L)" tabindex="-1" class="fa fa-list-ol"></a><a title="項目符號清單 (Ctrl-L)" tabindex="-1" class="fa fa-list-ul"></a><a title="插入水平線" tabindex="-1" class="fa fa-minus"></a><a title="加入 YouTube 連結" tabindex="-1" class="fa fa-youtube"></a><i class="separator">|</i><a title="復原" tabindex="-1" class="fa fa-undo no-disable"></a><a title="取消復原" tabindex="-1" class="fa fa-repeat no-disable"></a><a title="熊俠貼圖" tabindex="-1" class="fa fa-smile-o"></a><i class="separator">|</i><a title="預覽 (Ctrl-P)" tabindex="-1" class="mk__editor-pre no-disable"></a></div>

這個懸浮在左邊 並且變成垂直顯示

但中間很多樣式調整，所以還是要根據顯示結果去做處理

拖移是他自己加上去的

那這邊第一個痛點就解決了~

痛點二：拖移圖片上傳

圖片上傳的部分，就有點魔法了

首先 一樣F12 切換到Network

然後操作一次 上傳流程

你就會發現
他會呼叫https://ithelp.ithome.com.tw/api/upload

首先到Headers複製，所有的資訊

以及複製Response的結果

通常把這兩個未給cursor就會呼叫了

但這邊有個問題

他正確上傳後 拿到URL

要怎麼輸入到文章中呢~

這邊我只能說 我完全不知道

我一直讓他重複幾件事情

1.圖片未成功輸入到頁面中，請新增log查看各種可能性
2.重新整理，再操作一次上傳圖片
3.未成功 擷取F12 log
4.給cursor 繼續分析 檢查 新增log

依此類推 最後就 新增成功了

但我也來回跑了五次吧

最後log長這樣

IT鐵人賽編輯輔助工具：找到編輯工具列，開始設定樣式... <div class="it-ironman-vertical-toolbar visible" style>…</div>flex
content.js:243 IT鐵人賽編輯輔助工具：已完全清除原始樣式並應用新樣式
content.js:264 IT鐵人賽編輯輔助工具：已修正圖示結構 粗體 (Ctrl-B) ['fa-bold']
content.js:264 IT鐵人賽編輯輔助工具：已修正圖示結構 斜體 (Ctrl-I) ['fa-italic']
content.js:264 IT鐵人賽編輯輔助工具：已修正圖示結構 插入連結 (Ctrl-K) ['fa-link']
content.js:264 IT鐵人賽編輯輔助工具：已修正圖示結構 引用 (Ctrl-') ['fa-quote-left']
content.js:264 IT鐵人賽編輯輔助工具：已修正圖示結構 新增程式碼 (Ctrl-Alt-C) ['fa-code']
content.js:264 IT鐵人賽編輯輔助工具：已修正圖示結構 插入圖片 (Ctrl-Alt-I) ['fa-picture-o']
content.js:264 IT鐵人賽編輯輔助工具：已修正圖示結構 上傳圖片 ['fa-upload']
content.js:264 IT鐵人賽編輯輔助工具：已修正圖示結構 加入數學公式 ['fa-pie-chart']
content.js:264 IT鐵人賽編輯輔助工具：已修正圖示結構 編號清單 (Ctrl-Alt-L) ['fa-list-ol']
content.js:264 IT鐵人賽編輯輔助工具：已修正圖示結構 項目符號清單 (Ctrl-L) ['fa-list-ul']
content.js:264 IT鐵人賽編輯輔助工具：已修正圖示結構 插入水平線 ['fa-minus']
content.js:264 IT鐵人賽編輯輔助工具：已修正圖示結構 加入 YouTube 連結 ['fa-youtube']
content.js:264 IT鐵人賽編輯輔助工具：已修正圖示結構 復原 ['fa-undo']
content.js:264 IT鐵人賽編輯輔助工具：已修正圖示結構 取消復原 ['fa-repeat']
content.js:264 IT鐵人賽編輯輔助工具：已修正圖示結構 熊俠貼圖 ['fa-smile-o']
3content.js:272 IT鐵人賽編輯輔助工具：已清除分隔符文字
content.js:432 === IT鐵人賽 JavaScript 環境分析 ===
content.js:434 全域變數檢查:
content.js:435 - window.CodeMirror: undefined
content.js:436 - window.$: undefined
content.js:437 - window.jQuery: undefined
content.js:438 - window.swal: undefined
content.js:439 - window.Swal: undefined
content.js:441 深度搜尋全域變數:
content.js:484 相關全域變數: []
content.js:446 CodeMirror 元素分析:
content.js:447 - 元素本身: <div class="CodeMirror cm-s-paper CodeMirror-wrap">…</div>
content.js:448 - CodeMirror 屬性: undefined
content.js:449 - 所有屬性: []
content.js:499 CodeMirror 元素深度分析:
content.js:521 - 父元素: <div class="post-markdown">…</div>
content.js:522 - 父元素類別: post-markdown
content.js:459 事件監聽器分析:
content.js:597 - click 事件: 已綁定
content.js:597 - input 事件: 已綁定
content.js:597 - keydown 事件: 已綁定
content.js:597 - keyup 事件: 已綁定
content.js:597 - paste 事件: 已綁定
content.js:597 - drop 事件: 已綁定
content.js:529 尋找 CodeMirror 實例:
content.js:547 - 找到 38 個 script 標籤
content.js:556 - 內聯 CodeMirror script 32: 
    /* github.com/NextStepWebs/simplemde-markdown-editor/blob/master/src/js/simplemde.js */
    var Toolbar_Base = {
        "bold": {
            name: "bold",
            action: SimpleMDE.toggleBo...
content.js:556 - 內聯 CodeMirror script 37: 
            $(function () {
                $('.CodeMirror-wrap textarea').on('input paste keydown', function () {
                    var $this = $(this);
                    var simplemde = $this.p...
content.js:566 - CodeMirror 元素 0: <div class="CodeMirror cm-s-paper CodeMirror-wrap">…</div>
content.js:473 === 分析完成 ===
content.js:426 IT鐵人賽編輯輔助工具：已添加圖片拖拽上傳功能
content.js:364 IT鐵人賽編輯輔助工具：已添加 Notion 匯入按鈕到工具列

你們拿去看看可不可以更快解決問題

最後結果

痛點三：Notion匯入

這邊因為我是使用Notion先寫文章的

所以首先我們要匯出文章

匯出後解壓縮會長這樣

他會有兩層zip

另外他的圖片需要處理

要讓他自動上傳 並取代文字

我這邊先下了(這邊注意 要先把zip解壓縮 讓cursor看的到結構跟md檔)

新增一個匯入notion zip的按鈕
並自動把內容與圖片上傳到文章中
這邊要注意
notion zip有兩層zip 可以看 a5f514a0-bfb5-4a22-a163-aa38f9a593cc_ExportBlock-571115d0-4b1d-43e4-abe1-12424bda7f0f.zip 跟以解壓縮完的a5f514a0-bfb5-4a22-a163-aa38f9a593cc_ExportBlock-571115d0-4b1d-43e4-abe1-12424bda7f0f 結構

後續我有在修了一次

1.我希望在按鈕列表中也有匯入按鈕

2.匯入失敗: Can't read the data of 'the loaded zip file'. Is it in a supported JavaScript type (String, Blob, ArrayBuffer, etc) ?

圖片他沒有完整取代掉

....

依此類推，我要來開始小修改東西

```markdown
1. 日期保持在下方
2. 資料夾編輯可以定義說明
3. 移動為什麼沒有我新增的資料夾 且要顯示資料夾現在在的路徑

我發現你只上傳了一張圖片

通知修改

```markdown
還沒完全處理結束 右上角的通知不要消失
且通知改成右下角

最後救回得到匯入的按鈕

可以原封不動把整個zip 丟進去 他就會處理好了

當然不包含標題

總結

提前開發了一個擴充工具，原本後面才會介紹筆記的擴充工具，但想說這個痛點好頭痛喔，就先修正了，但因為今天才開發 還沒上架，歡迎大家 追蹤我的Threads，或是加入LINE社群與DC~