当前位置：首页 > news >正文

Markdown编辑器--editor.md的用法

news 2025/7/16 12:50:38

原文网址：https://knife.blog.csdn.net/article/details/135209355

简介

本文用实例介绍editor.md这款Markdown编辑器的用法。

此编辑器是最主流、最好用的markdown编辑器。

官网

示例：https://pandao.github.io/editor.md/

github：https://github.com/pandao/editor.md/

部署方式

官网给出了三种方式：

直接部署HTML（github下载，直接复制HTML、CSS、JS)
通过 NPM 安装：npm install editor.md
通过 Bower 安装：bower install editor.md

本文采用HTML直接部署的方式（第一种）。

1.下载项目

https://github.com/pandao/editor.md/releases/tag/v1.5.0

下边红色箭头的两个压缩包，任意一个都可以。

2.解压

解压后，是这样的：（示例HTML都在红色箭头所指的文件夹内）

3.打开HTML

打开一个简单示例：（用浏览器打开examples/simple.html）

结果：（就这么简单，直接就可以用了）

示例分析

示例HTML分析

分析一下simple.html文件（将里边无关的内容删掉）

<!DOCTYPE html>
<html lang="zh"><head><meta charset="utf-8" /><title>Simple example - Editor.md examples</title><link rel="stylesheet" href="css/style.css" /><link rel="stylesheet" href="../css/editormd.css" /><link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" /></head><body><div id="layout"><header><h1>Simple example</h1></header><div id="test-editormd"><textarea style="display:none;">这里输入内容</textarea></div></div><script src="js/jquery.min.js"></script><script src="../editormd.min.js"></script><script type="text/javascript">var testEditor;$(function() {testEditor = editormd("test-editormd", {width   : "90%",height  : 640,syncScrolling : "single",path    : "../lib/"});/*// ortestEditor = editormd({id      : "test-editormd",width   : "90%",height  : 640,path    : "../lib/"});*/});</script></body>
</html>

可以发现，主要要做如下几步：

引入css、js等
在js里创建editormd实例

要引入的东西如下图所示：（一定要引入，如果不引入，会有各种奇怪的问题）

官网示例

上边已经介绍过了，压缩包解压后，simples里边都是示例文件，浏览器直接打开即可。

也可以看官方的示例效果，与simples里的文件基本是对应的：

访问：https://pandao.github.io/editor.md/

搭建静态前端项目

本处我搭建一个静态前端部署的editor.md，依赖的css和js等全部放到CDN，然后写一个html来引用。

1.复制依赖到cdn

将文件夹的如下文件复制到CDN：

2.编写html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>markdown在线编辑器</title><link rel="stylesheet" href="https://static.suchtool.com/fox/page/editor/markdown/css/editormd.min.css" /><script src="https://static.suchtool.com/js/lib/jquery/3.7.1/jquery.min.js"></script><script src="https://static.suchtool.com/fox/page/editor/markdown/editormd.min.js"></head><body><div id="layout"><div id="test-editormd"><textarea>这里输入内容</textarea></div>
</div></script>
<script>var testEditor;$(function() {testEditor = editormd("test-editormd", {width   : "90%",height  : "80vh",syncScrolling : "single",path    : "https://static.suchtool.com/fox/page/editor/markdown/lib/"});});
</script></body>
</html>