EasyMarkdownEditor 开源项目教程

2026-01-17 08:16:52作者：昌雅子Ethen

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

项目地址：https://gitcode.com/gh_mirrors/ea/easy-markdown-editor

1. 项目目录结构及介绍

EasyMarkdownEditor/
│
├── dist/            # 包含编译后的 CSS 和 JS 文件，用于部署到生产环境
│   ├── easymde.min.css
│   └── easymde.min.js
│
├── src/             # 源代码目录
│   ├── css/         # 样式表源码
│   ├── icons/       # 图标资源
│   ├── js/          # JavaScript 源码
│   │   └── main.js   # 主要的编辑器逻辑
│   └── lang/        # 不同语言包
│
├── test/            # 单元测试相关文件
│
└── package.json     # 项目依赖和构建配置

dist/ 目录包含了压缩和优化过的 CSS 和 JS 文件，适用于在网站中直接引入。src/ 是源代码目录，其中 js/main.js 是编辑器的核心文件，而 css 和 icons 存储样式和图标资源，lang 则包含不同语言的支持。

2. 项目启动文件介绍

EasyMarkdownEditor 并不是一个运行时服务，它是一个静态库，主要通过 HTML 中的 <script> 和 <link> 标签来引入。以下是如何在你的页面中使用它的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Easy Markdown Editor Example</title>
    <link rel="stylesheet" href="path/to/easymde.min.css">
</head>
<body>
    <textarea id="my-editor"></textarea>

    <script src="path/to/easymde.min.js"></script>
    <script>
        var easyMDE = new EasyMDE({ /* 配置项 */ });
        easyMDE.render();
    </script>
</body>
</html>

这里我们创建了一个文本区域 my-editor，然后通过 JavaScript 初始化一个 EasyMarkdownEditor 实例并渲染到该文本区域。

3. 项目配置文件介绍

EasyMarkdownEditor 的配置是通过 JavaScript 对象传递给构造函数的。以下是一些常见的配置选项：

var options = {
    forceSync: false,               // 是否立即同步编辑器中的变化到 textarea，默认为 false
    hideIcons: [],                  // 要隐藏的默认工具栏图标名称数组
    indentWithTabs: true,           // 是否使用制表符缩进，默认为 true
    initialValue: "",              // 初始化编辑器的值
    previewImagesInEditor: false,   // 默认不预览图片，只有单独一行的图片才会显示预览
    previewImagesHandler: null,     // 自定义图片预览处理函数
    autofocus: false,               // 是否自动聚焦，默认为 false
    autosave: {                     // 自动保存设置
        enabled: false,
        delay: 10000,                // 保存间隔（毫秒）
        uniqueId: "your_unique_id",  // 必须设置的唯一ID
        timeFormat: 'yyyy-MM-dd HH:mm:ss'  // 时间格式
    },
    // 更多配置...
};

var easyMDE = new EasyMDE(options);