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 等扩展能力。本文将围绕该组件的安装方式、两种核心使用场景创建编辑器、Markdown 转 HTML、全部可配置选项、扩展语法与实例 API 展开完整讲解并结合仓库源码src/editormd.js说明其底层实现原理帮助你在自己的项目中快速集成一个功能完整的在线 Markdown 编辑器。Editor.md 编辑器运行截图左侧 Markdown 源码编辑区与右侧实时预览区项目定位与核心特性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。科学公式与图表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核心代码编辑区提供语法高亮、代码折叠、搜索替换等编辑器能力markedMarkdown 解析为 HTML仓库内置 lib/marked.min.jsjQueryDOM 操作与插件机制基础也兼容 Zepto.jsFontAwesome工具栏图标字体fonts/github-markdown.css预览区 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 等存放的目录用于按需动态加载。从源码 src/editormd.js#L483-L519 的loadQueues()可以看出加载策略只有启用了flowChart或sequenceDiagram时才会依次加载 raphael、underscore、flowchart / sequence-diagram 等脚本同时 IE8 环境下会跳过这些图表功能。安装方式直接下载从仓库下载完整源码包含css/、lib/、examples/等目录将editormd.min.js、editormd.min.css及lib/目录部署到你的项目静态资源目录即可。NPM 安装npm install editor.mdBower 安装bower install editor.md快速开始创建一个 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选项可动态设置初始 Markdown 文本若初始化时textarea已有内容则优先使用 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 环境下的分支逻辑当检测到define.amd或设置autoLoadModules: false时直接使用全局已有的 CodeMirror / marked 实例跳过动态加载流程。Markdown 转 HTML纯渲染模式如果你不需要编辑能力只想在页面中渲染一段 Markdown例如服务端输出的文章正文可以使用静态方法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 标签最后把解析结果追加到容器并可选触发代码高亮与图表渲染。注意Editor.md不支持HTML 转 Markdown 的反向解析官方说明该能力可能在未来的版本中提供。完整配置选项OptionsEditor.md 的全部配置及默认值定义在源码的 editormd.defaults 中初始化时通过$.extend(true, editormd.defaults, options)深度合并见 src/editormd.js#L356因此以下每一项都可以在实例化时覆盖。基础与外观选项默认值说明modegfm编辑模式gfm或markdown设为其它值时作为 CodeMirror 的代码编辑模式name表单元素 name用于表单提交value非 gfm/markdown 模式下 CodeMirror 的初始值themeEditor.md 自带主题v1.5.0 起v1.5.0 之前该选项对应 CodeMirror 主题editorThemedefault编辑区主题v1.5.0 起对应 CodeMirror 主题previewTheme预览区主题markdownMarkdown 源码初始化时写入编辑区appendMarkdown若 textarea 已有内容追加到其后width/height100%/100%编辑器尺寸传入数字时自动追加px见 src/editormd.js#L380-L388placeholderEnjoy Markdown! coding now...编辑区占位提示文本fontSize13px编辑区字号autoHeightfalse是否随内容自动增高autoFocustrue是否自动聚焦编辑区路径与加载选项默认值说明path./lib/依赖模块CodeMirror、marked 等所在目录pluginPath插件目录为空时默认使用path ../plugins/见 src/editormd.js#L372autoLoadModulestrue是否自动按需加载依赖模块delay300延迟解析 Markdown 为 HTML 的间隔毫秒编辑交互选项默认值说明watchtrue是否开启实时预览gotoLinetrue启用/禁用跳转到指定行codeFoldfalse是否启用代码折叠autoCloseTagstrue自动闭合 HTML 标签searchReplacetrue启用/禁用CodeMirror搜索与替换syncScrollingtrue编辑区与预览区同步滚动可选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]语法自动创建 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预览区代码是否高亮这些开关在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 创建工具栏图标替代默认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。事件回调回调触发时机onload编辑器加载完成onresize编辑器尺寸变化onchange编辑内容变化onwatch/onunwatch开启/关闭实时预览onpreviewing/onpreviewed预览开始前/预览完成后onfullscreen/onfullscreenExit进入/退出全屏onscroll/onpreviewscroll编辑区/预览区滚动对应示例可参考 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 区间方法说明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()获取预览区当前 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动态创建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 环境examples/external-use.html测试用例集中在 tests/ 目录基于 QUnit可配合源码理解各功能的边界行为。版本与许可Editor.md 当前版本为 1.5.0见 package.json 与 src/editormd.js#L50历史变更记录见 CHANGE.md已知问题见 BUGS.md。项目采用 MIT 开源协议LICENSE可自由用于商业与非商业项目。【免费下载链接】editor.mdThe open source embeddable online markdown editor (component).项目地址: https://gitcode.com/gh_mirrors/ed/editor.md创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考