新增可自訂的非同步圖片上傳功能。

pardnchiu · Jan 18, 2025 · 7b17fd8 · 7b17fd8
1 parent 5c3874c
commit 7b17fd8
Show file tree

Hide file tree

Showing 18 changed files with 151 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -97,12 +97,42 @@ const domEditor = new MDEditor({
     defaultContent: "",                     // Initial content to display
     hotKey: 1,                              // Enable keyboard shortcuts, default: 1 (enabled)
     preventRefresh: 0,                      // Prevent page refresh, default: 0 (disabled)
-    tabPin: 0,                              // Enable Tab indentation, default: 0 (disabled)
+    tabPin: 0,                              // Pin Tab, default: 0 (disabled)
     wrap: 1,                                // Enable word wrapping, default: 1 (enabled)
-    autoSave: 1,                            // Auto-save feature, default: 1 (enabled)
+    autosave: 1,                            // Auto-save feature, default: 1 (enabled)
     event: {
         save: result => {                   // Custom save event
             console.log(result);            // Output current Markdown content
+        },
+        upload: async result => {
+            /**
+             * Custom Image Upload Function
+             *
+             * Purpose:
+             * - This function allows developers to define custom image upload logic.
+             * - After the upload is completed, it returns an object containing the image URL and alt text, 
+             *   which is then used to insert the image into the editor.
+             *
+             * Usage:
+             * - This function is invoked by the editor when an image needs to be uploaded.
+             * - Developers can implement custom upload logic (e.g., using an API to upload the image to a server).
+             *
+             * Return Value:
+             * - The function must return an object with the following fields:
+             *   - `href`: The URL of the image to be inserted into the editor.
+             *   - `alt`: The alternative text for the image (used when the image cannot be loaded).
+             *
+             * Example:
+             * - The current implementation simulates a 1-second delay and returns an empty `href` and `alt`.
+             * - You can replace this logic with actual upload functionality (e.g., using fetch or axios to send an HTTP request).
+             */
+            const link = await new Promise(resolve => {
+                setTimeout(() => resolve({
+                    href: "",  // The image URL (replace with the actual upload response link)
+                    alt: ""    // The alternative text for the image (replace with a description provided during upload)
+                }), 1000);  // Simulating a 1-second delay
+            });
+            return link;
         }
     },
     style: {
@@ -145,7 +175,7 @@ const domViewer = new MDViewer({
 (...).appendChild(domEditor.body);
 (...).appendChild(domViewer.body);
 
-// Version 1.10.1 and above
+// Version 1.11.0 and above
 const domParser = new MDParser({
     standard: 1             // Support only standard syntax, default: 1 | true
 });

diff --git a/README.zh.md b/README.zh.md
@@ -97,12 +97,41 @@ const domEditor = new MDEditor({
     defaultContent: "",                     // 預設內容，初始顯示
     hotKey: 1,                              // 啟用快捷鍵，預設為 1
     preventRefresh: 0,                      // 防止頁面重整，預設值：0
-    tabPin: 0,                              // 啟用 Tab 縮排，預設值：0 (關閉)
+    tabPin: 0,                              // 釘選 Tab，預設值：0 (關閉)
     wrap: 1,                                // 啟用文字自動換行，預設值：1 (開啟)
-    autoSave: 1,                            // 自動儲存，預設值：1 (開啟)
+    autosave: 1,                            // 自動儲存，預設值：1 (開啟)
     event: {
         save: result => {                   // 自定義儲存事件
             console.log(result);            // 輸出當前 Markdown 內容
+        },
+        upload: async result => {
+            /**
+             * 自定義圖片上傳函式
+            *
+            * 功能：
+            * - 此函式允許開發者定義圖片上傳邏輯。
+            * - 上傳完成後，回傳一個包含圖片連結和替代文字的物件，用於將圖片插入編輯器。
+            *
+            * 使用方式：
+            * - 在需要上傳圖片時，編輯器會調用此函式。
+            * - 開發者可以自定義上傳處理（例如：通過 API 將圖片上傳到伺服器）。
+            *
+            * 回傳值：
+            * - 必須是包含以下字段的物件：
+            *   - `href`：圖片的 URL，將被插入到編輯器中。
+            *   - `alt`：圖片的替代文字（用於圖片無法加載時的顯示）。
+            *
+            * 示例：
+            * - 目前模擬1秒延遲後返回空的 `href` 和 `alt`。
+            * - 可替換為真實的上傳邏輯（如使用 fetch 或 axios 發送 HTTP 請求）。
+            */
+            const link = await new Promise(resolve => {
+                setTimeout(() => resolve({
+                    href: "",  // 圖片的 URL（可替換為真實上傳返回的鏈接）
+                    alt: ""    // 圖片的替代文字（可替換為上傳時的描述）
+                }), 1000);  // 模擬 1 秒延遲
+            });
+            return link;
         }
     },
     style: {
@@ -145,7 +174,7 @@ const domViewer = new MDViewer({
 (...).appendChild(domEditor.body);
 (...).appendChild(domViewer.body);
 
-// 1.10.1 版本以上
+// 1.11.0 版本以上
 const domParser = new MDParser({
     standard: 1             // 僅支持標準語法，預設值：1 | true
 });

diff --git a/dist/NanoMD-output.css b/dist/NanoMD-output.css
diff --git a/dist/NanoMD.css b/dist/NanoMD.css
diff --git a/dist/NanoMD.esm.js b/dist/NanoMD.esm.js
diff --git a/dist/NanoMD.js b/dist/NanoMD.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@pardnchiu/nanomd",
-    "version": "1.10.1",
+    "version": "1.11.0",
     "description": "NanoMD is a lightweight Markdown editing and viewing library built on pure JavaScript and native APIs. Can be easily embedded into websites, offers rich features, and supports real-time previewing.",
     "main": "dist/NanoMD.js",
     "module": "dist/NanoMD.esm.js",

diff --git a/page/live.html b/page/live.html
@@ -207,7 +207,7 @@
                             elm_editor = new MDEditor({
                                 id: "editor",
                                 defaultContent: pre,
-                                // autoSave: 0,
+                                // autosave: 0,
                                 preventRefresh: 1,
                                 // hotKey: 0,
                                 tabPin: 1,
@@ -229,6 +229,17 @@
                                 event: {
                                     save: result => {
                                         console.log(result);
+                                    },
+                                    upload: async result => {
+                                        // 模擬上傳並返回一個連結
+                                        alert("模擬傳送圖片\n一秒後插入圖片")
+                                        const link = await new Promise(resolve => {
+                                            setTimeout(() => resolve({
+                                                href: "/static/image/corn-9135131_640.jpg",
+                                                alt: "模擬傳送圖片"
+                                            }), 1000);
+                                        });
+                                        return link;
                                     }
                                 }
                             });

diff --git a/src/data.js b/src/data.js
diff --git a/src/model/editor.js b/src/model/editor.js
diff --git a/src/model/editorTab.js b/src/model/editorTab.js
diff --git a/src/model/viewer.js b/src/model/viewer.js
diff --git a/src/sass/NanoMD.scss b/src/sass/NanoMD.scss
diff --git a/src/sass/_pd-md-viewer.scss b/src/sass/_pd-md-viewer.scss
diff --git a/static/css/index.css b/static/css/index.css
diff --git a/static/md/en/installation.md b/static/md/en/installation.md
@@ -45,19 +45,48 @@
         defaultContent: "",                     // Initial content to display
         hotKey: 1,                              // Enable keyboard shortcuts, default: 1 (enabled)
         preventRefresh: 0,                      // Prevent page refresh, default: 0 (disabled)
-        tabPin: 0,                              // Enable Tab indentation, default: 0 (disabled)
+        tabPin: 0,                              // Pin Tab, default: 0 (disabled)
         wrap: 1,                                // Enable word wrapping, default: 1 (enabled)
-        autoSave: 1,                            // Auto-save feature, default: 1 (enabled)
+        autosave: 1,                            // Auto-save feature, default: 1 (enabled)
         event: {
             save: result => {                   // Custom save event
                 console.log(result);            // Output current Markdown content
+            },
+            upload: async result => {
+                /**
+                 * Custom Image Upload Function
+                *
+                * Purpose:
+                * - This function allows developers to define custom image upload logic.
+                * - After the upload is completed, it returns an object containing the image URL and alt text, 
+                *   which is then used to insert the image into the editor.
+                *
+                * Usage:
+                * - This function is invoked by the editor when an image needs to be uploaded.
+                * - Developers can implement custom upload logic (e.g., using an API to upload the image to a server).
+                *
+                * Return Value:
+                * - The function must return an object with the following fields:
+                *   - `href`: The URL of the image to be inserted into the editor.
+                *   - `alt`: The alternative text for the image (used when the image cannot be loaded).
+                *
+                * Example:
+                * - The current implementation simulates a 1-second delay and returns an empty `href` and `alt`.
+                * - You can replace this logic with actual upload functionality (e.g., using fetch or axios to send an HTTP request).
+                */
+                const link = await new Promise(resolve => {
+                    setTimeout(() => resolve({
+                        href: "",  // The image URL (replace with the actual upload response link)
+                        alt: ""    // The alternative text for the image (replace with a description provided during upload)
+                    }), 1000);  // Simulating a 1-second delay
+                });
+                return link;
             }
         },
         style: {
             mode: "",                           // Theme mode: auto | light | dark, default: auto
             fill: 1,                            // Adjust size based on parent element, default: 1 (enabled)
             fontFamily: "",                     // Font settings, default: 'Noto Sans TC', sans-serif
-            showRow: 0,                         // Show line numbers, default: 0 (disabled)
             placeholder: {
                 text: "Content",                // Placeholder text, default: "Type here..."
                 color: "#ff000080"              // Placeholder color, default: #0000ff1a
@@ -92,7 +121,7 @@
     (...).appendChild(domEditor.body);
     (...).appendChild(domViewer.body);
 
-    // Version 1.10.1 and above
+    // Version 1.11.0 and above
     const domParser = new MDParser({
         standard: 1             // Support only standard syntax, default: 1 | true
     });

diff --git a/static/md/zh/installation.md b/static/md/zh/installation.md
@@ -45,19 +45,47 @@
         defaultContent: "",                     // 預設內容，初始顯示
         hotKey: 1,                              // 啟用快捷鍵，預設為 1
         preventRefresh: 0,                      // 防止頁面重整，預設值：0
-        tabPin: 0,                              // 啟用 Tab 縮排，預設值：0 (關閉)
+        tabPin: 0,                              // 釘選 Tab，預設值：0 (關閉)
         wrap: 1,                                // 啟用文字自動換行，預設值：1 (開啟)
-        autoSave: 1,                            // 自動儲存，預設值：1 (開啟)
+        autosave: 1,                            // 自動儲存，預設值：1 (開啟)
         event: {
             save: result => {                   // 自定義儲存事件
                 console.log(result);            // 輸出當前 Markdown 內容
+            },
+            upload: async result => {
+                /**
+                 * 自定義圖片上傳函式
+                *
+                * 功能：
+                * - 此函式允許開發者定義圖片上傳邏輯。
+                * - 上傳完成後，回傳一個包含圖片連結和替代文字的物件，用於將圖片插入編輯器。
+                *
+                * 使用方式：
+                * - 在需要上傳圖片時，編輯器會調用此函式。
+                * - 開發者可以自定義上傳處理（例如：通過 API 將圖片上傳到伺服器）。
+                *
+                * 回傳值：
+                * - 必須是包含以下字段的物件：
+                *   - `href`：圖片的 URL，將被插入到編輯器中。
+                *   - `alt`：圖片的替代文字（用於圖片無法加載時的顯示）。
+                *
+                * 示例：
+                * - 目前模擬1秒延遲後返回空的 `href` 和 `alt`。
+                * - 可替換為真實的上傳邏輯（如使用 fetch 或 axios 發送 HTTP 請求）。
+                */
+                const link = await new Promise(resolve => {
+                    setTimeout(() => resolve({
+                        href: "",  // 圖片的 URL（可替換為真實上傳返回的鏈接）
+                        alt: ""    // 圖片的替代文字（可替換為上傳時的描述）
+                    }), 1000);  // 模擬 1 秒延遲
+                });
+                return link;
             }
         },
         style: {
             mode: "",                           // 主題模式 auto | light | dark，預設值： auto
             fill: 1,                            // 隨父元素大小調整，預設值：1 (開啟)
             fontFamily: "",                     // 設定字體，預設：'Noto Sans TC', sans-serif
-            showRow: 0,                         // 顯示行號，預設值：0 (關閉)
             placeholder: {
                 text: "Content",                // 設定提示文字，預設：Type here ...
                 color: "#ff000080"              // 提示文字顏色，預設：#0000ff1a
@@ -92,7 +120,7 @@
     (...).appendChild(domEditor.body);
     (...).appendChild(domViewer.body);
 
-    // 1.10.1 版本以上
+    // 1.11.0 版本以上
     const domParser = new MDParser({
         standard: 1             // 僅支持標準語法，預設值：1 | true
     });

diff --git a/static/sass/_editor.scss b/static/sass/_editor.scss
@@ -65,14 +65,14 @@
             }
 
             .pd-md-viewer {
-                padding: 0 1rem 50vh;
+                padding: 1rem 1rem 50vh;
 
                 @media screen and (min-width: $_1024) {
-                    padding: 0 2rem 50vh;
+                    padding: 1rem 2rem 50vh;
                 }
 
                 @media screen and (min-width: $_1600) {
-                    padding: 0 4rem 50vh;
+                    padding: 1rem 4rem 50vh;
                 }
             }
         }