The Native-First, High-Performance Markdown Plugin for JavaScript

1. 安裝

您可以使用NPM安裝，直接匯入JavaScript文件，或使用CDN進行快速部署。

透過 NPM 安裝

npm install markdown-text-editor

使用 CDN

或者，在您的 HTML 中包含以下 CDN 鏈接

<script src="https://cdn.jsdelivr.net/npm/markdown-text-editor"></script>

2. HTML 結構

只需將 </code> 放入標準表單中即可。無需特殊包裝。</p> <div data-view="code" data-plan="free" data-lang="html" class="snippet-container collapsible-group join join-vertical border border-base-soft rounded-xl not-prose w-full"> <div class="header header-sm header-transparent join-item z-10"> <div class="header-content px-4"> <div class="header-start"> <span class="uppercase para-xs">html</span> </div> <div class="header-end "> <div class="tooltip tooltip-bottom" data-tip="複製"> <button type="button" class="snippet-copy-code-btn btn btn-xs btn-plain btn-square" aria-label="複製片段"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg> </button> </div> </div> </div> </div> <span class="divider divider-horizontal"></span> <div class="join-item collapsible collapsible-open"> <input type="checkbox" class="collapsible-toggle" id="snippet-toggle-2" aria-label="切換代碼可見性"> <div class="collapsible-content overflow-auto"> <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span class="normal">1</span> <span class="normal">2</span> <span class="normal">3</span> <span class="normal">4</span></pre></div></td><td class="code"><div><pre><span></span><span class="p"><</span><span class="nt">form</span> <span class="na">action</span><span class="o">=</span><span class="s">"/api/save"</span> <span class="na">method</span><span class="o">=</span><span class="s">"POST"</span><span class="p">></span> <span class="p"><</span><span class="nt">textarea</span> <span class="na">id</span><span class="o">=</span><span class="s">"markdown-editor"</span> <span class="na">name</span><span class="o">=</span><span class="s">"content"</span><span class="p">></span># Hello World<span class="p"></</span><span class="nt">textarea</span><span class="p">></span> <span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"submit"</span><span class="p">></span>Save Content<span class="p"></</span><span class="nt">button</span><span class="p">></span> <span class="p"></</span><span class="nt">form</span><span class="p">></span> </pre></div></td></tr></table></div> </div> </div> </div> <h3 id="3-js-css-textarea" class="text-pretty">3. 導入 JS 和 CSS 並在 textarea 元素上初始化插件<div class="tooltip tooltip-bottom not-prose" data-tip="Copy"><button class="btn btn-xs btn-ghost btn-square copy-clipboard ms-1.5" type="button" data-clipboard="https://frutjam.com/zh-hant/plugins/markdown-editor#3-js-css-textarea" aria-label="Copy link"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></button></div></h3> <div data-view="code" data-plan="free" data-lang="javascript" class="snippet-container collapsible-group join join-vertical border border-base-soft rounded-xl not-prose w-full"> <div class="header header-sm header-transparent join-item z-10"> <div class="header-content px-4"> <div class="header-start"> <span class="uppercase para-xs">javascript</span> </div> <div class="header-end "> <div class="tooltip tooltip-bottom" data-tip="複製"> <button type="button" class="snippet-copy-code-btn btn btn-xs btn-plain btn-square" aria-label="複製片段"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg> </button> </div> </div> </div> </div> <span class="divider divider-horizontal"></span> <div class="join-item collapsible collapsible-open"> <input type="checkbox" class="collapsible-toggle" id="toggle-3-js-css-textarea" aria-label="切換代碼可見性"> <div class="collapsible-content overflow-auto"> <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span class="normal">1</span> <span class="normal">2</span> <span class="normal">3</span> <span class="normal">4</span> <span class="normal">5</span> <span class="normal">6</span></pre></div></td><td class="code"><div><pre><span></span><span class="k">import</span><span class="w"> </span><span class="nx">MarkdownEditor</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"markdown-text-editor"</span><span class="p">;</span> <span class="kd">const</span><span class="w"> </span><span class="nx">editor</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">MarkdownEditor</span><span class="p">(</span><span class="s1">'#markdown-editor'</span><span class="p">,</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">placeholder</span><span class="o">:</span><span class="w"> </span><span class="s1">'Write your markdown...'</span><span class="p">,</span> <span class="w"> </span><span class="nx">toolbar</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="s1">'heading'</span><span class="p">,</span><span class="w"> </span><span class="s1">'bold'</span><span class="p">,</span><span class="w"> </span><span class="s1">'italic'</span><span class="p">,</span><span class="w"> </span><span class="s1">'strikethrough'</span><span class="p">,</span><span class="w"> </span><span class="s1">'ul'</span><span class="p">,</span><span class="w"> </span><span class="s1">'ol'</span><span class="p">,</span><span class="w"> </span><span class="s1">'checklist'</span><span class="p">,</span><span class="w"> </span><span class="s1">'blockquote'</span><span class="p">,</span><span class="w"> </span><span class="s1">'link'</span><span class="p">,</span><span class="w"> </span><span class="s1">'preview'</span><span class="p">],</span> <span class="p">});</span> </pre></div></td></tr></table></div> </div> </div> </div> <h3 id="4" class="text-pretty">4. 配置與客製化<div class="tooltip tooltip-bottom not-prose" data-tip="Copy"><button class="btn btn-xs btn-ghost btn-square copy-clipboard ms-1.5" type="button" data-clipboard="https://frutjam.com/zh-hant/plugins/markdown-editor#4" aria-label="Copy link"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></button></div></h3> <p>您可以透過傳遞 <code>options</code> 物件來完全自訂編輯器的行為和介面。如果省略選項，則使用<strong>預設</strong>值。</p> <div class="overflow-x-auto w-full not-prose"> <table class="table"> <thead> <tr> <th>財產</th> <th>類型</th> <th>預設</th> <th>目的</th> </tr> </thead> <tbody> <tr> <td><code>mode</code></td> <td><code>string</code></td> <td><code>'plain'</code></td> <td>設定初始視圖。使用 <code>'hybrid'</code> 獲得所見即所得體驗，或使用 <code>'plain'</code> 取得原始語法。</td> </tr> <tr> <td><code>placeholder</code></td> <td><code>string</code></td> <td><code>'Write...'</code></td> <td>編輯器為空時顯示的文字。</td> </tr> <tr> <td><code>toolbar</code></td> <td><code>array</code></td> <td><code>[...]</code></td> <td>定義顯示哪些工具以及顯示順序。</td> </tr> <tr> <td><code>footer</code></td> <td><code>false | object</code></td> <td>全部可見</td> <td>控制編輯器下方顯示的狀態列。設定為 <code>false</code> 以完全隱藏它，或傳遞一個物件來切換單一統計資訊。</td> </tr> <tr> <td><code>theme</code></td> <td><code>string</code></td> <td>遺傳</td> <td>明確設定編輯器主題（<code>'light'</code>、<code>'dark'</code>、<code>'snowberry'</code>、<code>'darkberry'</code>）。如果省略，編輯器將從最近的祖先元素或 <code><textarea></code> 本身繼承 <code>data-theme</code>。</td> </tr> <tr> <td><code>minHeight</code></td> <td><code>number</code></td> <td><code>200</code></td> <td>當內容較短時，編輯器將縮小到的最小高度（以像素為單位）。與 <code>maxHeight</code> 配對以設定自動增長範圍。</td> </tr> <tr> <td><code>maxHeight</code></td> <td><code>number</code></td> <td><code>500</code></td> <td>編輯器在非全螢幕模式下可以增長到的最大高度（以像素為單位）。一旦內容超過此高度，編輯器內就會出現捲軸。該編輯器還有一個拖曳手柄，因此使用者可以手動將其大小調整到超出此限制。</td> </tr> <tr> <td><code>onChange</code></td> <td><code>function</code></td> <td><code>undefined</code></td> <td>每次內容變更時都會觸發回調 - 鍵入、工具列操作、撤銷/重做和清單延續。接收目前的 markdown 字串作為其唯一的參數。</td> </tr> </tbody> </table> </div> <h4>🛠 工具列自訂</h4> <p>工具列是模組化的。您可以透過修改陣列來創建最低限度的體驗或功能齊全的電源套件。</p> <h5>可用工具</h5> <div class="overflow-x-auto w-full not-prose"> <table class="table"> <thead> <tr> <th>類別</th> <th>工具鍵</th> </tr> </thead> <tbody> <tr> <td>版式</td> <td><code>heading</code>, <code>bold</code>, <code>italic</code>, <code>strikethrough</code>, <code>blockquote</code></td> </tr> <tr> <td>清單</td> <td><code>ul</code> (子彈), <code>ol</code> (編號的), <code>checklist</code></td> </tr> <tr> <td>程式碼</td> <td><code>code</code> (排隊), <code>codeblock</code> (圍欄塊)</td> </tr> <tr> <td>刀片</td> <td><code>hr</code> (水平線), <code>table</code> (表格模板)</td> </tr> <tr> <td>媒體</td> <td><code>link</code>, <code>image</code></td> </tr> <tr> <td>編輯</td> <td><code>undo</code>, <code>redo</code>, <code>indent</code>, <code>outdent</code></td> </tr> <tr> <td>看法</td> <td><code>preview</code></td> </tr> </tbody> </table> </div> <h6>💡實施技巧：</h6> <ul> <li><strong>重新排序</strong>：按鈕會依照您在陣列中列出的確切順序顯示</li> <li><strong>刪除</strong>：只需從陣列中省略任何鍵（例如<code>image</code>）即可為使用者完全停用該功能</li> <li><strong>原生後備</strong>：如果您未在 JS 中提供 <code>placeholder</code>，外掛程式將自動使用 HTML <code><textarea></code> 中的 <code>placeholder</code> 屬性</li> </ul> <h4>📊 頁腳（狀態列）</h4> <p>頁腳位於編輯器下方，顯示遊標的<strong>行</strong>、<strong>列</strong>、文件的<strong>字元數</strong>以及可選的<strong>字數</strong>——所有這些都是即時更新的。預設情況下它是可見的，並且每個統計資料都可以獨立切換。</p> <div class="overflow-x-auto w-full not-prose"> <table class="table"> <thead> <tr> <th>鑰匙</th> <th>類型</th> <th>預設</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td><code>line</code></td> <td><code>boolean</code></td> <td><code>true</code></td> <td>顯示目前行號。</td> </tr> <tr> <td><code>col</code></td> <td><code>boolean</code></td> <td><code>true</code></td> <td>顯示目前的列號。</td> </tr> <tr> <td><code>chars</code></td> <td><code>boolean</code></td> <td><code>true</code></td> <td>顯示總字元數。</td> </tr> <tr> <td><code>words</code></td> <td><code>boolean</code></td> <td><code>false</code></td> <td>顯示總字數。預設為關閉 — 設定為 <code>true</code> 即可啟用。</td> </tr> </tbody> </table> </div> <h5>使用範例</h5> <div data-view="code" data-plan="free" data-lang="javascript" class="snippet-container collapsible-group join join-vertical border border-base-soft rounded-xl not-prose w-full"> <div class="header header-sm header-transparent join-item z-10"> <div class="header-content px-4"> <div class="header-start"> <span class="uppercase para-xs">javascript</span> </div> <div class="header-end "> <div class="tooltip tooltip-bottom" data-tip="複製"> <button type="button" class="snippet-copy-code-btn btn btn-xs btn-plain btn-square" aria-label="複製片段"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg> </button> </div> </div> </div> </div> <span class="divider divider-horizontal"></span> <div class="join-item collapsible collapsible-open"> <input type="checkbox" class="collapsible-toggle" id="snippet-toggle-4" aria-label="切換代碼可見性"> <div class="collapsible-content overflow-auto"> <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span class="normal"> 1</span> <span class="normal"> 2</span> <span class="normal"> 3</span> <span class="normal"> 4</span> <span class="normal"> 5</span> <span class="normal"> 6</span> <span class="normal"> 7</span> <span class="normal"> 8</span> <span class="normal"> 9</span> <span class="normal">10</span> <span class="normal">11</span> <span class="normal">12</span> <span class="normal">13</span> <span class="normal">14</span> <span class="normal">15</span> <span class="normal">16</span> <span class="normal">17</span> <span class="normal">18</span> <span class="normal">19</span> <span class="normal">20</span></pre></div></td><td class="code"><div><pre><span></span><span class="c1">// Default — line, col, and chars visible</span> <span class="ow">new</span><span class="w"> </span><span class="nx">MarkdownEditor</span><span class="p">(</span><span class="s1">'#editor'</span><span class="p">);</span> <span class="c1">// Disable the footer entirely</span> <span class="ow">new</span><span class="w"> </span><span class="nx">MarkdownEditor</span><span class="p">(</span><span class="s1">'#editor'</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">footer</span><span class="o">:</span><span class="w"> </span><span class="kc">false</span><span class="w"> </span><span class="p">});</span> <span class="c1">// Hide only character count</span> <span class="ow">new</span><span class="w"> </span><span class="nx">MarkdownEditor</span><span class="p">(</span><span class="s1">'#editor'</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">footer</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">chars</span><span class="o">:</span><span class="w"> </span><span class="kc">false</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="p">});</span> <span class="c1">// Hide line and column, keep character count</span> <span class="ow">new</span><span class="w"> </span><span class="nx">MarkdownEditor</span><span class="p">(</span><span class="s1">'#editor'</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">footer</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">line</span><span class="o">:</span><span class="w"> </span><span class="kc">false</span><span class="p">,</span><span class="w"> </span><span class="nx">col</span><span class="o">:</span><span class="w"> </span><span class="kc">false</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="p">});</span> <span class="c1">// Show only line number</span> <span class="ow">new</span><span class="w"> </span><span class="nx">MarkdownEditor</span><span class="p">(</span><span class="s1">'#editor'</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">footer</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">col</span><span class="o">:</span><span class="w"> </span><span class="kc">false</span><span class="p">,</span><span class="w"> </span><span class="nx">chars</span><span class="o">:</span><span class="w"> </span><span class="kc">false</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="p">});</span> <span class="c1">// Enable word count alongside the defaults</span> <span class="ow">new</span><span class="w"> </span><span class="nx">MarkdownEditor</span><span class="p">(</span><span class="s1">'#editor'</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">footer</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">words</span><span class="o">:</span><span class="w"> </span><span class="kc">true</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="p">});</span> <span class="c1">// Show word count only</span> <span class="ow">new</span><span class="w"> </span><span class="nx">MarkdownEditor</span><span class="p">(</span><span class="s1">'#editor'</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">footer</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">line</span><span class="o">:</span><span class="w"> </span><span class="kc">false</span><span class="p">,</span><span class="w"> </span><span class="nx">col</span><span class="o">:</span><span class="w"> </span><span class="kc">false</span><span class="p">,</span><span class="w"> </span><span class="nx">chars</span><span class="o">:</span><span class="w"> </span><span class="kc">false</span><span class="p">,</span><span class="w"> </span><span class="nx">words</span><span class="o">:</span><span class="w"> </span><span class="kc">true</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="p">});</span> </pre></div></td></tr></table></div> </div> </div> </div> <h3 id="5" class="text-pretty">5. 取得、設定和提交內容<div class="tooltip tooltip-bottom not-prose" data-tip="Copy"><button class="btn btn-xs btn-ghost btn-square copy-clipboard ms-1.5" type="button" data-clipboard="https://frutjam.com/zh-hant/plugins/markdown-editor#5" aria-label="Copy link"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></button></div></h3> <p><strong>MarkdownEditor</strong> 的核心優勢之一是它保持底層 <code><textarea></code> 完美同步。無論您使用現代 JavaScript 框架還是傳統後端（例如 Django、PHP 或 Laravel），工作流程都保持簡單且原生。</p> <h4>1. The Native Way（推薦）</h4> <p>由於編輯器增強了標準文字區域，因此您可以使用熟悉的 DOM 方法。這是無需學習新 API 即可與資料互動的最快方式。</p> <div data-view="code" data-plan="free" data-lang="javascript" class="snippet-container collapsible-group join join-vertical border border-base-soft rounded-xl not-prose w-full"> <div class="header header-sm header-transparent join-item z-10"> <div class="header-content px-4"> <div class="header-start"> <span class="uppercase para-xs">javascript</span> </div> <div class="header-end "> <div class="tooltip tooltip-bottom" data-tip="複製"> <button type="button" class="snippet-copy-code-btn btn btn-xs btn-plain btn-square" aria-label="複製片段"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg> </button> </div> </div> </div> </div> <span class="divider divider-horizontal"></span> <div class="join-item collapsible collapsible-open"> <input type="checkbox" class="collapsible-toggle" id="snippet-toggle-5" aria-label="切換代碼可見性"> <div class="collapsible-content overflow-auto"> <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span class="normal">1</span> <span class="normal">2</span> <span class="normal">3</span> <span class="normal">4</span> <span class="normal">5</span></pre></div></td><td class="code"><div><pre><span></span><span class="c1">// Retrieve content via ID</span> <span class="kd">const</span><span class="w"> </span><span class="nx">markdown</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'markdown-editor'</span><span class="p">).</span><span class="nx">value</span><span class="p">;</span> <span class="c1">// Set content via ID (The editor UI updates automatically)</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'markdown-editor'</span><span class="p">).</span><span class="nx">value</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"# New Heading Content"</span><span class="p">;</span> </pre></div></td></tr></table></div> </div> </div> </div> <h4>2. 使用變數引用</h4> <p>如果您有對 textarea 元素的引用，則可以直接使用它 - 不需要特定於庫的 API。</p> <div data-view="code" data-plan="free" data-lang="javascript" class="snippet-container collapsible-group join join-vertical border border-base-soft rounded-xl not-prose w-full"> <div class="header header-sm header-transparent join-item z-10"> <div class="header-content px-4"> <div class="header-start"> <span class="uppercase para-xs">javascript</span> </div> <div class="header-end "> <div class="tooltip tooltip-bottom" data-tip="複製"> <button type="button" class="snippet-copy-code-btn btn btn-xs btn-plain btn-square" aria-label="複製片段"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg> </button> </div> </div> </div> </div> <span class="divider divider-horizontal"></span> <div class="join-item collapsible collapsible-open"> <input type="checkbox" class="collapsible-toggle" id="snippet-toggle-6" aria-label="切換代碼可見性"> <div class="collapsible-content overflow-auto"> <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span class="normal">1</span> <span class="normal">2</span> <span class="normal">3</span> <span class="normal">4</span> <span class="normal">5</span> <span class="normal">6</span> <span class="normal">7</span></pre></div></td><td class="code"><div><pre><span></span><span class="kd">const</span><span class="w"> </span><span class="nx">textarea</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'markdown-editor'</span><span class="p">);</span> <span class="c1">// Retrieve content</span> <span class="kd">const</span><span class="w"> </span><span class="nx">markdown</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">textarea</span><span class="p">.</span><span class="nx">value</span><span class="p">;</span> <span class="c1">// Set content (the editor UI reflects this immediately)</span> <span class="nx">textarea</span><span class="p">.</span><span class="nx">value</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"## Updated via JS"</span><span class="p">;</span> </pre></div></td></tr></table></div> </div> </div> </div> <h4>3. 設定和讀取內容</h4> <p>設定初始內容的建議方法是直接在 <code><textarea></code> HTML 中 - 這自然適用於每個後端框架（Django、Laravel、Rails、PHP 等），並且編輯器會在 init 時自動呈現它。</p> <div data-view="code" data-plan="free" data-lang="html" class="snippet-container collapsible-group join join-vertical border border-base-soft rounded-xl not-prose w-full"> <div class="header header-sm header-transparent join-item z-10"> <div class="header-content px-4"> <div class="header-start"> <span class="uppercase para-xs">html</span> </div> <div class="header-end "> <div class="tooltip tooltip-bottom" data-tip="複製"> <button type="button" class="snippet-copy-code-btn btn btn-xs btn-plain btn-square" aria-label="複製片段"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg> </button> </div> </div> </div> </div> <span class="divider divider-horizontal"></span> <div class="join-item collapsible collapsible-open"> <input type="checkbox" class="collapsible-toggle" id="snippet-toggle-7" aria-label="切換代碼可見性"> <div class="collapsible-content overflow-auto"> <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span class="normal">1</span> <span class="normal">2</span></pre></div></td><td class="code"><div><pre><span></span><span class="cm"><!-- Recommended: set content server-side --></span> <span class="p"><</span><span class="nt">textarea</span> <span class="na">id</span><span class="o">=</span><span class="s">"markdown-editor"</span><span class="p">></span># Hello World<span class="p"></</span><span class="nt">textarea</span><span class="p">></span> </pre></div></td></tr></table></div> </div> </div> </div> <p>若要在執行時間讀取或更新內容，請使用本機 <code>textarea</code> 值。更新後呼叫 <code>editor.render()</code> 以刷新預覽層和混合層。</p> <div data-view="code" data-plan="free" data-lang="javascript" class="snippet-container collapsible-group join join-vertical border border-base-soft rounded-xl not-prose w-full"> <div class="header header-sm header-transparent join-item z-10"> <div class="header-content px-4"> <div class="header-start"> <span class="uppercase para-xs">javascript</span> </div> <div class="header-end "> <div class="tooltip tooltip-bottom" data-tip="複製"> <button type="button" class="snippet-copy-code-btn btn btn-xs btn-plain btn-square" aria-label="複製片段"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg> </button> </div> </div> </div> </div> <span class="divider divider-horizontal"></span> <div class="join-item collapsible collapsible-open"> <input type="checkbox" class="collapsible-toggle" id="snippet-toggle-8" aria-label="切換代碼可見性"> <div class="collapsible-content overflow-auto"> <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span class="normal">1</span> <span class="normal">2</span> <span class="normal">3</span> <span class="normal">4</span> <span class="normal">5</span> <span class="normal">6</span> <span class="normal">7</span> <span class="normal">8</span></pre></div></td><td class="code"><div><pre><span></span><span class="kd">const</span><span class="w"> </span><span class="nx">textarea</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'markdown-editor'</span><span class="p">);</span> <span class="c1">// Read</span> <span class="kd">const</span><span class="w"> </span><span class="nx">markdown</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">textarea</span><span class="p">.</span><span class="nx">value</span><span class="p">;</span> <span class="c1">// Update at runtime</span> <span class="nx">textarea</span><span class="p">.</span><span class="nx">value</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">'# New content'</span><span class="p">;</span> <span class="nx">editor</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span> </pre></div></td></tr></table></div> </div> </div> </div> <h4>4. 拆除編輯器－<code>destroy()</code></h4> <p>呼叫 <code>editor.destroy()</code> 刪除編輯器 DOM 包裝器並將原始 <code><textarea></code> 還原到其在文件中的位置。在單頁應用程式中卸載視圖時很有用。</p> <div data-view="code" data-plan="free" data-lang="javascript" class="snippet-container collapsible-group join join-vertical border border-base-soft rounded-xl not-prose w-full"> <div class="header header-sm header-transparent join-item z-10"> <div class="header-content px-4"> <div class="header-start"> <span class="uppercase para-xs">javascript</span> </div> <div class="header-end "> <div class="tooltip tooltip-bottom" data-tip="複製"> <button type="button" class="snippet-copy-code-btn btn btn-xs btn-plain btn-square" aria-label="複製片段"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg> </button> </div> </div> </div> </div> <span class="divider divider-horizontal"></span> <div class="join-item collapsible collapsible-open"> <input type="checkbox" class="collapsible-toggle" id="snippet-toggle-9" aria-label="切換代碼可見性"> <div class="collapsible-content overflow-auto"> <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span class="normal">1</span> <span class="normal">2</span> <span class="normal">3</span> <span class="normal">4</span></pre></div></td><td class="code"><div><pre><span></span><span class="kd">const</span><span class="w"> </span><span class="nx">editor</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">MarkdownEditor</span><span class="p">(</span><span class="s1">'#markdown-editor'</span><span class="p">);</span> <span class="c1">// Remove the editor and restore the plain textarea</span> <span class="nx">editor</span><span class="p">.</span><span class="nx">destroy</span><span class="p">();</span> </pre></div></td></tr></table></div> </div> </div> </div> <h5>使用 <code>onChange</code> 回應更改</h5> <p>傳遞 <code>onChange</code> 回呼以在每次內容變更時收到通知。接收目前的 Markdown 字串。</p> <div data-view="code" data-plan="free" data-lang="javascript" class="snippet-container collapsible-group join join-vertical border border-base-soft rounded-xl not-prose w-full"> <div class="header header-sm header-transparent join-item z-10"> <div class="header-content px-4"> <div class="header-start"> <span class="uppercase para-xs">javascript</span> </div> <div class="header-end "> <div class="tooltip tooltip-bottom" data-tip="複製"> <button type="button" class="snippet-copy-code-btn btn btn-xs btn-plain btn-square" aria-label="複製片段"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg> </button> </div> </div> </div> </div> <span class="divider divider-horizontal"></span> <div class="join-item collapsible collapsible-open"> <input type="checkbox" class="collapsible-toggle" id="snippet-toggle-10" aria-label="切換代碼可見性"> <div class="collapsible-content overflow-auto"> <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span class="normal">1</span> <span class="normal">2</span> <span class="normal">3</span> <span class="normal">4</span> <span class="normal">5</span></pre></div></td><td class="code"><div><pre><span></span><span class="kd">const</span><span class="w"> </span><span class="nx">editor</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">MarkdownEditor</span><span class="p">(</span><span class="s1">'#markdown-editor'</span><span class="p">,</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">onChange</span><span class="p">(</span><span class="nx">value</span><span class="p">)</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'Content changed:'</span><span class="p">,</span><span class="w"> </span><span class="nx">value</span><span class="p">.</span><span class="nx">length</span><span class="p">,</span><span class="w"> </span><span class="s1">'characters'</span><span class="p">);</span> <span class="w"> </span><span class="p">}</span> <span class="p">});</span> </pre></div></td></tr></table></div> </div> </div> </div> <h6>使用 <code>localStorage</code> 自動儲存草稿</h6> <p>使用 <code>onChange</code> 在每次按鍵時儲存草稿。在初始化編輯器之前透過預先填充文字區域來恢復它。</p> <div data-view="code" data-plan="free" data-lang="javascript" class="snippet-container collapsible-group join join-vertical border border-base-soft rounded-xl not-prose w-full"> <div class="header header-sm header-transparent join-item z-10"> <div class="header-content px-4"> <div class="header-start"> <span class="uppercase para-xs">javascript</span> </div> <div class="header-end "> <div class="tooltip tooltip-bottom" data-tip="複製"> <button type="button" class="snippet-copy-code-btn btn btn-xs btn-plain btn-square" aria-label="複製片段"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg> </button> </div> </div> </div> </div> <span class="divider divider-horizontal"></span> <div class="join-item collapsible collapsible-open"> <input type="checkbox" class="collapsible-toggle" id="snippet-toggle-11" aria-label="切換代碼可見性"> <div class="collapsible-content overflow-auto"> <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span class="normal"> 1</span> <span class="normal"> 2</span> <span class="normal"> 3</span> <span class="normal"> 4</span> <span class="normal"> 5</span> <span class="normal"> 6</span> <span class="normal"> 7</span> <span class="normal"> 8</span> <span class="normal"> 9</span> <span class="normal">10</span> <span class="normal">11</span> <span class="normal">12</span> <span class="normal">13</span> <span class="normal">14</span> <span class="normal">15</span> <span class="normal">16</span> <span class="normal">17</span> <span class="normal">18</span></pre></div></td><td class="code"><div><pre><span></span><span class="kd">const</span><span class="w"> </span><span class="nx">DRAFT_KEY</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">'my-page-draft'</span><span class="p">;</span> <span class="c1">// Restore saved draft before init (only if textarea starts empty)</span> <span class="kd">const</span><span class="w"> </span><span class="nx">textarea</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'markdown-editor'</span><span class="p">);</span> <span class="kd">const</span><span class="w"> </span><span class="nx">saved</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">localStorage</span><span class="p">.</span><span class="nx">getItem</span><span class="p">(</span><span class="nx">DRAFT_KEY</span><span class="p">);</span> <span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">saved</span><span class="w"> </span><span class="o">&&</span><span class="w"> </span><span class="o">!</span><span class="nx">textarea</span><span class="p">.</span><span class="nx">value</span><span class="p">)</span><span class="w"> </span><span class="nx">textarea</span><span class="p">.</span><span class="nx">value</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">saved</span><span class="p">;</span> <span class="c1">// Save on every change</span> <span class="kd">const</span><span class="w"> </span><span class="nx">editor</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">MarkdownEditor</span><span class="p">(</span><span class="s1">'#markdown-editor'</span><span class="p">,</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">onChange</span><span class="p">(</span><span class="nx">value</span><span class="p">)</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">localStorage</span><span class="p">.</span><span class="nx">setItem</span><span class="p">(</span><span class="nx">DRAFT_KEY</span><span class="p">,</span><span class="w"> </span><span class="nx">value</span><span class="p">);</span> <span class="w"> </span><span class="p">}</span> <span class="p">});</span> <span class="c1">// Clear draft after successful form submission</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'form'</span><span class="p">).</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">'submit'</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">localStorage</span><span class="p">.</span><span class="nx">removeItem</span><span class="p">(</span><span class="nx">DRAFT_KEY</span><span class="p">);</span> <span class="p">});</span> </pre></div></td></tr></table></div> </div> </div> </div> <h4>4. 輕鬆自動提交表單</h4> <p>由於 <strong>MarkdownEditor</strong> 直接建立在原生 <code><textarea></code> 上，因此它開箱即用，與每個後端框架（Django、Laravel、PHP、Ruby on Rails 等）相容。</p> <p>這就是「本地優先」理念的閃光點。您無需在提交表單之前手動同步資料。瀏覽器將編輯器視為標準輸入欄位。</p> <div data-view="code" data-plan="free" data-lang="html" class="snippet-container collapsible-group join join-vertical border border-base-soft rounded-xl not-prose w-full"> <div class="header header-sm header-transparent join-item z-10"> <div class="header-content px-4"> <div class="header-start"> <span class="uppercase para-xs">html</span> </div> <div class="header-end "> <div class="tooltip tooltip-bottom" data-tip="複製"> <button type="button" class="snippet-copy-code-btn btn btn-xs btn-plain btn-square" aria-label="複製片段"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg> </button> </div> </div> </div> </div> <span class="divider divider-horizontal"></span> <div class="join-item collapsible collapsible-open"> <input type="checkbox" class="collapsible-toggle" id="snippet-toggle-12" aria-label="切換代碼可見性"> <div class="collapsible-content overflow-auto"> <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span class="normal"> 1</span> <span class="normal"> 2</span> <span class="normal"> 3</span> <span class="normal"> 4</span> <span class="normal"> 5</span> <span class="normal"> 6</span> <span class="normal"> 7</span> <span class="normal"> 8</span> <span class="normal"> 9</span> <span class="normal">10</span> <span class="normal">11</span> <span class="normal">12</span></pre></div></td><td class="code"><div><pre><span></span><span class="p"><</span><span class="nt">form</span> <span class="na">method</span><span class="o">=</span><span class="s">"POST"</span> <span class="na">action</span><span class="o">=</span><span class="s">"/api/submit"</span><span class="p">></span> <span class="p"><</span><span class="nt">textarea</span> <span class="na">id</span><span class="o">=</span><span class="s">"markdown-editor"</span> <span class="na">name</span><span class="o">=</span><span class="s">"content"</span> <span class="na">class</span><span class="o">=</span><span class="s">"h-48"</span> <span class="na">rows</span><span class="o">=</span><span class="s">"5"</span><span class="p">></span> # Initial Content <span class="p"></</span><span class="nt">textarea</span><span class="p">></span> <span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"submit"</span><span class="p">></span>Submit to Server<span class="p"></</span><span class="nt">button</span><span class="p">></span> <span class="p"></</span><span class="nt">form</span><span class="p">></span> <span class="p"><</span><span class="nt">script</span><span class="p">></span> <span class="w"> </span><span class="c1">// Just initialize it. That's it.</span> <span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">MarkdownEditor</span><span class="p">(</span><span class="s1">'#markdown-editor'</span><span class="p">);</span> <span class="p"></</span><span class="nt">script</span><span class="p">></span> </pre></div></td></tr></table></div> </div> </div> </div> <p class="text-sm"> <strong>注意：</strong> MarkdownEditor 外掛程式必須初始化 </p> <p>只需使用標準 HTML <code><form></code>。文字區域上的 <code>name</code> 屬性是您的伺服器將用來識別內容的屬性。</p> <h5>🚀 為什麼它會改變後端的遊戲規則</h5> <p>由於編輯器保留本機 <code><textarea></code> 行為，因此您的伺服器將資料作為標準字串處理。所需的額外邏輯為零，無需 <code>preventDefault()</code> 也無需手動建構 <code>FormData</code>。</p> <h5>💡 為什麼這是一個「殺手級功能」：</h5> <p>大多數編輯器（如 Quill、Editor.js、simpleMDE、easyMDE）以複雜的 JSON 結構保存資料。如果開發人員使用這些，他們必須重寫他們的資料庫模式和渲染邏輯。</p> <p>透過 <strong>MarkdownEditor</strong>，開發人員可以使用舊網站，用編輯器取代普通的 <code><textarea></code>，而<strong>後端甚至不知道它發生了變化</strong>。它只是收到與往常相同的原始文本，但用戶獲得了 10 倍更好的體驗。</p> <div class="overflow-x-auto w-full"> <table class="table table-xs not-prose"> <thead> <tr> <th>框架/語言</th> <th>如何存取 Markdown 內容</th> </tr> </thead> <tbody> <tr> <td>PHP</td> <td>$_POST['content']</td> </tr> <tr> <td>Django</td> <td>request.POST.get('content')</td> </tr> <tr> <td>Node.js (Express)</td> <td>req.body.content</td> </tr> <tr> <td>Laravel</td> <td>$request->input('content')</td> </tr> <tr> <td>Ruby on Rails</td> <td>params[:content]</td> </tr> </tbody> </table> </div> <h2 id="" class="text-pretty">配置選項<div class="tooltip tooltip-bottom not-prose" data-tip="Copy"><button class="btn btn-xs btn-ghost btn-square copy-clipboard ms-1.5" type="button" data-clipboard="https://frutjam.com/zh-hant/plugins/markdown-editor#" aria-label="Copy link"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></button></div></h2> <h3 id="" class="text-pretty">🖼️高級圖片上傳<div class="tooltip tooltip-bottom not-prose" data-tip="Copy"><button class="btn btn-xs btn-ghost btn-square copy-clipboard ms-1.5" type="button" data-clipboard="https://frutjam.com/zh-hant/plugins/markdown-editor#" aria-label="Copy link"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></button></div></h3> <p>本地處理圖像上傳（而不是依賴緩慢且佔用大量記憶體的 Base64 字串）對於效能和 SEO 來說都是一個重大勝利。</p> <h4>配置選項</h4> <p>圖像工具支援 <code>fileInput</code> 配置來處理直接伺服器上傳。</p> <ul> <li><code>accept</code>：定義允許的影像格式陣列（例如「webp」、「avif」）</li> <li><code>uploadUrl</code>：指定將透過 <code>POST</code> 傳送 <code>File</code> 物件的後端端點</li> <li><code>params</code>：可選對象，用於與映像檔一起傳送附加資料（例如 CSRF 令牌、使用者 ID 或資料夾名稱）</li> </ul> <!-- <p>After a successful upload, the server must return the image path, which will be automatically populated in the URL field</p> --> <h4>使用範例（完整配置）</h4> <div data-view="code" data-plan="free" data-lang="javascript" class="snippet-container collapsible-group join join-vertical border border-base-soft rounded-xl not-prose w-full"> <div class="header header-sm header-transparent join-item z-10"> <div class="header-content px-4"> <div class="header-start"> <span class="uppercase para-xs">javascript</span> </div> <div class="header-end "> <div class="tooltip tooltip-bottom" data-tip="複製"> <button type="button" class="snippet-copy-code-btn btn btn-xs btn-plain btn-square" aria-label="複製片段"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg> </button> </div> </div> </div> </div> <span class="divider divider-horizontal"></span> <div class="join-item collapsible collapsible-open"> <input type="checkbox" class="collapsible-toggle" id="snippet-toggle-13" aria-label="切換代碼可見性"> <div class="collapsible-content overflow-auto"> <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span class="normal"> 1</span> <span class="normal"> 2</span> <span class="normal"> 3</span> <span class="normal"> 4</span> <span class="normal"> 5</span> <span class="normal"> 6</span> <span class="normal"> 7</span> <span class="normal"> 8</span> <span class="normal"> 9</span> <span class="normal">10</span> <span class="normal">11</span> <span class="normal">12</span> <span class="normal">13</span> <span class="normal">14</span> <span class="normal">15</span> <span class="normal">16</span> <span class="normal">17</span> <span class="normal">18</span> <span class="normal">19</span> <span class="normal">20</span> <span class="normal">21</span> <span class="normal">22</span></pre></div></td><td class="code"><div><pre><span></span><span class="kd">const</span><span class="w"> </span><span class="nx">options</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">placeholder</span><span class="o">:</span><span class="w"> </span><span class="s1">'Start writing...'</span><span class="p">,</span> <span class="w"> </span><span class="nx">toolbar</span><span class="o">:</span><span class="w"> </span><span class="p">[</span> <span class="w"> </span><span class="s1">'link'</span><span class="p">,</span> <span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">image</span><span class="o">:</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">fileInput</span><span class="o">:</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">accept</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="s1">'webp'</span><span class="p">,</span><span class="w"> </span><span class="s1">'avif'</span><span class="p">],</span><span class="w"> </span><span class="c1">// restrict the image upload format</span> <span class="w"> </span><span class="nx">uploadUrl</span><span class="o">:</span><span class="w"> </span><span class="s1">'/api/upload'</span><span class="p">,</span><span class="w"> </span><span class="c1">// Your upload endpoint</span> <span class="w"> </span><span class="nx">params</span><span class="o">:</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">_token</span><span class="o">:</span><span class="w"> </span><span class="s1">'your_csrf_token_here'</span><span class="p">,</span><span class="w"> </span><span class="c1">// Essential for Laravel/Django</span> <span class="w"> </span><span class="nx">folder</span><span class="o">:</span><span class="w"> </span><span class="s1">'blog_posts'</span> <span class="w"> </span><span class="p">}</span> <span class="w"> </span><span class="p">},</span> <span class="w"> </span><span class="c1">// Supports boolean: true/false OR object: { required: true }</span> <span class="w"> </span><span class="nx">altInput</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">required</span><span class="o">:</span><span class="w"> </span><span class="kc">true</span><span class="w"> </span><span class="p">}</span> <span class="w"> </span><span class="p">}</span> <span class="w"> </span><span class="p">},</span> <span class="w"> </span><span class="s1">'preview'</span> <span class="w"> </span><span class="p">],</span> <span class="p">}</span> <span class="kd">const</span><span class="w"> </span><span class="nx">editor</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">MarkdownEditor</span><span class="p">(</span><span class="s1">'#markdown-editor'</span><span class="p">,</span><span class="w"> </span><span class="nx">options</span><span class="p">);</span> </pre></div></td></tr></table></div> </div> </div> </div> <h4>📡 伺服器整合詳細信息</h4> <h5>1. 請求</h5> <p>編輯器以 <code>multipart/form-data</code> 形式傳送 <code>POST</code> 請求。預設情況下，它包括：</p> <ul> <li><code>image_file</code>：實際的文件對象</li> <li><code>image_alt</code>：使用者輸入的替代文本</li> <li>...加上 <code>params</code> 物件中定義的任何自訂數據</li> </ul> <h5>2. 所需的回應</h5> <p>若要確認上傳成功並將映像插入編輯器，您的伺服器<strong>必須</strong>傳回以下 JSON 結構：</p> <div data-view="code" data-plan="free" data-lang="json" class="snippet-container collapsible-group join join-vertical border border-base-soft rounded-xl not-prose w-full"> <div class="header header-sm header-transparent join-item z-10"> <div class="header-content px-4"> <div class="header-start"> <span class="uppercase para-xs">json</span> </div> <div class="header-end "> <div class="tooltip tooltip-bottom" data-tip="複製"> <button type="button" class="snippet-copy-code-btn btn btn-xs btn-plain btn-square" aria-label="複製片段"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg> </button> </div> </div> </div> </div> <span class="divider divider-horizontal"></span> <div class="join-item collapsible collapsible-open"> <input type="checkbox" class="collapsible-toggle" id="snippet-toggle-14" aria-label="切換代碼可見性"> <div class="collapsible-content overflow-auto"> <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span class="normal">1</span> <span class="normal">2</span> <span class="normal">3</span> <span class="normal">4</span></pre></div></td><td class="code"><div><pre><span></span><span class="p">{</span> <span class="w"> </span><span class="nt">"success"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span> <span class="w"> </span><span class="nt">"image_path"</span><span class="p">:</span><span class="w"> </span><span class="s2">"https://cdn.yourdomain.com/uploads/image.webp"</span> <span class="p">}</span> </pre></div></td></tr></table></div> </div> </div> </div> <p><strong>注意</strong>：確保使用 <code>image_path</code> 鍵作為上傳圖像的 URL。</p> <h4>圖像替代文字驗證 (<code>altInput</code>)</h4> <p>為了確保您的內容保持可訪問性和 SEO 友善性，<code>MarkdownEditor</code> 預設會強制執行替代文字驗證。您可以使用布林簡寫或詳細物件來配置此行為。</p> <ul> <li><strong>預設行為</strong>：如果未定義<code>altInput</code>，則預設為<code>{ required: true }</code></li> <li><strong>強制輔助使用</strong>：在提供替代說明之前，使用者將無法插入影像</li> </ul> <h5>設定範例：</h5> <h6>1.預設（無需配置）</h6> <div data-view="code" data-plan="free" data-lang="javascript" class="snippet-container collapsible-group join join-vertical border border-base-soft rounded-xl not-prose w-full"> <div class="header header-sm header-transparent join-item z-10"> <div class="header-content px-4"> <div class="header-start"> <span class="uppercase para-xs">javascript</span> </div> <div class="header-end "> <div class="tooltip tooltip-bottom" data-tip="複製"> <button type="button" class="snippet-copy-code-btn btn btn-xs btn-plain btn-square" aria-label="複製片段"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg> </button> </div> </div> </div> </div> <span class="divider divider-horizontal"></span> <div class="join-item collapsible collapsible-open"> <input type="checkbox" class="collapsible-toggle" id="snippet-toggle-15" aria-label="切換代碼可見性"> <div class="collapsible-content overflow-auto"> <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span class="normal">1</span> <span class="normal">2</span> <span class="normal">3</span> <span class="normal">4</span></pre></div></td><td class="code"><div><pre><span></span><span class="c1">// Alt text is REQUIRED by default</span> <span class="nx">image</span><span class="o">:</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">fileInput</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">uploadUrl</span><span class="o">:</span><span class="w"> </span><span class="s1">'/api/upload'</span><span class="w"> </span><span class="p">}</span> <span class="p">}</span> </pre></div></td></tr></table></div> </div> </div> </div> <h6>2. 速記（禁用驗證）</h6> <p>如果您想允許沒有描述的圖像，只需將布林值設為 <code>false</code> 即可。</p> <div data-view="code" data-plan="free" data-lang="javascript" class="snippet-container collapsible-group join join-vertical border border-base-soft rounded-xl not-prose w-full"> <div class="header header-sm header-transparent join-item z-10"> <div class="header-content px-4"> <div class="header-start"> <span class="uppercase para-xs">javascript</span> </div> <div class="header-end "> <div class="tooltip tooltip-bottom" data-tip="複製"> <button type="button" class="snippet-copy-code-btn btn btn-xs btn-plain btn-square" aria-label="複製片段"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg> </button> </div> </div> </div> </div> <span class="divider divider-horizontal"></span> <div class="join-item collapsible collapsible-open"> <input type="checkbox" class="collapsible-toggle" id="snippet-toggle-16" aria-label="切換代碼可見性"> <div class="collapsible-content overflow-auto"> <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span class="normal">1</span> <span class="normal">2</span> <span class="normal">3</span></pre></div></td><td class="code"><div><pre><span></span><span class="nx">image</span><span class="o">:</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">altInput</span><span class="o">:</span><span class="w"> </span><span class="kc">false</span><span class="w"> </span><span class="c1">// Users can now skip the alt text field</span> <span class="p">}</span> </pre></div></td></tr></table></div> </div> </div> </div> <h6>3. 基於物件（顯）</h6> <div data-view="code" data-plan="free" data-lang="javascript" class="snippet-container collapsible-group join join-vertical border border-base-soft rounded-xl not-prose w-full"> <div class="header header-sm header-transparent join-item z-10"> <div class="header-content px-4"> <div class="header-start"> <span class="uppercase para-xs">javascript</span> </div> <div class="header-end "> <div class="tooltip tooltip-bottom" data-tip="複製"> <button type="button" class="snippet-copy-code-btn btn btn-xs btn-plain btn-square" aria-label="複製片段"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg> </button> </div> </div> </div> </div> <span class="divider divider-horizontal"></span> <div class="join-item collapsible collapsible-open"> <input type="checkbox" class="collapsible-toggle" id="snippet-toggle-17" aria-label="切換代碼可見性"> <div class="collapsible-content overflow-auto"> <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span class="normal">1</span> <span class="normal">2</span> <span class="normal">3</span> <span class="normal">4</span> <span class="normal">5</span></pre></div></td><td class="code"><div><pre><span></span><span class="nx">image</span><span class="o">:</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">altInput</span><span class="o">:</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">required</span><span class="o">:</span><span class="w"> </span><span class="kc">false</span><span class="w"> </span><span class="c1">// Disables alt text validation — users can skip the alt field</span> <span class="w"> </span><span class="p">}</span> <span class="p">}</span> </pre></div></td></tr></table></div> </div> </div> </div> <h4>標準影像使用（無<code>fileInput</code>）：</h4> <p>如果未配置 <code>fileInput</code>，則編輯器預設為簡單的基於 URL 的模式。如果您的用戶主要連結到外部圖像主機，那麼這是理想的選擇。</p> <div data-view="code" data-plan="free" data-lang="javascript" class="snippet-container collapsible-group join join-vertical border border-base-soft rounded-xl not-prose w-full"> <div class="header header-sm header-transparent join-item z-10"> <div class="header-content px-4"> <div class="header-start"> <span class="uppercase para-xs">javascript</span> </div> <div class="header-end "> <div class="tooltip tooltip-bottom" data-tip="複製"> <button type="button" class="snippet-copy-code-btn btn btn-xs btn-plain btn-square" aria-label="複製片段"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg> </button> </div> </div> </div> </div> <span class="divider divider-horizontal"></span> <div class="join-item collapsible collapsible-open"> <input type="checkbox" class="collapsible-toggle" id="snippet-toggle-18" aria-label="切換代碼可見性"> <div class="collapsible-content overflow-auto"> <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span class="normal">1</span> <span class="normal">2</span> <span class="normal">3</span> <span class="normal">4</span> <span class="normal">5</span> <span class="normal">6</span> <span class="normal">7</span> <span class="normal">8</span></pre></div></td><td class="code"><div><pre><span></span><span class="kd">const</span><span class="w"> </span><span class="nx">options</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">toolbar</span><span class="o">:</span><span class="w"> </span><span class="p">[</span> <span class="w"> </span><span class="s1">'link'</span><span class="p">,</span> <span class="w"> </span><span class="s1">'image'</span><span class="p">,</span> <span class="w"> </span><span class="s1">'preview'</span> <span class="w"> </span><span class="p">],</span> <span class="p">}</span> <span class="kd">const</span><span class="w"> </span><span class="nx">editor</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">MarkdownEditor</span><span class="p">(</span><span class="s1">'#markdown-editor'</span><span class="p">,</span><span class="w"> </span><span class="nx">options</span><span class="p">);</span> </pre></div></td></tr></table></div> </div> </div> </div> <h5>💡 為什麼要使用參數？</h5> <p>在 Laravel 或 Django 等框架中，如果沒有 CSRF 令牌，則無法上傳檔案。透過將 <code>_token</code> 新增至 <code>params</code> 對象，您的請求將無縫地通過後端的安全中介軟體，從而維護伺服器端控制器的「零邏輯」理念。</p> <h3 id="" class="text-pretty">🔀 編輯模式<div class="tooltip tooltip-bottom not-prose" data-tip="Copy"><button class="btn btn-xs btn-ghost btn-square copy-clipboard ms-1.5" type="button" data-clipboard="https://frutjam.com/zh-hant/plugins/markdown-editor#" aria-label="Copy link"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></button></div></h3> <p><strong>MarkdownEditor</strong> 提供兩種不同的方式來撰寫和格式化內容。您可以在傳統的以語法為中心的視圖或現代的視覺優先體驗之間切換。</p> <h4>配置</h4> <p>您可以在初始化期間使用 <code>mode</code> 屬性定義啟動模式。</p> <ul> <li><code>plain</code>（<strong>預設</strong>）：乾淨、高效能的 Markdown 環境，其中語法（如 <code>**bold**</code> 或 <code># header</code>）可見。開發人員和 Markdown 純粹主義者的理想選擇</li> <li><code>hybrid</code>：所見即所得的體驗，可在您鍵入時即時呈現格式（粗體、斜體、標題），同時仍保持底層 Markdown 結構。</li> </ul> <h5>執行：</h5> <div data-view="code" data-plan="free" data-lang="javascript" class="snippet-container collapsible-group join join-vertical border border-base-soft rounded-xl not-prose w-full"> <div class="header header-sm header-transparent join-item z-10"> <div class="header-content px-4"> <div class="header-start"> <span class="uppercase para-xs">javascript</span> </div> <div class="header-end "> <div class="tooltip tooltip-bottom" data-tip="複製"> <button type="button" class="snippet-copy-code-btn btn btn-xs btn-plain btn-square" aria-label="複製片段"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg> </button> </div> </div> </div> </div> <span class="divider divider-horizontal"></span> <div class="join-item collapsible collapsible-open"> <input type="checkbox" class="collapsible-toggle" id="snippet-toggle-19" aria-label="切換代碼可見性"> <div class="collapsible-content overflow-auto"> <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span class="normal"> 1</span> <span class="normal"> 2</span> <span class="normal"> 3</span> <span class="normal"> 4</span> <span class="normal"> 5</span> <span class="normal"> 6</span> <span class="normal"> 7</span> <span class="normal"> 8</span> <span class="normal"> 9</span> <span class="normal">10</span> <span class="normal">11</span> <span class="normal">12</span></pre></div></td><td class="code"><div><pre><span></span><span class="c1">// Default initialization (Plain Mode)</span> <span class="ow">new</span><span class="w"> </span><span class="nx">MarkdownEditor</span><span class="p">(</span><span class="s1">'#markdown-editor'</span><span class="p">);</span> <span class="c1">// Explicit Plain Mode</span> <span class="ow">new</span><span class="w"> </span><span class="nx">MarkdownEditor</span><span class="p">(</span><span class="s1">'#markdown-editor'</span><span class="p">,</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">mode</span><span class="o">:</span><span class="w"> </span><span class="s1">'plain'</span> <span class="p">});</span> <span class="c1">// Hybrid (Visual) Mode</span> <span class="ow">new</span><span class="w"> </span><span class="nx">MarkdownEditor</span><span class="p">(</span><span class="s1">'#markdown-editor'</span><span class="p">,</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">mode</span><span class="o">:</span><span class="w"> </span><span class="s1">'hybrid'</span> <span class="p">});</span> </pre></div></td></tr></table></div> </div> </div> </div> <h5>混合和普通模式預覽：</h5> <h6>混合模式</h6> <p>當您鍵入時，視覺格式會即時呈現。</p> <textarea class="hybrid-markdown-editor mb-4" rows="5" placeholder="Start writing..."># Hybrid mode markdown editor This will render visual styles immediately.

普通模式（預設）