Editor.md 开源项目教程

2026-01-16 09:45:56作者：宗隆裙

1. 项目的目录结构及介绍

Editor.md 的目录结构清晰，便于管理和扩展。以下是主要的目录和文件介绍：

editor.md/
├── css/
│   ├── editormd.css
│   └── ...
├── examples/
│   ├── basic.html
│   └── ...
├── fonts/
│   └── ...
├── images/
│   └── ...
├── lib/
│   ├── codemirror/
│   ├── marked.js
│   └── ...
├── plugins/
│   └── ...
├── src/
│   └── ...
├── tests/
│   └── ...
├── editormd.js
├── editormd.min.js
└── ...

css/：包含编辑器的样式文件。
examples/：包含各种使用示例的 HTML 文件。
fonts/：包含编辑器使用的字体文件。
images/：包含编辑器使用的图片文件。
lib/：包含编辑器依赖的库文件，如 CodeMirror、marked 等。
plugins/：包含编辑器的插件文件。
src/：包含编辑器的源代码文件。
tests/：包含测试文件。
editormd.js 和 editormd.min.js：编辑器的主文件。

2. 项目的启动文件介绍

Editor.md 的启动文件主要是 editormd.js 和 editormd.min.js。这两个文件是编辑器的主文件，负责初始化和配置编辑器。

以下是一个简单的启动示例：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="editor.md/css/editormd.css" />
</head>
<body>
    <div id="test-editor">
        <textarea style="display:none;">### 关于 Editor.md</textarea>
    </div>
    <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="editor.md/editormd.min.js"></script>
    <script type="text/javascript">
        $(function() {
            var editor = editormd("test-editor", {
                path : "editor.md/lib/"
            });
        });
    </script>
</body>
</html>

在这个示例中，editormd.min.js 被加载并初始化了一个编辑器实例。

3. 项目的配置文件介绍

Editor.md 的配置主要通过初始化时的选项对象来完成。以下是一些常用的配置选项：

var editor = editormd("test-editor", {
    width: "100%",
    height: "100%",
    path: "editor.md/lib/",
    theme: "default",
    previewTheme: "default",
    editorTheme: "default",
    markdown: "默认的 Markdown 文本",
    codeFold: true,
    taskList: true,
    tocm: true,
    tex: true,
    flowChart: true,
    sequenceDiagram: true,
    imageUpload: true,
    imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
    imageUploadURL: "./php/upload.php",
    onload: function() {
        console.log('Editor.md 加载完成！');
    }
});