整合MarkDown编辑器editor.md的第一天：页面展示（简单示例和完整示例）

最新推荐文章于 2023-04-26 08:24:47 发布

只剩渣了

最新推荐文章于 2023-04-26 08:24:47 发布

阅读量4.9k

点赞数 5

分类专栏： MarkDown文本编辑器

本文链接：https://blog.csdn.net/azax4/article/details/89738683

版权

MarkDown文本编辑器专栏收录该内容

3 篇文章 1 订阅

订阅专栏

整合editor

第一步：新建一个 html 页面（这是一句废话）
第二步：引入必要的文件及html内容

	<!-- 导入CSS文件 -->
	<link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/editormd.css" />
   
	 <!-- 在Body中添加如下代码 -->
	<div id="deditor"> <!-- 这里的id很重要的 -->
	    <textarea style="display:none;">这里是editor的内容</textarea>
	</div>

    <!-- 导入JavaScript文件 -->
	<script src="js/jquery.min.js"></script>
	<script src="js/editormd.min.js"></script>
	
	<!-- 导入如下的JavaScript代码 -->
	<script type="text/javascript">
    var testEditor;
    $(function () {
        testEditor = editormd({
        	id:"deditor",//注意：这里是上面DIV的id
        	width:"90%",
        	height:640,
        	syncScrolling: "single",
        	path:"lib/",
    });});
 </script>

第三步：需要导入三个文件夹— —lib、images和fonts（这三个文件均在editor.md-master目录下）

目录结构如下：

完整html代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/editormd.css" />	

</head>
<body>
	<div id="deditor">
	    <textarea style="display:none;">### Hello Editor.md !</textarea>
	</div>
	<script src="js/jquery.min.js"></script>
	<script src="js/editormd.min.js"></script>
	<script type="text/javascript">
    var testEditor;
    $(function () {
        testEditor = editormd({
        	id:"deditor",//注意：这里是上面DIV的id
        	width:"90%",
        	height:640,
        	syncScrolling: "single",
        	path:"lib/",
    });});
 </script>
</body>
</html>

简单版示例，到此就算完成了
接下来是完整版的：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/editormd.css" />
    <!-- <link rel="stylesheet" href="css/katex.min.css" /> -->
	
</head>
<body>
	<div id="deditor">
	    <textarea style="display:none;">### Hello Editor.md !</textarea>
	</div>
	<script src="js/jquery.min.js"></script>
	<script src="js/editormd.js"></script>
	<!-- <script src="js/katex.min.js"></script> -->
	<script type="text/javascript">
    var testEditor;
    $(function () {
    	//$.get('test.md', function(md){  //如果是放在网站程序中的可以打开注释

        testEditor = editormd({
        	id:"deditor",//注意：这里是上面DIV的id
        	width:"90%",
        	height:640,
        	syncScrolling: "single",
        	path:"lib/",

        	theme : "dark",
            previewTheme : "dark",
            editorTheme : "pastel-on-dark",
            //markdown : md,
            codeFold : true,
            saveHTMLToTextarea : true,    // 保存 HTML 到 Textarea
            searchReplace : true,
            //watch : false,                // 关闭实时预览
            htmlDecode : "style,script,iframe|on*",            // 开启 HTML 标签解析，为了安全性，默认不开启    
            //toolbar  : false,             //关闭工具栏
            //previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮，默认开启
            emoji : true,
            taskList : true,
            tocm            : true,         // Using [TOCM]
            tex : true,                   // 开启科学公式TeX语言支持，默认关闭
            flowChart : true,             // 开启流程图支持，默认关闭
            sequenceDiagram : true,       // 开启时序/序列图支持，默认关闭,
            //dialogLockScreen : false,   // 设置弹出层对话框不锁屏，全局通用，默认为true
            //dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true
            //dialogDraggable : false,    // 设置弹出层对话框不可拖动，全局通用，默认为true
            //dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度，全局通用，默认值为0.1
            //dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
            

            /**上传图片相关配置如下*/
	        imageUpload : true,
	        imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
	        imageUploadURL : "upload/editormdImg/",//注意你后端的上传图片服务地址
	        onload : function() {
                //console.log('onload', this);
                //this.fullscreen();
                //this.unwatch();
                //this.watch().fullscreen();

                //this.setMarkdown("#PHP");
                //this.width("100%");
                //this.height(480);
                //this.resize("100%", 640);
            }
        //}); 	//如果是放在网站程序中的可以打开注释
    });});
 </script>
</body>
</html>

完整版的里面多引入了一个test.md,如果不是网页程序的话，不需要引入

只剩渣了

关注

5
点赞
踩
14

收藏

觉得还不错? 一键收藏
1
评论
整合MarkDown编辑器editor.md的第一天：页面展示（简单示例和完整示例）

整合editor第一步：新建一个 html 页面（这是一句废话）第二步：引入必要的文件及html内容  <link rel="stylesheet" href="css/style.css" /> <link rel="stylesheet" href="css/editormd.css" /> &...
复制链接

扫一扫