Medium Editor Markdown 项目教程
1. 项目的目录结构及介绍
medium-editor-markdown/
├── dist/
│ ├── me-markdown-no-deps.js
│ ├── me-markdown-standalone.js
│ ├── me-markdown-standalone.min.js
│ └── ...
├── example/
│ ├── index.html
│ └── ...
├── src/
│ ├── me-markdown.js
│ └── ...
├── .gitignore
├── CONTRIBUTING.md
├── DOCUMENTATION.md
├── LICENSE
├── README.md
├── bower.json
├── build/
│ ├── build.js
│ └── ...
├── index.html
├── package-lock.json
├── package.json
└── ...
目录结构介绍
- dist/: 包含项目的构建输出文件,如
me-markdown-no-deps.js
,me-markdown-standalone.js
,me-markdown-standalone.min.js
等。 - example/: 包含项目的示例文件,如
index.html
。 - src/: 包含项目的源代码文件,如
me-markdown.js
。 - .gitignore: Git 忽略文件配置。
- CONTRIBUTING.md: 贡献指南。
- DOCUMENTATION.md: 项目文档。
- LICENSE: 项目许可证。
- README.md: 项目介绍和使用说明。
- bower.json: Bower 包管理配置文件。
- build/: 包含构建脚本,如
build.js
。 - index.html: 项目的主页文件。
- package-lock.json: npm 包锁定文件。
- package.json: npm 包配置文件。
2. 项目的启动文件介绍
项目的启动文件主要是 index.html
,它包含了项目的初始化代码和示例使用方式。以下是 index.html
的部分代码示例:
<div class="editor"></div>
<pre class="markdown"></pre>
<script src="path/to/medium-editor.js"></script>
<script src="path/to/me-markdown-standalone.min.js"></script>
<script>
(function () {
var markDownEl = document.querySelector(".markdown");
new MediumEditor(document.querySelector(".editor"), {
extensions: {
markdown: new MeMarkdown(function (md) {
markDownEl.textContent = md;
})
}
});
})();
</script>
启动文件介绍
- index.html: 项目的启动文件,包含了 Medium Editor 和 Markdown 扩展的初始化代码。
- medium-editor.js: Medium Editor 的核心库。
- me-markdown-standalone.min.js: Markdown 扩展的独立版本,包含了所有依赖。
3. 项目的配置文件介绍
package.json
package.json
是 npm 包管理器的配置文件,包含了项目的元数据和依赖信息。以下是部分内容示例:
{
"name": "medium-editor-markdown",
"version": "1.0.0",
"description": "A Medium Editor extension to add markdown support",
"main": "dist/me-markdown-standalone.min.js",
"scripts": {
"build": "./build"
},
"dependencies": {
"medium-editor": "^5.0.0"
},
"devDependencies": {
"turndown": "^7.0.0"
}
}
配置文件介绍
- name: 项目名称。
- version: 项目版本号。
- description: 项目描述。
- main: 项目的入口文件。
- scripts: 项目的脚本命令,如
build
。 - dependencies: 项目的依赖库,如
medium-editor
。 - devDependencies: 开发环境的依赖库,如
turndown
。
通过以上内容,您可以了解 Medium Editor Markdown 项目的目录结构、启动文件和配置文件的基本信息。