easy-markdown-editor:JavaScript文本区域替代品，支持Markdown编辑、工具栏与实时预览

Star1
0
Code
Code
Issues
Pull Requests
Discussion
Wiki
Analysis
Star1
0

EasyMDE: A simple, beautiful, and embeddable JavaScript Markdown editor. Delightful editing for beginners and experts alike. Features built-in autosaving and spell checking.

Branch7Tags60
This repository is empty

EasyMDE - Markdown 编辑器

npm version npm @next version npm @v3-alpha version Build Status

本仓库是 SimpleMDE 的分支，由 Sparksuite 开发。 更多信息请参见专门章节。

一款可直接嵌入的 JavaScript 文本区域替代品，用于编写美观且易读的 Markdown。 EasyMDE 让可能不太熟悉 Markdown 的用户能够使用熟悉的工具栏按钮和快捷键。

此外，编辑时会实时渲染语法，清晰展示预期效果。标题更大，强调的词语变为斜体，链接带有下划线等等。

EasyMDE 还具备内置自动保存和拼写检查功能。 编辑器完全可定制，从主题到工具栏按钮以及 JavaScript 钩子均可调整。

试用演示

预览

快速访问

安装 EasyMDE

通过 npm：

npm install easymde

通过 UNPKG CDN：

<link rel="stylesheet" href="https://unpkg.com/easymde/dist/easymde.min.css">
<script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>

或者 jsDelivr：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
<script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>

如何使用

加载编辑器

安装和/或导入模块后，您可以将 EasyMDE 加载到网页上的第一个 textarea 元素中：

<textarea></textarea>
<script>
const easyMDE = new EasyMDE();
</script>

或者，您可以通过 JavaScript 选择特定的 textarea：

<textarea id="my-text-area"></textarea>
<script>
const easyMDE = new EasyMDE({element: document.getElementById('my-text-area')});
</script>

编辑器功能

使用 easyMDE.value() 获取编辑器内容：

<script>
easyMDE.value();
</script>

使用 easyMDE.value(val) 来设置编辑器内容：

<script>
easyMDE.value('New input for **EasyMDE**');
</script>

配置

