Editor.md 完全指南基于 CodeMirror、jQuery 與 Marked 的開源可嵌入 Markdown 在線編輯器【免費下載鏈接】editor.mdThe open source embeddable online markdown editor (component).項目地址: https://gitcode.com/gh_mirrors/ed/editor.mdEditor.md 是一款開源的、可嵌入到任意 Web 頁面中的 Markdown 在線編輯器組件核心基于 CodeMirror、jQuery 與 Marked 構建同時整合了 KaTeX、Flowchart.js、Sequence Diagram 等擴展能力。本文將圍繞該組件的安裝方式、兩種核心使用場景創(chuàng)建編輯器、Markdown 轉 HTML、全部可配置選項、擴展語法與實例 API 展開完整講解并結合倉庫源碼src/editormd.js說明其底層實現原理幫助你在自己的項目中快速集成一個功能完整的在線 Markdown 編輯器。Editor.md 編輯器運行截圖左側 Markdown 源碼編輯區(qū)與右側實時預覽區(qū)項目定位與核心特性Editor.md 采用 jQuery 插件式的設計風格調用editormd(id, options)即可在指定容器內構建一個完整的編輯器實例。從 源碼入口 可以看到editormd本身是一個工廠函數返回editormd.fn.init的實例對象倉庫版本號為 1.5.0見 src/editormd.js#L49-L52 與 package.json。其核心特性可歸納為以下幾類語法支持兼容標準 Markdown / CommonMark 以及 GFMGitHub Flavored Markdown并可通過mode選項切換為純代碼編輯模式變身為代碼編輯器參考示例 examples/change-mode.html。編輯能力實時預覽watch、圖片跨域上傳、預格式文本 / 代碼塊 / 表格插入、代碼折疊、跳轉到行、搜索替換、只讀模式、自定義主題、多語言i18n、HTML 實體、代碼語法高亮等。Markdown 擴展語法ToC 目錄examples/toc.html、Emoji 表情examples/emoji.html、Task lists 任務列表examples/task-lists.html、鏈接examples/links.html?？茖W公式與圖表TeX/LaTeX 公式基于 KaTeX見 examples/katex.html、流程圖 Flowchartexamples/flowchart.html與時序圖 Sequence Diagramexamples/sequence-diagram.html。HTML 標簽解析與安全過濾支持識別并解析 HTML 標簽可自定義過濾危險標簽及屬性examples/html-tags-decode.html。模塊化與擴展支持 AMD / CMD 模塊加載器Require.js Sea.js見 examples/use-requirejs.html、examples/use-seajs.html并支持自定義擴展插件examples/define-plugin.html。兼容性兼容主流瀏覽器IE8與 Zepto.jsexamples/use-zepto.html支持 iPad 等平板設備。技術棧與依賴Editor.md 的渲染與編輯能力并非全部自研而是建立在以下成熟的開源庫之上倉庫內lib/目錄已包含全部依賴的本地副本依賴用途CodeMirror核心代碼編輯區(qū)提供語法高亮、代碼折疊、搜索替換等編輯器能力markedMarkdown 解析為 HTML倉庫內置 lib/marked.min.jsjQueryDOM 操作與插件機制基礎也兼容 Zepto.jsFontAwesome工具欄圖標字體fonts/github-markdown.css預覽區(qū) Markdown 正文樣式scss/github-markdown.scssKaTeXTeX 數學公式渲染prettify.js代碼語法高亮內置 lib/prettify.min.jsRaphael.js / flowchart.js / sequence-diagram.js流程圖與時序圖渲染內置 lib/raphael.min.js、lib/flowchart.min.js、lib/sequence-diagram.min.js其中path配置項就是告訴 Editor.md 這些依賴模塊文件CodeMirror、marked 等存放的目錄用于按需動態(tài)加載。從源碼 src/editormd.js#L483-L519 的loadQueues()可以看出加載策略只有啟用了flowChart或sequenceDiagram時才會依次加載 raphael、underscore、flowchart / sequence-diagram 等腳本同時 IE8 環(huán)境下會跳過這些圖表功能。安裝方式直接下載從倉庫下載完整源碼包含css/、lib/、examples/等目錄將editormd.min.js、editormd.min.css及l(fā)ib/目錄部署到你的項目靜態(tài)資源目錄即可。NPM 安裝npm install editor.mdBower 安裝bower install editor.md快速開始創(chuàng)建一個 Markdown 編輯器最簡單的集成方式是在頁面中放置一個容器div并在其中嵌入一個隱藏的textarea作為 Markdown 源碼的載體。如果省略textareaEditor.md 會自動補建一個這一點在源碼 src/editormd.js#L390-L396 中有明確實現。link relstylesheet hrefeditor.md/css/editormd.min.css / div ideditor !-- Tips: Editor.md can auto append a textarea tag -- textarea styledisplay:none;### Hello Editor.md !/textarea /div script srcjquery.min.js/script script srceditor.md/editormd.min.js/script script typetext/javascript $(function() { var editor editormd(editor, { // width: 100%, // height: 100%, // markdown: xxxx, // dynamic set Markdown text path : editor.md/lib/ // Autoload modules mode, codemirror, marked... dependents libs path }); }); /script要點說明path必須指向依賴庫CodeMirror、marked 等所在目錄默認值為./lib/markdown選項可動態(tài)設置初始 Markdown 文本若初始化時textarea已有內容則優(yōu)先使用 textarea 內容可通過appendMarkdown追加內容見 src/editormd.js#L423-L431未顯式指定name時生成的表單 textarea 默認使用{編輯器id}-markdown-doc作為 name見 src/editormd.js#L400-L403便于表單提交。使用模塊化加載器如果項目使用模塊化加載器可參考倉庫內示例examples/use-requirejs.htmlAMDRequire.jsexamples/use-seajs.htmlCMDSea.jsexamples/manually-load-modules.html手動加載模塊配合autoLoadModules: false源碼 src/editormd.js#L442-L471 展示了 AMD 環(huán)境下的分支邏輯當檢測到define.amd或設置autoLoadModules: false時直接使用全局已有的 CodeMirror / marked 實例跳過動態(tài)加載流程。Markdown 轉 HTML純渲染模式如果你不需要編輯能力只想在頁面中渲染一段 Markdown例如服務端輸出的文章正文可以使用靜態(tài)方法editormd.markdownToHTML(id, options)。它同樣支持 ToC、Emoji、TeX、Flowchart 等全部擴展語法對應完整示例 examples/html-preview-markdown-to-html.html以及自定義 ToC 容器版本 examples/html-preview-markdown-to-html-custom-toc-container.html。link relstylesheet hrefeditormd/css/editormd.preview.css / div idtest-markdown-view !-- Server-side output Markdown text -- textarea styledisplay:none;### Hello world!/textarea /div script srcjquery.min.js/script script srceditormd/editormd.js/script script srceditormd/lib/marked.min.js/script script srceditormd/lib/prettify.min.js/script script typetext/javascript $(function() { var testView editormd.markdownToHTML(test-markdown-view, { // markdown : [TOC]\n### Hello world!\n## Heading 2, // Also, you can dynamic set Markdown text // htmlDecode : true, // Enable / disable HTML tag encode. // htmlDecode : style,script,iframe, // Note: If enabled, you should filter some dangerous HTML tags for website security. }); }); /script從源碼 src/editormd.js#L3885-L4014 可以看到該方法的完整實現它會先讀取容器內 textarea 的值或markdown選項通過自定義 renderereditormd.markedRenderer完成擴展語法解析隨后根據htmlDecode決定是否過濾 HTML 標簽最后把解析結果追加到容器并可選觸發(fā)代碼高亮與圖表渲染。注意Editor.md不支持HTML 轉 Markdown 的反向解析官方說明該能力可能在未來的版本中提供。完整配置選項OptionsEditor.md 的全部配置及默認值定義在源碼的 editormd.defaults 中初始化時通過$.extend(true, editormd.defaults, options)深度合并見 src/editormd.js#L356因此以下每一項都可以在實例化時覆蓋?；A與外觀選項默認值說明modegfm編輯模式gfm或markdown設為其它值時作為 CodeMirror 的代碼編輯模式name表單元素 name用于表單提交value非 gfm/markdown 模式下 CodeMirror 的初始值themeEditor.md 自帶主題v1.5.0 起v1.5.0 之前該選項對應 CodeMirror 主題editorThemedefault編輯區(qū)主題v1.5.0 起對應 CodeMirror 主題previewTheme預覽區(qū)主題markdownMarkdown 源碼初始化時寫入編輯區(qū)appendMarkdown若 textarea 已有內容追加到其后width/height100%/100%編輯器尺寸傳入數字時自動追加px見 src/editormd.js#L380-L388placeholderEnjoy Markdown! coding now...編輯區(qū)占位提示文本fontSize13px編輯區(qū)字號autoHeightfalse是否隨內容自動增高autoFocustrue是否自動聚焦編輯區(qū)路徑與加載選項默認值說明path./lib/依賴模塊CodeMirror、marked 等所在目錄pluginPath插件目錄為空時默認使用path ../plugins/見 src/editormd.js#L372autoLoadModulestrue是否自動按需加載依賴模塊delay300延遲解析 Markdown 為 HTML 的間隔毫秒編輯交互選項默認值說明watchtrue是否開啟實時預覽gotoLinetrue啟用/禁用跳轉到指定行codeFoldfalse是否啟用代碼折疊autoCloseTagstrue自動閉合 HTML 標簽searchReplacetrue啟用/禁用CodeMirror搜索與替換syncScrollingtrue編輯區(qū)與預覽區(qū)同步滾動可選true/false/singlereadOnlyfalse只讀模式tabSize4Tab 寬度indentUnit4縮進單位lineNumberstrue顯示行號lineWrappingtrue自動換行autoCloseBracketstrue自動閉合括號showTrailingSpacetrue高亮行尾空格matchBracketstrue括號匹配高亮indentWithTabstrue使用 Tab 縮進styleSelectedTexttrue高亮選中文本matchWordHighlighttrue單詞高亮可選true/false/onselectedstyleActiveLinetrue高亮當前行disabledKeyMaps[]禁用的快捷鍵映射對話框選項默認值說明dialogLockScreentrue對話框鎖屏dialogShowMasktrue顯示遮罩層dialogDraggabletrue對話框可拖拽dialogMaskBgColor#fff遮罩背景色dialogMaskOpacity0.1遮罩透明度表單與 HTML 輸出選項默認值說明saveHTMLToTextareafalse啟用后會自動生成一個textarea name{editor-id}-html-code將解析出的 HTML 寫入其中便于隨表單提交到服務端見 src/editormd.js#L407圖片上傳選項默認值說明imageUploadfalse啟用/禁用圖片上傳imageFormats[jpg, jpeg, gif, png, bmp, webp]允許上傳的圖片格式imageUploadURL上傳接口地址crossDomainUploadfalse啟用/禁用跨域上傳uploadCallbackURL跨域上傳回調地址完整的上傳實現可參考 examples/php/upload.php、examples/php/cross-domain-upload.php 與 examples/php/editormd.uploader.class.php以及示例頁面 examples/image-upload.html、examples/image-cross-domain-upload.html。擴展語法開關選項默認值說明toctrue是否生成目錄ToCtocmfalse是否使用[TOCM]語法自動創(chuàng)建 ToC 下拉菜單tocTitleToC 下拉菜單按鈕文本tocDropdownfalse啟用/禁用 ToC 下拉菜單tocContainer自定義 ToC 容器選擇器tocStartLevel1從 H1 開始生成目錄htmlDecodefalse是否解析 HTML 標簽傳字符串如style,script,iframe可指定需要過濾的標簽pageBreaktrue解析分頁符[]atLinktrue是否啟用鏈接解析emailLinktrue是否自動鏈接郵箱地址taskListfalse啟用 GFM 任務列表emojifalse啟用 Emoji支持 Github Emoji、Twitter EmojiTwemoji、FontAwesome 圖標:fa-xxx:以及 Editor.md logo 圖標:editormd-logo:/:editormd-logo-1x:1~8xtexfalse啟用 TeXLaTeX公式基于 KaTeXflowChartfalse啟用流程圖flowChart.js 僅支持 IE9sequenceDiagramfalse啟用時序圖sequenceDiagram.js 僅支持 IE9previewCodeHighlighttrue預覽區(qū)代碼是否高亮這些開關在markdownToHTML模式下同樣生效對應默認值見 src/editormd.js#L3886-L3907渲染時會統一傳給自定義 marked renderer見 src/editormd.js#L3924-L3937。工具欄選項默認值說明toolbartrue顯示/隱藏工具欄toolbarAutoFixedtrue窗口滾動時工具欄是否自動固定toolbarIconsfull工具欄圖標模式full、simple、mini對應editormd.toolbarModes見 src/editormd.js#L54-L77toolbarTitles{}自定義工具欄按鈕標題toolbarHandlers{}自定義工具欄按鈕點擊處理器toolbarCustomIcons{}使用自定義 HTML 創(chuàng)建工具欄圖標替代默認a標簽toolbarIconTexts{}自定義圖標文本toolbarIcons三種預設模式的差異源碼 src/editormd.js#L54-L77full全部功能包括 undo/redo、格式化bold/del/italic/quote/ucwords/uppercase/lowercase、標題 h1-h6、列表、鏈接/引用鏈接/圖片/代碼/預格式文本/代碼塊/表格/日期時間/Emoji/HTML 實體/分頁符、跳轉行/watch/preview/fullscreen/clear/search以及 help/infosimple精簡模式去除鏈接、圖片、表格等插入類按鈕保留格式化、標題、列表與預覽/全屏/幫助mini極簡模式僅保留 undo/redo、watch/preview、help/info。事件回調回調觸發(fā)時機onload編輯器加載完成onresize編輯器尺寸變化onchange編輯內容變化onwatch/onunwatch開啟/關閉實時預覽onpreviewing/onpreviewed預覽開始前/預覽完成后onfullscreen/onfullscreenExit進入/退出全屏onscroll/onpreviewscroll編輯區(qū)/預覽區(qū)滾動對應示例可參考 examples/onload.html、examples/onchange.html、examples/onwatch-onunwatch.html、examples/onpreviewing-onpreviewed.html、examples/onfullscreen.html、examples/onscroll-onpreviewscroll.html、examples/onresize.html。多語言lang通過lang選項可自定義界面文案工具欄按鈕、按鈕、對話框文本倉庫內置了中文簡體默認見 src/editormd.js#L217-L279、英文languages/en.js與繁體中文languages/zh-tw.js。多語言切換示例見 examples/multi-languages.html。lang : { // Language data, you can custom your language. name : zh-cn, description : 開源在線Markdown編輯器br/Open source online Markdown editor., tocTitle : 目錄, toolbar : { //... }, button: { //... }, dialog : { //... } //... }實例 API常用方法與調用鏈編輯器實例化后返回的對象提供了完整的操作 API核心方法實現見 src/editormd.js#L1862-L2610 區(qū)間方法說明getMarkdown()/getValue()獲取當前 Markdown 源碼CodeMirror value見 src/editormd.js#L2247-L2260setValue(value)設置 Markdown 源碼src/editormd.js#L2270-L2274appendMarkdown(md)追加 Markdown 內容src/editormd.js#L2217clear()清空編輯器src/editormd.js#L2283-L2287getHTML()獲取解析后的 HTML 源碼需先啟用saveHTMLToTextareasrc/editormd.js#L2296-L2305getPreviewedHTML()獲取預覽區(qū)當前 HTML需watch開啟src/editormd.js#L2325-L2334watch(callback)/unwatch(callback)開啟/關閉實時預覽src/editormd.js#L2343、src/editormd.js#L2387previewing()全窗口預覽 HTMLShift ESC 還原fullscreen()全屏ESC 還原resize(width, height)調整編輯器尺寸src/editormd.js#L1862表單取值場景可參考 examples/form-get-value.html選中文本的獲取與替換見 examples/set-get-replace-selection.html。自定義擴展與插件Editor.md 的工具欄處理器、插件機制都支持自定義。倉庫提供了插件模板 plugins/plugin-template.js 與完整示例插件 plugins/test-plugin/test-plugin.js以及多種內置對話框插件代碼塊plugins/code-block-dialog/code-block-dialog.js、Emojiplugins/emoji-dialog/emoji-dialog.js、圖片plugins/image-dialog/image-dialog.js、鏈接plugins/link-dialog/link-dialog.js、表格plugins/table-dialog/table-dialog.js、幫助plugins/help-dialog/help-dialog.js等。自定義插件教程見 examples/define-plugin.html工具欄深度定制參考 examples/custom-toolbar.html。其它實用示例索引倉庫 examples/ 目錄提供了 50 個開箱即用的示例頁面除上述外還包括多實例共存examples/multi-editormd.html動態(tài)創(chuàng)建examples/dynamic-create-editormd.html代碼折疊examples/code-fold.html自定義快捷鍵examples/custom-keyboard-shortcuts.html主題定制examples/themes.html工具欄自動固定examples/toolbar-auto-fixed.html延遲渲染預覽examples/delay-renderer-preview.html分頁符examples/page-break.html外部調用不依賴 jQuery 環(huán)境examples/external-use.html測試用例集中在 tests/ 目錄基于 QUnit可配合源碼理解各功能的邊界行為。版本與許可Editor.md 當前版本為 1.5.0見 package.json 與 src/editormd.js#L50歷史變更記錄見 CHANGE.md已知問題見 BUGS.md。項目采用 MIT 開源協議LICENSE可自由用于商業(yè)與非商業(yè)項目?！久赓M下載鏈接】editor.mdThe open source embeddable online markdown editor (component).項目地址: https://gitcode.com/gh_mirrors/ed/editor.md創(chuàng)作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考 Editor.md 完全指南：基于 CodeMirror、jQuery 與 Marked 的開源可嵌入 Markdown 在線編輯器
Editor.md 完全指南基于 CodeMirror、jQuery 與 Marked 的開源可嵌入 Markdown 在線編輯器【免費下載鏈接】editor.mdThe open source embeddable online markdown editor (component).項目地址: https://gitcode.com/gh_mirrors/ed/editor.mdEditor.md 是一款開源的、可嵌入到任意 Web 頁面中的 Markdown 在線編輯器組件核心基于 CodeMirror、jQuery 與 Marked 構建同時整合了 KaTeX、Flowchart.js、Sequence Diagram 等擴展能力。本文將圍繞該組件的安裝方式、兩種核心使用場景創(chuàng)建編輯器、Markdown 轉 HTML、全部可配置選項、擴展語法與實例 API 展開完整講解并結合倉庫源碼src/editormd.js說明其底層實現原理幫助你在自己的項目中快速集成一個功能完整的在線 Markdown 編輯器。Editor.md 編輯器運行截圖左側 Markdown 源碼編輯區(qū)與右側實時預覽區(qū)項目定位與核心特性Editor.md 采用 jQuery 插件式的設計風格調用editormd(id, options)即可在指定容器內構建一個完整的編輯器實例。從 源碼入口 可以看到editormd本身是一個工廠函數返回editormd.fn.init的實例對象倉庫版本號為 1.5.0見 src/editormd.js#L49-L52 與 package.json。其核心特性可歸納為以下幾類語法支持兼容標準 Markdown / CommonMark 以及 GFMGitHub Flavored Markdown并可通過mode選項切換為純代碼編輯模式變身為代碼編輯器參考示例 examples/change-mode.html。編輯能力實時預覽watch、圖片跨域上傳、預格式文本 / 代碼塊 / 表格插入、代碼折疊、跳轉到行、搜索替換、只讀模式、自定義主題、多語言i18n、HTML 實體、代碼語法高亮等。Markdown 擴展語法ToC 目錄examples/toc.html、Emoji 表情examples/emoji.html、Task lists 任務列表examples/task-lists.html、鏈接examples/links.html?？茖W公式與圖表TeX/LaTeX 公式基于 KaTeX見 examples/katex.html、流程圖 Flowchartexamples/flowchart.html與時序圖 Sequence Diagramexamples/sequence-diagram.html。HTML 標簽解析與安全過濾支持識別并解析 HTML 標簽可自定義過濾危險標簽及屬性examples/html-tags-decode.html。模塊化與擴展支持 AMD / CMD 模塊加載器Require.js Sea.js見 examples/use-requirejs.html、examples/use-seajs.html并支持自定義擴展插件examples/define-plugin.html。兼容性兼容主流瀏覽器IE8與 Zepto.jsexamples/use-zepto.html支持 iPad 等平板設備。技術棧與依賴Editor.md 的渲染與編輯能力并非全部自研而是建立在以下成熟的開源庫之上倉庫內lib/目錄已包含全部依賴的本地副本依賴用途CodeMirror核心代碼編輯區(qū)提供語法高亮、代碼折疊、搜索替換等編輯器能力markedMarkdown 解析為 HTML倉庫內置 lib/marked.min.jsjQueryDOM 操作與插件機制基礎也兼容 Zepto.jsFontAwesome工具欄圖標字體fonts/github-markdown.css預覽區(qū) Markdown 正文樣式scss/github-markdown.scssKaTeXTeX 數學公式渲染prettify.js代碼語法高亮內置 lib/prettify.min.jsRaphael.js / flowchart.js / sequence-diagram.js流程圖與時序圖渲染內置 lib/raphael.min.js、lib/flowchart.min.js、lib/sequence-diagram.min.js其中path配置項就是告訴 Editor.md 這些依賴模塊文件CodeMirror、marked 等存放的目錄用于按需動態(tài)加載。從源碼 src/editormd.js#L483-L519 的loadQueues()可以看出加載策略只有啟用了flowChart或sequenceDiagram時才會依次加載 raphael、underscore、flowchart / sequence-diagram 等腳本同時 IE8 環(huán)境下會跳過這些圖表功能。安裝方式直接下載從倉庫下載完整源碼包含css/、lib/、examples/等目錄將editormd.min.js、editormd.min.css及l(fā)ib/目錄部署到你的項目靜態(tài)資源目錄即可。NPM 安裝npm install editor.mdBower 安裝bower install editor.md快速開始創(chuàng)建一個 Markdown 編輯器最簡單的集成方式是在頁面中放置一個容器div并在其中嵌入一個隱藏的textarea作為 Markdown 源碼的載體。如果省略textareaEditor.md 會自動補建一個這一點在源碼 src/editormd.js#L390-L396 中有明確實現。link relstylesheet hrefeditor.md/css/editormd.min.css / div ideditor !-- Tips: Editor.md can auto append a textarea tag -- textarea styledisplay:none;### Hello Editor.md !/textarea /div script srcjquery.min.js/script script srceditor.md/editormd.min.js/script script typetext/javascript $(function() { var editor editormd(editor, { // width: 100%, // height: 100%, // markdown: xxxx, // dynamic set Markdown text path : editor.md/lib/ // Autoload modules mode, codemirror, marked... dependents libs path }); }); /script要點說明path必須指向依賴庫CodeMirror、marked 等所在目錄默認值為./lib/markdown選項可動態(tài)設置初始 Markdown 文本若初始化時textarea已有內容則優(yōu)先使用 textarea 內容可通過appendMarkdown追加內容見 src/editormd.js#L423-L431未顯式指定name時生成的表單 textarea 默認使用{編輯器id}-markdown-doc作為 name見 src/editormd.js#L400-L403便于表單提交。使用模塊化加載器如果項目使用模塊化加載器可參考倉庫內示例examples/use-requirejs.htmlAMDRequire.jsexamples/use-seajs.htmlCMDSea.jsexamples/manually-load-modules.html手動加載模塊配合autoLoadModules: false源碼 src/editormd.js#L442-L471 展示了 AMD 環(huán)境下的分支邏輯當檢測到define.amd或設置autoLoadModules: false時直接使用全局已有的 CodeMirror / marked 實例跳過動態(tài)加載流程。Markdown 轉 HTML純渲染模式如果你不需要編輯能力只想在頁面中渲染一段 Markdown例如服務端輸出的文章正文可以使用靜態(tài)方法editormd.markdownToHTML(id, options)。它同樣支持 ToC、Emoji、TeX、Flowchart 等全部擴展語法對應完整示例 examples/html-preview-markdown-to-html.html以及自定義 ToC 容器版本 examples/html-preview-markdown-to-html-custom-toc-container.html。link relstylesheet hrefeditormd/css/editormd.preview.css / div idtest-markdown-view !-- Server-side output Markdown text -- textarea styledisplay:none;### Hello world!/textarea /div script srcjquery.min.js/script script srceditormd/editormd.js/script script srceditormd/lib/marked.min.js/script script srceditormd/lib/prettify.min.js/script script typetext/javascript $(function() { var testView editormd.markdownToHTML(test-markdown-view, { // markdown : [TOC]\n### Hello world!\n## Heading 2, // Also, you can dynamic set Markdown text // htmlDecode : true, // Enable / disable HTML tag encode. // htmlDecode : style,script,iframe, // Note: If enabled, you should filter some dangerous HTML tags for website security. }); }); /script從源碼 src/editormd.js#L3885-L4014 可以看到該方法的完整實現它會先讀取容器內 textarea 的值或markdown選項通過自定義 renderereditormd.markedRenderer完成擴展語法解析隨后根據htmlDecode決定是否過濾 HTML 標簽最后把解析結果追加到容器并可選觸發(fā)代碼高亮與圖表渲染。注意Editor.md不支持HTML 轉 Markdown 的反向解析官方說明該能力可能在未來的版本中提供。完整配置選項OptionsEditor.md 的全部配置及默認值定義在源碼的 editormd.defaults 中初始化時通過$.extend(true, editormd.defaults, options)深度合并見 src/editormd.js#L356因此以下每一項都可以在實例化時覆蓋?；A與外觀選項默認值說明modegfm編輯模式gfm或markdown設為其它值時作為 CodeMirror 的代碼編輯模式name表單元素 name用于表單提交value非 gfm/markdown 模式下 CodeMirror 的初始值themeEditor.md 自帶主題v1.5.0 起v1.5.0 之前該選項對應 CodeMirror 主題editorThemedefault編輯區(qū)主題v1.5.0 起對應 CodeMirror 主題previewTheme預覽區(qū)主題markdownMarkdown 源碼初始化時寫入編輯區(qū)appendMarkdown若 textarea 已有內容追加到其后width/height100%/100%編輯器尺寸傳入數字時自動追加px見 src/editormd.js#L380-L388placeholderEnjoy Markdown! coding now...編輯區(qū)占位提示文本fontSize13px編輯區(qū)字號autoHeightfalse是否隨內容自動增高autoFocustrue是否自動聚焦編輯區(qū)路徑與加載選項默認值說明path./lib/依賴模塊CodeMirror、marked 等所在目錄pluginPath插件目錄為空時默認使用path ../plugins/見 src/editormd.js#L372autoLoadModulestrue是否自動按需加載依賴模塊delay300延遲解析 Markdown 為 HTML 的間隔毫秒編輯交互選項默認值說明watchtrue是否開啟實時預覽gotoLinetrue啟用/禁用跳轉到指定行codeFoldfalse是否啟用代碼折疊autoCloseTagstrue自動閉合 HTML 標簽searchReplacetrue啟用/禁用CodeMirror搜索與替換syncScrollingtrue編輯區(qū)與預覽區(qū)同步滾動可選true/false/singlereadOnlyfalse只讀模式tabSize4Tab 寬度indentUnit4縮進單位lineNumberstrue顯示行號lineWrappingtrue自動換行autoCloseBracketstrue自動閉合括號showTrailingSpacetrue高亮行尾空格matchBracketstrue括號匹配高亮indentWithTabstrue使用 Tab 縮進styleSelectedTexttrue高亮選中文本matchWordHighlighttrue單詞高亮可選true/false/onselectedstyleActiveLinetrue高亮當前行disabledKeyMaps[]禁用的快捷鍵映射對話框選項默認值說明dialogLockScreentrue對話框鎖屏dialogShowMasktrue顯示遮罩層dialogDraggabletrue對話框可拖拽dialogMaskBgColor#fff遮罩背景色dialogMaskOpacity0.1遮罩透明度表單與 HTML 輸出選項默認值說明saveHTMLToTextareafalse啟用后會自動生成一個textarea name{editor-id}-html-code將解析出的 HTML 寫入其中便于隨表單提交到服務端見 src/editormd.js#L407圖片上傳選項默認值說明imageUploadfalse啟用/禁用圖片上傳imageFormats[jpg, jpeg, gif, png, bmp, webp]允許上傳的圖片格式imageUploadURL上傳接口地址crossDomainUploadfalse啟用/禁用跨域上傳uploadCallbackURL跨域上傳回調地址完整的上傳實現可參考 examples/php/upload.php、examples/php/cross-domain-upload.php 與 examples/php/editormd.uploader.class.php以及示例頁面 examples/image-upload.html、examples/image-cross-domain-upload.html。擴展語法開關選項默認值說明toctrue是否生成目錄ToCtocmfalse是否使用[TOCM]語法自動創(chuàng)建 ToC 下拉菜單tocTitleToC 下拉菜單按鈕文本tocDropdownfalse啟用/禁用 ToC 下拉菜單tocContainer自定義 ToC 容器選擇器tocStartLevel1從 H1 開始生成目錄htmlDecodefalse是否解析 HTML 標簽傳字符串如style,script,iframe可指定需要過濾的標簽pageBreaktrue解析分頁符[]atLinktrue是否啟用鏈接解析emailLinktrue是否自動鏈接郵箱地址taskListfalse啟用 GFM 任務列表emojifalse啟用 Emoji支持 Github Emoji、Twitter EmojiTwemoji、FontAwesome 圖標:fa-xxx:以及 Editor.md logo 圖標:editormd-logo:/:editormd-logo-1x:1~8xtexfalse啟用 TeXLaTeX公式基于 KaTeXflowChartfalse啟用流程圖flowChart.js 僅支持 IE9sequenceDiagramfalse啟用時序圖sequenceDiagram.js 僅支持 IE9previewCodeHighlighttrue預覽區(qū)代碼是否高亮這些開關在markdownToHTML模式下同樣生效對應默認值見 src/editormd.js#L3886-L3907渲染時會統一傳給自定義 marked renderer見 src/editormd.js#L3924-L3937。工具欄選項默認值說明toolbartrue顯示/隱藏工具欄toolbarAutoFixedtrue窗口滾動時工具欄是否自動固定toolbarIconsfull工具欄圖標模式full、simple、mini對應editormd.toolbarModes見 src/editormd.js#L54-L77toolbarTitles{}自定義工具欄按鈕標題toolbarHandlers{}自定義工具欄按鈕點擊處理器toolbarCustomIcons{}使用自定義 HTML 創(chuàng)建工具欄圖標替代默認a標簽toolbarIconTexts{}自定義圖標文本toolbarIcons三種預設模式的差異源碼 src/editormd.js#L54-L77full全部功能包括 undo/redo、格式化bold/del/italic/quote/ucwords/uppercase/lowercase、標題 h1-h6、列表、鏈接/引用鏈接/圖片/代碼/預格式文本/代碼塊/表格/日期時間/Emoji/HTML 實體/分頁符、跳轉行/watch/preview/fullscreen/clear/search以及 help/infosimple精簡模式去除鏈接、圖片、表格等插入類按鈕保留格式化、標題、列表與預覽/全屏/幫助mini極簡模式僅保留 undo/redo、watch/preview、help/info。事件回調回調觸發(fā)時機onload編輯器加載完成onresize編輯器尺寸變化onchange編輯內容變化onwatch/onunwatch開啟/關閉實時預覽onpreviewing/onpreviewed預覽開始前/預覽完成后onfullscreen/onfullscreenExit進入/退出全屏onscroll/onpreviewscroll編輯區(qū)/預覽區(qū)滾動對應示例可參考 examples/onload.html、examples/onchange.html、examples/onwatch-onunwatch.html、examples/onpreviewing-onpreviewed.html、examples/onfullscreen.html、examples/onscroll-onpreviewscroll.html、examples/onresize.html。多語言lang通過lang選項可自定義界面文案工具欄按鈕、按鈕、對話框文本倉庫內置了中文簡體默認見 src/editormd.js#L217-L279、英文languages/en.js與繁體中文languages/zh-tw.js。多語言切換示例見 examples/multi-languages.html。lang : { // Language data, you can custom your language. name : zh-cn, description : 開源在線Markdown編輯器br/Open source online Markdown editor., tocTitle : 目錄, toolbar : { //... }, button: { //... }, dialog : { //... } //... }實例 API常用方法與調用鏈編輯器實例化后返回的對象提供了完整的操作 API核心方法實現見 src/editormd.js#L1862-L2610 區(qū)間方法說明getMarkdown()/getValue()獲取當前 Markdown 源碼CodeMirror value見 src/editormd.js#L2247-L2260setValue(value)設置 Markdown 源碼src/editormd.js#L2270-L2274appendMarkdown(md)追加 Markdown 內容src/editormd.js#L2217clear()清空編輯器src/editormd.js#L2283-L2287getHTML()獲取解析后的 HTML 源碼需先啟用saveHTMLToTextareasrc/editormd.js#L2296-L2305getPreviewedHTML()獲取預覽區(qū)當前 HTML需watch開啟src/editormd.js#L2325-L2334watch(callback)/unwatch(callback)開啟/關閉實時預覽src/editormd.js#L2343、src/editormd.js#L2387previewing()全窗口預覽 HTMLShift ESC 還原fullscreen()全屏ESC 還原resize(width, height)調整編輯器尺寸src/editormd.js#L1862表單取值場景可參考 examples/form-get-value.html選中文本的獲取與替換見 examples/set-get-replace-selection.html。自定義擴展與插件Editor.md 的工具欄處理器、插件機制都支持自定義。倉庫提供了插件模板 plugins/plugin-template.js 與完整示例插件 plugins/test-plugin/test-plugin.js以及多種內置對話框插件代碼塊plugins/code-block-dialog/code-block-dialog.js、Emojiplugins/emoji-dialog/emoji-dialog.js、圖片plugins/image-dialog/image-dialog.js、鏈接plugins/link-dialog/link-dialog.js、表格plugins/table-dialog/table-dialog.js、幫助plugins/help-dialog/help-dialog.js等。自定義插件教程見 examples/define-plugin.html工具欄深度定制參考 examples/custom-toolbar.html。其它實用示例索引倉庫 examples/ 目錄提供了 50 個開箱即用的示例頁面除上述外還包括多實例共存examples/multi-editormd.html動態(tài)創(chuàng)建examples/dynamic-create-editormd.html代碼折疊examples/code-fold.html自定義快捷鍵examples/custom-keyboard-shortcuts.html主題定制examples/themes.html工具欄自動固定examples/toolbar-auto-fixed.html延遲渲染預覽examples/delay-renderer-preview.html分頁符examples/page-break.html外部調用不依賴 jQuery 環(huán)境examples/external-use.html測試用例集中在 tests/ 目錄基于 QUnit可配合源碼理解各功能的邊界行為。版本與許可Editor.md 當前版本為 1.5.0見 package.json 與 src/editormd.js#L50歷史變更記錄見 CHANGE.md已知問題見 BUGS.md。項目采用 MIT 開源協議LICENSE可自由用于商業(yè)與非商業(yè)項目?！久赓M下載鏈接】editor.mdThe open source embeddable online markdown editor (component).項目地址: https://gitcode.com/gh_mirrors/ed/editor.md創(chuàng)作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考