Editor.md安装使用（markdown)

下载

Editor.md官方下载

写markdown

1. 引入JS和CSS

    <link rel="stylesheet" href="${ctx}/mdeditor/css/editormd.css">
    <script type="text/javascript" src="${ctx}/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="${ctx}/mdeditor/editormd.min.js"></script>

引入两个JS和一个CSS

2. html

<div id="my-editormd" ></div>

3.JS

var myEditor = editormd("my-editormd", {//注意1：这里的就是上面的DIV的id属性值
            width   : "90%",
            height  : 640,
            syncScrolling : "single",
            path    : "${ctx}/mdeditor/lib/",//下边特别讲解
            saveHTMLToTextarea : true,//注意3：这个配置，方便post提交表单
            /**上传图片相关配置如下*/
            imageUpload : true,
            imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp","PNG","JPEG","GIF","BMP","JPG","WEBP"],
            imageUploadURL : "${ctx}/blog/uploadImg.wj",//注意你后端的上传图片服务地址
        });

4.效果（就如我在写这篇文章）

5.取值

myEditor为上方JS中属性名称

myEditor.getMarkdown()；//获取markdown值
myEditor.getHTML()；//获取html值

6.问题

(1)如写成如下代码：

<form action="" method="">
	<div id="my-editormd"></div>
	<input type="submit" value="提交"/>
</form>

提交的表单name为：

markdown值：name="my-editormd-markdown-doc"

html值：name="my-editormd-html-code"

(2)上方JS中path属性要设置为自己的包路径，不然可能会报404。

显示markdown

1.引入JS和CSS

    <link rel="stylesheet" href="${ctx}/mdeditor/css/editormd.css">
	<script type="text/javascript" src="${ctx}/js/jquery-3.3.1.min.js"></script>
    <script src="${ctx}/mdeditor/lib/marked.min.js"></script>
    <script src="${ctx}/mdeditor/lib/prettify.min.js"></script>
    <script src="${ctx}/mdeditor/lib/raphael.min.js"></script>
    <script src="${ctx}/mdeditor/lib/underscore.min.js"></script>
    <script src="${ctx}/mdeditor/lib/sequence-diagram.min.js"></script>
    <script src="${ctx}/mdeditor/lib/flowchart.min.js"></script>
    <script src="${ctx}/mdeditor/lib/jquery.flowchart.min.js"></script>
    <script src="${ctx}/mdeditor/editormd.min.js" type="text/javascript" charset="utf-8"></script>

2.html

3.JS

var testEditor = editormd.markdownToHTML("content", {//注意：这里是上面DIV的id
        htmlDecode: "style,script,iframe",
        emoji: true,
        taskList: true,
        tex: true, // 默认不解析
        flowChart: true, // 默认不解析
        sequenceDiagram: true, // 默认不解析
        codeFold: true
    });

搞定！

markdown显示遇到的问题

最开始，我markdown显示中2.html不是贴的图片，是用的源码，但是显示出错，我排查了其他错误，发现是因为，我贴的源码中name="content-markdown-doc"或是id="content"与 服务器端源码冲突了，导致解析出错。

更多咨询欢迎访问http://www.iamwj.com
iamwj : 我是魏杰