选项列表

  • autoDownloadFontAwesome：若设为 true，则强制下载 Font Awesome（用于图标）。若设为 false，则阻止下载。默认为 undefined，此时会智能检查是否已引入 Font Awesome，再决定是否下载。
  • autofocus：若设为 true，编辑器会自动获得焦点。默认为 false。
  • autosave：保存正在输入的文本，并在未来重新加载。当包含编辑器的表单提交后，会清除保存的文本。
    • enabled：若设为 true，将自动保存文本。默认为 false。
    • delay：保存间隔时间，以毫秒为单位。默认为 10000（10 秒）。
    • submit_delay：在假设表单提交失败并保存文本之前的延迟时间，以毫秒为单位。默认为 autosave.delay 或 10000（10 秒）。
    • uniqueId：必须设置一个唯一的字符串标识符，以便 EasyMDE 进行自动保存。该标识符应能将此编辑器实例与网站上其他 EasyMDE 实例区分开来。
    • timeFormat：设置 DateTimeFormat。更多信息请参见 DateTimeFormat 实例。默认 locale: en-US, format: hour:minute。
    • text：设置自动保存的文本。
  • autoRefresh：当初始化隐藏在 DOM 节点中的编辑器时非常有用。若设为 { delay: 300 }，则会每 300 毫秒检查一次编辑器是否可见，若可见，则调用 CodeMirror 的 refresh() 方法。
  • blockStyles：自定义某些用于设置文本块样式的按钮行为。
    • bold：可设为 ** 或 __。默认为 **。
    • code：可设为 ``` 或 ~~~。默认为 ```` �KE_PH_9�`。
    • italic：可设为 * 或 _。默认为 *。
  • unorderedListStyle：可以是 *、- 或 +。默认为 *。
  • scrollbarStyle：选择滚动条实现方式。默认值为 "native"，显示原生滚动条。核心库还提供 "null" 样式，可完全隐藏滚动条。插件可以实现其他滚动条模式。
  • element：要使用的 textarea 元素对应的 DOM 元素。默认为页面上的第一个 textarea 元素。
  • forceSync：若设为 true，则强制将 EasyMDE 中所做的文本更改立即存储到原始文本区域中。默认为 false。
  • hideIcons：要隐藏的图标名称数组。可用于隐藏默认显示的特定图标，而无需完全自定义工具栏。
  • indentWithTabs：若设为 false，则使用空格而非制表符进行缩进。默认为 true。
  • initialValue：若设置此选项，将自定义编辑器的初始值。
  • previewImagesInEditor：- EasyMDE 会显示图片预览，默认为 false，仅当图片位于单独行时才会显示预览。
  • imagesPreviewHandler：- 用于处理图片预览的自定义函数。接收图片 Markdown 语法 ![]( ) 括号之间解析出的字符串作为参数，并返回一个字符串，该字符串将作为预览中 <img> 标签的 src 属性。支持在前端动态预览图片，无需将其上传到服务器，允许将图片复制粘贴到编辑器中并进行预览。
  • insertTexts：自定义某些用于插入文本的按钮行为。接收一个包含两个元素的数组。第一个元素是插入到光标或选中内容之前的文本，第二个元素是插入到之后的文本。例如，链接的默认值为：["[", "](http://)"]。
    • horizontalRule（水平线）
    • image（图片）
    • link（链接）
    • table（表格）
  • lineNumbers：若设为 true，则在编辑器中启用行号。
  • lineWrapping：若设为 false，则禁用自动换行。默认为 true。
  • minHeight：设置编辑区域开始自动增长前的最小高度。应为包含有效 CSS 值的字符串，例如 "500px"。默认为 "300px"。
  • maxHeight：设置编辑区域的固定高度。此时 minHeight 选项将被忽略。应为包含有效 CSS 值的字符串，例如 "500px"。默认为 undefined。
  • onToggleFullScreen：编辑器切换全屏模式时调用的函数。该函数将接收一个布尔值作为参数，true 表示编辑器即将进入全屏模式，false 则相反。
  • parsingConfig：调整编辑期间（非预览期间）解析 Markdown 的设置。
    • allowAtxHeaderWithoutSpace：若设为 true，将渲染 # 后没有空格的标题。默认为 false。
    • strikethrough：若设为 false，将不处理 GFM 删除线语法。默认为 true。
    • underscoresBreakWords：若设为 true，允许下划线作为分隔单词的定界符。默认为 false。
  • overlayMode：传递自定义的 codemirror 覆盖模式，用于在编辑期间解析和设置 Markdown 的样式。
    • mode：一个 codemirror 模式对象。
    • combine：若设为 false，将替换默认 Markdown 模式返回的 CSS 类。否则，自定义模式返回的类将与默认模式返回的类组合。默认为 true。
  • placeholder：若设置此选项，将显示自定义的占位符消息。
  • previewClass：激活预览屏幕时应用于该屏幕的字符串或字符串数组。默认为 "editor-preview"。
  • previewRender：用于解析纯文本 Markdown 并返回 HTML 的自定义函数。在用户预览时使用。
  • promptURLs：若设为 true，将弹出 JS 警告窗口，询问链接或图片的 URL。默认为 false。
  • promptTexts：自定义用于提示输入 URL 的文本。
    • image：提示输入图片 URL 时使用的文本。默认为 URL of the image:。
    • link：提示输入链接 URL 时使用的文本。默认为 URL for the link:。
  • iconClassMap：用于指定各种工具栏按钮的图标类名。
  • uploadImage：若设为 true，启用图片上传功能，可通过拖放、复制粘贴以及浏览文件窗口（当用户点击 upload-image 图标时打开）触发。默认为 false。
  • imageMaxSize：上传前检查的最大图片大小（以字节为单位）（注意：永远不要信任客户端，务必在服务器端检查图片大小）。默认为 1024 * 1024 * 2（2 MB）。
  • imageAccept：用于在上传前检查图片类型的逗号分隔的 MIME 类型列表（注意：永远不要信任客户端，务必在服务器端检查文件类型）。默认为 image/png, image/jpeg。
  • imageUploadFunction：用于处理图片上传的自定义函数。使用此函数将使 imageMaxSize、imageAccept、imageUploadEndpoint 和 imageCSRFToken 选项失效。
    • 该函数接收一个文件以及 onSuccess 和 onError 回调函数作为参数。onSuccess(imageUrl: string) 和 onError(errorMessage: string)
  • imageUploadEndpoint：通过异步 POST 请求发送图片数据的端点。服务器应保存此图片并返回 JSON 响应。
    • 如果请求处理成功（HTTP 200 OK）：{"data": {"filePath": "<filePath>"}}，其中 filePath 是图片的路径（如果 imagePathAbsolute 设为 true，则为绝对路径，否则为相对路径）；
    • 否则：{"error": "<errorCode>"}，其中 errorCode 可以是 noFileGiven（HTTP 400 Bad Request）、typeNotAllowed（HTTP 415 Unsupported Media Type）、fileTooLarge（HTTP 413 Payload Too Large）或 importError（见下面的 errorMessages）。如果 errorCode 不是 errorMessages 中的某一个，则会将其原封不动地提示给用户。这允许使用服务器端的错误消息。无默认值。
  • imagePathAbsolute：若设为 true，将把 imageUploadFunction 返回的 imageUrl 和 imageUploadEndpoint 返回的 filePath 视为绝对路径而非相对路径，即不会在其前面添加 window.location.origin。
  • imageCSRFToken：包含在上传图片的 AJAX 请求中的 CSRF 令牌。适用于 Django、Spring 和 Laravel 等各种情况。
  • imageCSRFName：包含在上传图片的 AJAX 请求中的 CSRF 令牌字段名，当 imageCSRFToken 有值时应用，默认为 csrfmiddlewaretoken。
  • imageCSRFHeader：若设为 true，则通过请求头传递 CSRF 令牌。默认为 false，此时通过请求体传递 CSRF。
  • imageTexts：向用户显示的文本（主要在状态栏上），用于图片导入功能，其中 #image_name#、#image_size# 和 #image_max_size# 将被其各自的值替换，可用于自定义或国际化：
    • sbInit：当 uploadImage 设为 true 时初始显示的状态消息。默认为 Attach files by drag and dropping or pasting from clipboard.。
    • sbOnDragEnter：当用户将文件拖到文本区域时显示的状态消息。默认为 Drop image to upload it.。
    • sbOnDrop：当用户将文件拖放到文本区域时显示的状态消息。默认为 Uploading images #images_names#。
    • sbProgress：显示上传进度的状态消息。默认为 Uploading #file_name#: #progress#%。
    • sbOnUploaded：图片上传完成时显示的状态消息。默认为 Uploaded #image_name#。
    • sizeUnits：用于显示具有人类可读文件大小的消息的单位列表，以逗号分隔。默认为 B, KB, MB（例如：218 KB）。如果您不喜欢带空格的格式，可以使用 B,KB,MB（例如：218KB）。
  • errorMessages：使用 errorCallback 选项向用户显示的错误信息，其中 #image_name#、#image_size# 和 #image_max_size# 将被其各自的值替换，可用于自定义或国际化：
    • noFileGiven：服务器未从用户处接收到任何文件。默认为 You must select a file.。
    • typeNotAllowed：用户发送的文件类型与 imageAccept 列表不匹配，或服务器返回此错误代码。默认为 This image type is not allowed.。
    • fileTooLarge：正在导入的图片大小大于 imageMaxSize，或服务器返回此错误代码。默认为 Image #image_name# is too big (#image_size#).\nMaximum file size is #image_max_size#.。
    • importError：上传图片时发生意外错误。默认为 Something went wrong when uploading the image #image_name#.。
  • errorCallback：用于定义如何显示错误消息的回调函数。默认为 (errorMessage) => alert(errorMessage)。
  • renderingConfig：调整预览期间（非编辑期间）解析 Markdown 的设置。
    • codeSyntaxHighlighting：若设为 true，将使用 highlight.js 进行语法高亮。默认为 false。要使用此功能，必须在页面上引入 highlight.js 或通过 hljs 选项传入。例如，引入脚本和 CSS 文件如下：
      <script src="https://cdn.jsdelivr.net/highlight.js/latest/highlight.min.js"></script>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/highlight.js/latest/styles/github.min.css">
    • hljs：highlight.js 的可注入实例。如果不想依赖全局命名空间（window.hljs），可以在此处提供一个实例。默认为 undefined。
    • markedOptions：设置内部 Markdown 渲染器的 选项。其他 renderingConfig 选项将优先于此。
    • singleLineBreaks：若设为 false，禁用解析 GitHub 风格 Markdown (GFM) 的单行换行。默认为 true。
    • sanitizerFunction：用于清理 Markdown 渲染器 HTML 输出的自定义函数。
  • shortcuts：与此实例关联的键盘快捷键。默认为 快捷键数组。
  • showIcons：要显示的图标名称数组。可用于显示默认隐藏的特定图标，而无需完全自定义工具栏。
  • spellChecker：若设为 false，禁用拼写检查器。默认为 true。也可选择传递一个符合 CodeMirrorSpellChecker 规范的函数。
  • inputStyle：textarea 或 contenteditable。桌面端默认为 textarea，移动端默认为 contenteditable。contenteditable 选项是启用 nativeSpellcheck 所必需的。
  • nativeSpellcheck：若设为 false，禁用原生拼写检查器。默认为 true。
  • sideBySideFullscreen：若设为 false，允许在不全屏的情况下进行并排编辑。默认为 true。
  • status：若设为 false，隐藏状态栏。默认为内置状态栏项目数组。
    • 此外，您可以设置一个要包含的状态栏项目数组，并指定其顺序。您甚至可以定义自己的自定义状态栏项目。
  • styleSelectedText：若设为 false，从选中的行中移除 CodeMirror-selectedtext 类。默认为 true。
  • syncSideBySidePreviewScroll：若设为 false，禁用并排模式下的滚动同步。默认为 true。
  • tabSize：若设置此选项，自定义制表符大小。默认为 2。
  • theme：覆盖主题。默认为 easymde。
  • toolbar：若设为 false，隐藏工具栏。默认为 图标数组。
  • toolbarTips：若设为 false，禁用工具栏按钮提示。默认为 true。
  • toolbarButtonClassPrefix：设置时，为工具栏按钮类添加前缀。例如，值为 "mde" 时，粗体按钮的类将变为 "mde-bold"。
  • direction：rtl 或 ltr。更改文本方向以支持从右到左的语言。默认为 ltr。

