【亲测免费】 SimpleMDE Markdown 编辑器安装和配置指南

2026-01-21 04:05:20作者：胡唯隽

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/si/simplemde-markdown-editor

1. 项目基础介绍和主要编程语言

项目基础介绍

SimpleMDE Markdown 编辑器是一个简单、美观且可嵌入的 JavaScript Markdown 编辑器。它为初学者和专家提供了愉悦的编辑体验，并内置了自动保存和拼写检查功能。SimpleMDE 旨在帮助不熟悉 Markdown 语法的用户更容易地学习和使用 Markdown。

主要编程语言

该项目主要使用 JavaScript 编写，并依赖于 HTML 和 CSS 来实现其用户界面。

2. 项目使用的关键技术和框架

关键技术和框架

CodeMirror: 作为项目的核心组件，CodeMirror 负责解析和渲染 Markdown 语法。
Font Awesome: 用于提供编辑器中的图标。
JavaScript: 用于实现编辑器的核心功能。
HTML/CSS: 用于构建用户界面。

3. 项目安装和配置的准备工作和详细安装步骤

准备工作

在开始安装之前，请确保您的开发环境中已经安装了以下工具：

Node.js: 用于运行 JavaScript 环境。
npm: Node.js 的包管理工具，用于安装和管理依赖项。
浏览器: 用于测试和使用编辑器。

详细安装步骤

步骤 1: 安装 Node.js 和 npm

如果您还没有安装 Node.js 和 npm，请访问 Node.js 官方网站下载并安装适合您操作系统的版本。

步骤 2: 创建项目目录

在您的本地开发环境中创建一个新的项目目录，并进入该目录：

mkdir my-markdown-editor
cd my-markdown-editor

步骤 3: 初始化 npm 项目

在项目目录中初始化一个新的 npm 项目：

npm init -y

步骤 4: 安装 SimpleMDE

使用 npm 安装 SimpleMDE：

npm install simplemde --save

步骤 5: 创建 HTML 文件

在项目目录中创建一个新的 HTML 文件，例如 index.html，并在文件中引入 SimpleMDE 和相关依赖：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>SimpleMDE 示例</title>
    <link rel="stylesheet" href="node_modules/simplemde/dist/simplemde.min.css">
    <script src="node_modules/simplemde/dist/simplemde.min.js"></script>
</head>
<body>
    <textarea id="my-markdown-editor"></textarea>
    <script>
        var simplemde = new SimpleMDE({ element: document.getElementById("my-markdown-editor") });
    </script>
</body>
</html>

步骤 6: 运行项目

在浏览器中打开 index.html 文件，您将看到一个功能齐全的 Markdown 编辑器。

配置选项

SimpleMDE 提供了丰富的配置选项，您可以根据需要进行自定义。以下是一些常用的配置选项示例：

var simplemde = new SimpleMDE({
    element: document.getElementById("my-markdown-editor"),
    autofocus: true,
    autosave: {
        enabled: true,
        uniqueId: "MyUniqueID",
        delay: 10000
    },
    spellChecker: false,
    status: false,
    toolbar: ["bold", "italic", "heading", "|", "quote"]
});