集成editormd支持markdown语法（一）之基本使用

集成后的效果如图

其中对黑色主题的样式进行了修改

一、下载源码

下载地址

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

官方地址

http://pandao.github.io/editor.md/

二、导入到webapp目录下

将其中的css、js、lib等文件进行整理放到editormd文件下，然后将editormd文件夹放在webapp目录下，如图

其中我将editormd.js移到了lib目录下

三、editormd的使用 - 显示编辑器

在需要显示编辑器的jsp或html页面内引入css和js文件

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

<script src="/editormd/examples/js/jquery.min.js"></script>
<script src="/editormd/editormd.js"></script>

然后添加div标签，显示编辑器，其中第一个textarea是md格式的，第二个是html格式的

    <div class=" editormd"  id="test-editormd">
        <textarea class="editormd-markdown-textarea" name="test-editormd-markdown-doc">      
         </textarea>
        <!-- 第二个隐藏文本域，用来构造生成的HTML代码，方便表单POST提交，这里的name可以任意取，后    
            台接受时以这个name键为准 -->
        <textarea class="editormd-html-textarea" name="editorhtml" id="editorhtml">
        </textarea>
    </div>

最后调用js语法打开编辑器：

 var testEditor;

$(function() {
    testEditor = editormd("test-editormd", {
        placeholder : "请输入要发布的内容...",//这里不设置则为默认的
        width   : "90%",
        height  : 640,
        syncScrolling : "single",
        path    : "/editormd/lib/",//lib路径
        imageUpload : true,
        imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
        imageUploadURL : "/fileUpload",//图片上传请求Url
        saveHTMLToTextarea : true,//保存html到textarea
        emoji: true,
        taskList: true,
        tocm: true,         // Using [TOCM]
        tex: true,                   // 开启科学公式TeX语言支持，默认关闭
        flowChart: true,             // 开启流程图支持，默认关闭
        sequenceDiagram: true,// 开启时序/序列图支持，默认关闭  
        //下面这一行将使用dark主题
        previewTheme : "dark"

        //editor.md期望得到一个json格式的上传后的返回值，格式是这样的：
        /*
         {
         success : 0 | 1,           // 0 表示上传失败，1 表示上传成功
         message : "提示的信息，上传成功或上传失败及错误信息等。",
         url     : "图片地址"        // 上传成功时才返回
         }
         */
    });
});

其中

 previewTheme : "dark"

是设置黑色主题，但是editormd默认的黑色主题会把整个背景都设置为黑色，这里我对源代码进行了修改，如果有需要的同学可以进行下载

还有一点，图片上传后台返回的字段必须包含success字段，并且值为1时才可获取到图片的url

四、editormd的使用 - emoji表情

首先设置

 emoji: true

上面已经设置了，下载emoji表情包

https://github.com/SemiWarm/SemiWarmAdminPhotos/blob/master/emoji.zip

下载完成之后放到/editormd/plugins/emoji-dialog/目录下

然后修改editormd.js，找到以下位置将path修改为刚才放置的目录

editormd.emoji = {  
    //path  : "http://www.emoji-cheat-sheet.com/graphics/emojis/",  
    path  : "../editormd/plugins/emoji-dialog/emoji/",  
    ext   : ".png"  
}; 

这样就可以使用emoji表情了，如图：

访问我的达人课

访问我的博客 Wang's Blog

关注我的微信公众号获取更多资源