选项示例

大多数选项展示了非默认行为：

const editor = new EasyMDE({
    autofocus: true,
    autosave: {
        enabled: true,
        uniqueId: "MyUniqueID",
        delay: 1000,
        submit_delay: 5000,
        timeFormat: {
            locale: 'en-US',
            format: {
                year: 'numeric',
                month: 'long',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
            },
        },
        text: "Autosaved: "
    },
    blockStyles: {
        bold: "__",
        italic: "_",
    },
    unorderedListStyle: "-",
    element: document.getElementById("MyID"),
    forceSync: true,
    hideIcons: ["guide", "heading"],
    indentWithTabs: false,
    initialValue: "Hello world!",
    insertTexts: {
        horizontalRule: ["", "\n\n-----\n\n"],
        image: ["![](http://", ")"],
        link: ["[", "](https://)"],
        table: ["", "\n\n| Column 1 | Column 2 | Column 3 |\n| -------- | -------- | -------- |\n| Text     | Text      | Text     |\n\n"],
    },
    lineWrapping: false,
    minHeight: "500px",
    parsingConfig: {
        allowAtxHeaderWithoutSpace: true,
        strikethrough: false,
        underscoresBreakWords: true,
    },
    placeholder: "Type here...",

    previewClass: "my-custom-styling",
    previewClass: ["my-custom-styling", "more-custom-styling"],

    previewRender: (plainText) => customMarkdownParser(plainText), // Returns HTML from a custom parser
    previewRender: (plainText, preview) => { // Async method
        setTimeout(() => {
            preview.innerHTML = customMarkdownParser(plainText);
        }, 250);

        // If you return null, the innerHTML of the preview will not
        // be overwritten. Useful if you control the preview node's content via
        // vdom diffing.
        // return null;

        return "Loading...";
    },
    promptURLs: true,
    promptTexts: {
        image: "Custom prompt for URL:",
        link: "Custom prompt for URL:",
    },
    renderingConfig: {
        singleLineBreaks: false,
        codeSyntaxHighlighting: true,
        sanitizerFunction: (renderedHTML) => {
            // Using DOMPurify and only allowing <b> tags
            return DOMPurify.sanitize(renderedHTML, {ALLOWED_TAGS: ['b']})
        },
    },
    shortcuts: {
        drawTable: "Cmd-Alt-T"
    },
    showIcons: ["code", "table"],
    spellChecker: false,
    status: false,
    status: ["autosave", "lines", "words", "cursor"], // Optional usage
    status: ["autosave", "lines", "words", "cursor", {
        className: "keystrokes",
        defaultValue: (el) => {
            el.setAttribute('data-keystrokes', 0);
        },
        onUpdate: (el) => {
            const keystrokes = Number(el.getAttribute('data-keystrokes')) + 1;
            el.innerHTML = `${keystrokes} Keystrokes`;
            el.setAttribute('data-keystrokes', keystrokes);
        },
    }], // Another optional usage, with a custom status bar item that counts keystrokes
    styleSelectedText: false,
    sideBySideFullscreen: false,
    syncSideBySidePreviewScroll: false,
    tabSize: 4,
    toolbar: false,
    toolbarTips: false,
    toolbarButtonClassPrefix: "mde",
});

