如何在html页面集成markdown编辑器

最新推荐文章于 2024-05-30 10:06:28 发布

兰兰的风。。。

最新推荐文章于 2024-05-30 10:06:28 发布

阅读量4.3k

点赞数 13

分类专栏： # 插件使用文章标签： jquery html 添加markdown编辑器

本文链接：https://blog.csdn.net/pilgrim_121/article/details/105514992

版权

插件使用专栏收录该内容

4 篇文章 0 订阅

订阅专栏

https://pandao.github.io/editor.md/这是一个编辑器的网站，主页如下：

在这里插入图片描述
链接：https://pan.baidu.com/s/1f45-sjzXeiVmrRmBI6tl_g
提取码：tgkz

从百度网盘下载，解压。
在这里插入图片描述
1,将这几个文件放到editormd文件夹里，新建html与editormd文件夹同级，如图所示结构：

使用markdown：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>markdown插件测试</title>
	<!-- 引入css -->
    <link rel="stylesheet" type="text/css" href="./editormd/css/editormd.min.css">
</head>
<body>

	<div id="md-content" style="z-index: 1 !important;">
	    <textarea></textarea>
	</div>

    <!-- 这里必须先引入jquery -->
	<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
	<!-- 引入js -->
	<script src="./editormd/editormd.min.js"></script>
	<script type="text/javascript">
       //初始化Markdown编辑器
	    var contentEditor;
	    $(function() {
	      contentEditor = editormd("md-content", {
	        width   : "100%",//宽度
	        height  : 500,//高度
	        syncScrolling : "single",//单滚动条
			  path    : "./editormd/lib/"//依赖的包路径
	      });
	    });
	</script>
</body>
</html>

结果：在这里插入图片描述

兰兰的风。。。

关注

13
点赞
踩
35

收藏

觉得还不错? 一键收藏
4
评论
如何在html页面集成markdown编辑器

https://pandao.github.io/editor.md/这是一个编辑器的网站，主页如下：链接：https://pan.baidu.com/s/1f45-sjzXeiVmrRmBI6tl_g提取码：tgkz从百度网盘下载，解压。1,将这几个文件放到editormd文件夹里，新建html与editormd文件夹同级，如图所示结构：此时：...
复制链接

扫一扫