改进富文本编辑器、Editor.md

初衷
基本使用
Markdown展示成HTML
- 方式一：Markdown内容写在HTML中
- 方式二：Markdown内容通过js赋值转化
图片上传

初衷

文章的编写想改用一个支持 Markdown 语法的编辑器，于是找到了 Editor.md，链接为 https://github.com/pandao/editor.md

将 github 上的项目拉取下来，查看 examples 下面的目录，可以了解到 Editor.md 的基本使用方法。

由于拉取下来的是整个项目，所以，我提取了必要的文件来减小文件的大小。
精简后的目录有：

css
fonts
images
languages
lib
plugins
editormd.min.js
jquery.min.js
simple.html

其中的simple.html是自己写的一个小demo。

editor.md 压缩包下载
链接：https://pan.baidu.com/s/1CjMaRixQ6E2_c5Q-zpUZeg
提取码：w3d1

基本使用

拷贝

首先将精简后的editor.md目录拷贝到项目中，我的是项目的Scripts目录下。

页面部分

引入样式

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

引入js

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

HTML

<div id="test-editormd">
    <textarea style="display:none;"></textarea>
</div>

js初始化

var testEditor;
$(function() {
    testEditor = editormd("test-editormd", {
        placeholder : "开始编辑...",  
        width   : "90%",
        height  : 640,
        syncScrolling : "single",
        imageUpload: true,//图片上传功能  
        imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],  
        imageUploadURL : "../article/uploadImage", 
        path    : "./lib/", 
        emoji: false,
        toolbarIcons : function() {  
            // Or return editormd.toolbarModes[name]; // full, simple, mini  
            // Using "||" set icons align right.  
            return ["undo","redo","|","bold","italic","quote","uppercase","lowercase","|","h1","h2","h3","h4","|","list-ul","list-ol","hr","|","link","image","code","code-block","table","html-entities","|","watch","preview","fullscreen","clear","|","help"]  
        }
    });
});

取值

testEditor.getMarkdown();

赋值

testEditor.setMarkdown(content);

表单编辑的时候会用到赋值功能，但调用赋值操作的时候一般是在 testEditor 初始化之后，所以此方法调用要放在 onload 事件中。

var testEditor = editormd("editormd", {
    placeholder: "开始编辑...",
    width: "100%",
    height: 640,
    //syncScrolling: "single",
    imageUpload: true,//图片上传功能  
    imageFormats: ["jpg", "jpeg", "gif", "png", "bmp"],
    imageUploadURL: "/api/File/Upload",
    path: "/Scripts/editor.md/lib/",
    emoji: false,
    tocm: true,  // Using [TOCM]  
    tex: true,  // 开启科学公式TeX语言支持
    flowChart: true,
    sequenceDiagram: true,
    toolbarIcons: function () {
        // Or return editormd.toolbarModes[name]; // full, simple, mini  
        // Using "||" set icons align right.  
        return ["undo", "redo", "|", "bold", "italic", "quote", "uppercase", "lowercase", "|", "h1", "h2", "h3", "h4", "|", "list-ul", "list-ol", "hr", "|", "link", "image", "code", "code-block", "table", "html-entities", "|", "watch", "preview", "fullscreen", "clear", "|", "help"]
    },
    onload: function () {
        if (theEditor == 0) 
            testEditor.setMarkdown(content);
    }
});

Markdown展示成HTML

方式一：Markdown内容写在HTML中

引入样式

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

引入js

<script src="js/jquery.min.js"></script>
<script src="../lib/marked.min.js"></script>
<script src="../lib/prettify.min.js"></script>
<script src="../lib/raphael.min.js"></script>
<script src="../lib/underscore.min.js"></script>
<script src="../lib/sequence-diagram.min.js"></script>
<script src="../lib/flowchart.min.js"></script>
<script src="../lib/jquery.flowchart.min.js"></script>
<script src="../editormd.min.js"></script>

HTML

<div id="test-editormd-view">
      <textarea style="display:none;" name="test-editormd-markdown-doc">###Hello world!</textarea>               
</div>

js初始化

var testEditormdView = editormd.markdownToHTML("test-editormd-view", {
    htmlDecode: "style,script,iframe",  // you can filter tags decode
    emoji: false,
    taskList: true,
    tocm: true, 
    tex: true,  
    flowChart: true,
    sequenceDiagram: true,
});

方式二：Markdown内容通过js赋值转化

方式二不同的是 HTML 和 js 部分

HTML

<div id="test-editormd-view">
      <textarea style="display:none;" name="test-editormd-markdown-doc"></textarea>               
</div>

js初始化

$.get("test.md", function(markdown) {
    var testEditormdView = editormd.markdownToHTML("test-editormd-view", {
        markdown: markdown,
        htmlDecode: "style,script,iframe",  // you can filter tags decode
        emoji: false,
        taskList: true,
        tocm: true, 
        tex: true,  
        flowChart: true,
        sequenceDiagram: true,
    });
}

图片上传

图片上传在上面的初始化已经提及到了，按这样的配置就可以了。

imageUpload: true,//图片上传功能  
imageFormats: ["jpg", "jpeg", "gif", "png", "bmp"],
imageUploadURL: "/api/File/Upload",

后台接口返回值需要按他给的来

{ 
"success" : 0, /*1-成功，0-失败*/
"message" : "XXXXX", /*消息*/
"url" : "http://XXXX/1.png" /*图片地址*/
}

这里提供一个 C# 版本的接口

C#

public class FileController : ApiController
{
    [HttpPost]
    public IHttpActionResult Upload()
    {
        HttpFileCollection files = HttpContext.Current.Request.Files;
        HttpPostedFile file = files[0];
        if (file == null)
        {
            return Ok(new { success = 0, message = "没有文件" });
        }
        else if (!CheckFileType(file))
        {
            return Ok(new { success = 0, message = "文件类型不对" });
        }
        else if (!CheckFileSize(file))
        {
            return Ok(new { success = 0, message = "文件大于请小于20M" });
        }
        string extension = file.FileName.Substring(file.FileName.LastIndexOf("."));
        string theFile = Path.GetFileName(MD5Helper.MD5Value(file.FileName))+extension;
        string folderPath = HttpContext.Current.Request.MapPath("~/Upload");
        if (!Directory.Exists(folderPath))
            Directory.CreateDirectory(folderPath);
        var fileName = Path.Combine(folderPath, theFile);
        try
        {
            file.SaveAs(fileName);
            string path = "/upload/" + theFile;
            return Ok(new { success = 1, message = "", url = path });
        }
        catch (Exception ex)
        {
            return Ok(new { success = 1, message = ex.Message });
        }
    }
    private bool CheckFileType(HttpPostedFile file)
    {
        string extension = file.FileName.Substring(file.FileName.LastIndexOf("."));
        List<string> extens = new List<string>() { ".jpg", ".jpeg", ".gif", ".png", ".bmp" };
        return extens.Contains(extension);
    }
    private bool CheckFileSize(HttpPostedFile file)
    {
        var size = file.ContentLength / 1024 / 1024;
        if (size > 200) //如果大于20M
            return false;
        else
            return true;
    }
}