工具栏图标

以下是内置的工具栏图标（默认情况下仅启用部分图标），您可以根据需要重新组织它们。“名称”是图标的名称，在 JavaScript 中引用。“操作”可以是一个函数或要打开的 URL。“类”是赋予图标的类。“提示文本”是通过 title="" 属性显示的小型提示。请注意，快捷键提示会自动添加，并反映指定的操作（如果已为其分配了键绑定）（例如，当 action 的值设置为 bold 且 tooltip 的值设置为 Bold 时，用户最终看到的文本将是“加粗 (Ctrl-B)”）。

此外，您可以通过在工具栏数组中添加 "|" 在任何图标之间添加分隔符。

名称 操作 提示文本
类
bold toggleBold 加粗
fa fa-bold
italic toggleItalic 斜体
fa fa-italic
strikethrough toggleStrikethrough 删除线
fa fa-strikethrough
heading toggleHeadingSmaller 标题
fa fa-header
heading-smaller toggleHeadingSmaller 小一号标题
fa fa-header
heading-bigger toggleHeadingBigger 大一号标题
fa fa-lg fa-header
heading-1 toggleHeading1 一级标题
fa fa-header header-1
heading-2 toggleHeading2 二级标题
fa fa-header header-2
heading-3 toggleHeading3 三级标题
fa fa-header header-3
code toggleCodeBlock 代码块
fa fa-code
quote toggleBlockquote 引用
fa fa-quote-left
unordered-list toggleUnorderedList 无序列表
fa fa-list-ul
ordered-list toggleOrderedList 有序列表
fa fa-list-ol
check-list toggleCheckList 待办列表
fa fa-check-square-o
clean-block cleanBlock 清除格式
fa fa-eraser
link drawLink 创建链接
fa fa-link
image drawImage 插入图片
fa fa-picture-o
upload-image drawUploadedImage 打开文件浏览窗口
fa fa-image
table drawTable 插入表格
fa fa-table
horizontal-rule drawHorizontalRule 插入水平线
fa fa-minus
preview togglePreview 切换预览
fa fa-eye no-disable
side-by-side toggleSideBySide 切换分屏预览
fa fa-columns no-disable no-mobile
fullscreen toggleFullScreen 切换全屏
fa fa-arrows-alt no-disable no-mobile
guide This link Markdown 指南
fa fa-question-circle
undo undo 撤销
fa fa-undo
redo redo 重做
fa fa-redo

