让你自己的网页支持Markdown编辑器

最新推荐文章于 2024-06-30 00:13:11 发布

可问春风丶

最新推荐文章于 2024-06-30 00:13:11 发布

阅读量1w

点赞数 3

分类专栏：小知识

本文链接：https://blog.csdn.net/qq_41768400/article/details/80669822

版权

小知识专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Editor是一款免费的，开源的轻量级Markdown编辑器，附上下载地址
下载下来的文件夹大概是这样的结构：
这里写图片描述
为了防止项目结构混乱，我做了这样的目录结构

这里写图片描述

这里的new_file.html是我的页面，它和plug-ins文件夹同级，plug-ins文加下有JQuery和EditorMD两个文件夹，刚才下载的文件就放在这个文件夹下面。

这里注意一点，由于Editor已经停止维护了，所以他的emoji文件已经加载不了了，所以我们这里需要先下载这个文件夹再配置路径。
emoji下载地址
这里写图片描述
这4个js文件的emoji路径都需要配置：

editormd.emoji     = {
        path  : "plug-ins/EditorMD/plugins/emoji-dialog/emoji/",
        ext   : ".png"
    };

最后就是写页面了，我们采用官方github上面的例子

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>EditorMD</title>
		<link rel="stylesheet" type="text/css" href="plug-ins/EditorMD/lib/codemirror/codemirror.min.css" />
		<script type="text/javascript" src="plug-ins/JQuery/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="plug-ins/EditorMD/editormd.min.js"></script>
		<link rel="stylesheet" type="text/css" href="plug-ins/EditorMD/css/editormd.css" />
	</head>

	<body>

		<div id="editormd">
			<textarea style="display:none;">### Hello Editor.md !</textarea>
		</div>
		<script type="text/javascript">
			$(function() {
				var editor = editormd("editormd", {
					path: 'plug-ins/EditorMD/lib/'
				});

				/*
				// or
				var editor = editormd({
				    id   : "editormd",
				    path : "../lib/"
				});
				*/
			});
		</script>
		</script>
	</body>

</html>

OK,现在就可以在页面中使用Markdown了，我觉得这个这个编辑器比CSDN的Markdown编辑器功能要多一点

这里写图片描述

Git地址(表情包已停止维护）

可问春风丶

关注

3
点赞
踩
30

收藏

觉得还不错? 一键收藏
22
评论
让你自己的网页支持Markdown编辑器

Editor是一款免费的，开源的轻量级Markdown编辑器，附上下载地址下载下来的文件夹大概是这样的结构：为了防止项目结构混乱，我做了这样的目录结构这里的new_file.html是我的页面，它和plug-ins文件夹同级，plug-ins文加下有JQuery和EditorMD两个文件夹，刚才下载的文件就放在这个文件夹下面。这里注意一点，由于Editor已经停止维护了，所...
复制链接

扫一扫

专栏目录