工具栏自定义

使用 toolbar 选项来自定义工具栏。

仅调整现有按钮的顺序：

const easyMDE = new EasyMDE({
    toolbar: ["bold", "italic", "heading", "|", "quote"]
});

所有信息和/或添加您自己的图标或文本

const easyMDE = new EasyMDE({
    toolbar: [
        {
            name: "bold",
            action: EasyMDE.toggleBold,
            className: "fa fa-bold",
            title: "Bold",
        },
        "italic", // shortcut to pre-made button
        {
            name: "custom",
            action: (editor) => {
                // Add your own code
            },
            className: "fa fa-star",
            text: "Starred",
            title: "Custom Button",
            attributes: { // for custom attributes
                id: "custom-id",
                "data-value": "custom value" // HTML5 data-* attributes need to be enclosed in quotation marks ("") because of the dash (-) in its name.
            }
        },
        "|" // Separator
        // [, ...]
    ]
});

在下拉菜单上放置一些按钮

const easyMDE = new EasyMDE({
    toolbar: [{
                name: "heading",
                action: EasyMDE.toggleHeadingSmaller,
                className: "fa fa-header",
                title: "Headers",
            },
            "|",
            {
                name: "others",
                className: "fa fa-blind",
                title: "others buttons",
                children: [
                    {
                        name: "image",
                        action: EasyMDE.drawImage,
                        className: "fa fa-picture-o",
                        title: "Image",
                    },
                    {
                        name: "quote",
                        action: EasyMDE.toggleBlockquote,
                        className: "fa fa-percent",
                        title: "Quote",
                    },
                    {
                        name: "link",
                        action: EasyMDE.drawLink,
                        className: "fa fa-link",
                        title: "Link",
                    }
                ]
            },
        // [, ...]
    ]
});

键盘快捷键

EasyMDE 内置了一系列预设的键盘快捷键，但您可以通过配置选项对其进行修改。以下是默认快捷键列表：

快捷键（Windows / Linux） 快捷键（macOS） 操作
Ctrl-' Cmd-' "toggleBlockquote"
Ctrl-B Cmd-B "toggleBold"
Ctrl-E Cmd-E "cleanBlock"
Ctrl-H Cmd-H "toggleHeadingSmaller"
Ctrl-I Cmd-I "toggleItalic"
Ctrl-K Cmd-K "drawLink"
Ctrl-L Cmd-L "toggleUnorderedList"
Ctrl-P Cmd-P "togglePreview"
Ctrl-Alt-C Cmd-Alt-C "toggleCodeBlock"
Ctrl-Alt-I Cmd-Alt-I "drawImage"
Ctrl-Alt-L Cmd-Alt-L "toggleOrderedList"
Shift-Ctrl-L Shift-Cmd-L "toggleCheckList"
Shift-Ctrl-H Shift-Cmd-H "toggleHeadingBigger"
F9 F9 "toggleSideBySide"
F11 F11 "toggleFullScreen"
Ctrl-Alt-1 Cmd-Alt-1 "toggleHeading1"
Ctrl-Alt-2 Cmd-Alt-2 "toggleHeading2"
Ctrl-Alt-3 Cmd-Alt-3 "toggleHeading3"
Ctrl-Alt-4 Cmd-Alt-4 "toggleHeading4"
Ctrl-Alt-5 Cmd-Alt-5 "toggleHeading5"
Ctrl-Alt-6 Cmd-Alt-6 "toggleHeading6"

以下是如何修改部分快捷键，同时保持其他快捷键不变的方法：

const editor = new EasyMDE({
    shortcuts: {
        "toggleOrderedList": "Ctrl-Alt-K", // alter the shortcut for toggleOrderedList
        "toggleCodeBlock": null, // unbind Ctrl-Alt-C
        "drawTable": "Cmd-Alt-T", // bind Cmd-Alt-T to drawTable action, which doesn't come with a default shortcut
    }
});

快捷键会在不同平台间自动转换。如果您将快捷键定义为“Cmd-B”，在个人电脑上该快捷键会变为“Ctrl-B”。反之，定义为“Ctrl-B”的快捷键在 Mac 用户使用时会变为“Cmd-B”。

可绑定的操作列表与 工具栏按钮 的内置操作列表相同。

高级用法

事件处理

您可以捕获以下事件列表：https://codemirror.net/doc/manual.html#events

const easyMDE = new EasyMDE();
easyMDE.codemirror.on("change", () => {
    console.log(easyMDE.value());
});

从文本区域移除 EasyMDE

您可以通过调用 toTextArea 方法恢复到初始文本区域。请注意，这会清除与其关联的自动保存（如果已启用）。文本区域将保留已销毁的 EasyMDE 实例中的所有文本。

const easyMDE = new EasyMDE();
// ...
easyMDE.toTextArea();
easyMDE = null;

如果您需要移除已注册的事件监听器（当编辑器不再需要时），请调用 easyMDE.cleanup()。

实用方法

以下方法名称直观易懂，在使用 EasyMDE 进行开发时可能会派上用场。

const easyMDE = new EasyMDE();
easyMDE.isPreviewActive(); // returns boolean
easyMDE.isSideBySideActive(); // returns boolean
easyMDE.isFullscreenActive(); // returns boolean
easyMDE.clearAutosavedValue(); // no returned value

工作原理

EasyMDE 是 SimpleMDE 的延续项目。

SimpleMDE 最初是对 lepture's Editor project 的改进，如今已发展出独立的特性。它内置了 CodeMirror，并依赖于 Font Awesome。

CodeMirror 是本项目的核心，能在用户输入时解析大部分 Markdown 语法，从而为正在编辑的 Markdown 添加样式。此外，编辑器顶部和底部分别添加了工具栏和状态栏。预览功能由 Marked 基于 GitHub 风格 Markdown（GFM）渲染。

SimpleMDE 分支

我最初创建此分支是为了在 SimpleMDE 中实现对 FontAwesome 5 的兼容性。完成后，我提交了一个 pull request，但尚未被接受。加之该项目自 2017 年 5 月起便处于非活跃状态，这促使我进行更多修改，试图为项目注入新的活力。

主要变更包括：

  • 支持 FontAwesome 5
  • 编辑器处于预览模式时，指南按钮可正常使用
  • 链接默认使用 https:// 协议
  • 细微的样式调整
  • 支持 Node 8 及更高版本
  • 大量代码重构
  • 预览中的链接默认在新标签页打开
  • TypeScript 支持

我的目标是继续开发此项目，不断改进并保持其活力。

开发 EasyMDE

您可能需要修改此库以使其行为符合自身需求。通过以下简单步骤即可实现：

  1. 遵循贡献指南中的 前提条件 和 安装说明；
  2. 进行所需修改；
  3. 运行 gulp 命令，生成文件：dist/easymde.min.css 和 dist/easymde.min.js；
  4. 将这些文件复制到您的代码库中，即可完成。

贡献

想要为 EasyMDE 贡献力量？非常感谢！我们为您准备了一份 贡献指南！

许可证

本项目基于 MIT 许可证 发布。

  • 版权所有 (c) 2015 Sparksuite, Inc.
  • 版权所有 (c) 2017 Jeroen Akkerman.

Introduction

易用Markdown编辑器（EasyMDE）：一款简洁、美观且可嵌入的JavaScript Markdown编辑器。无论是初学者还是专家，都能享受到愉悦的编辑体验。内建自动保存和拼写检查功能。【此简介由AI生成】

MIT JavaScript1.24 KCommitsmarkdownmarkdown-convertermarkdown-editormarkdown-parsermarkdown-to-htmlmarkdown-viewer
Customize your domain
README
213.07 K363Visit GitHub