网上的html编辑器种类繁多，目前百度富文本编辑器是 比较多人使用的编辑器，但是部署后发现代码臃肿不堪，很多逻辑写了好几套出来，觉得还是使用markdown编辑器比较合理，

目前叶新东博客的编辑器也是用editor.md搭建的
官网地址：http://pandao.github.io/editor.md/examples/

一、下载插件

项目地址：http://pandao.github.io/editor.md/
下载安装包后放在相应的目录中并引用

<!-- 依赖jquery-->
<link rel="stylesheet" href="lib/js/editor.md-master/css/editormd.css" />
<script type="text/javascript" src="lib/js/jquery.min.js"></script>
<script src="lib/js/editor.md-master/editormd.min.js"></script>
<!-- 需要这三个文件，自己对应好目录哦-->

二、在页面上添加id

<div id="test-editormd">
<textarea />
 </div>

三、js代码

主要就是说这个就是代码，记得make一下

var testEditor;
testEditor = editormd("test-editormd", {
     placeholder:'本编辑器支持Markdown编辑，左边编写，右边预览',  //默认显示的文字，这里就不解释了
     width: "90%", //宽度
     height: 640, //高度
     syncScrolling: "single",
     path: "lib/js/editor.md-master/lib/",   //你的path路径（原资源文件中lib包在我们项目中所放的位置）
     theme: "dark",//工具栏主题
     previewTheme: "dark",//预览主题
     editorTheme: "pastel-on-dark",//编辑主题
     watch : true,//是否显示预览窗口
     emoji: true, //是否启用emoji表情，默认false
     taskList: true,
     tocm: true, // Using [TOCM]
     tex: true, // 开启科学公式TeX语言支持，默认关闭
     flowChart: true,             // 开启流程图支持，默认关闭
     sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,
     toolbar:true,//显示工具栏
     readOnly:true,//开启只读
     onchange : function() {},//编辑器内容改变事件
     toolbarIcons : function() {  //自定义工具栏
          return [
            // "undo", //撤回
            // "redo", //重做
            "bold", //粗体
            "hr", //横线
            //             "del", //删除线
            "italic",//斜体
            "quote",//引用
            // "ucwords",//首字母转大写
            // "uppercase",//字母转大写
            // "lowercase", //字母转小写
                    "|",
            "h1",//字体标题大小
            "h2",//字体标题大小
            "h3",//字体标题大小
            "h4",//字体标题大小
            "h5",//字体标题大小
            "h6",//字体标题大小
                    "|",
            "list-ul",//无序列表
            "list-ol",//有序列表
            "link",//链接
            // "reference-link",//引用链接
            "image",//添加图片
            "code",//行内代码
            // "preformatted-text",//代码块预览格式文本(缩进风格)
            "code-block",//代码块预览格式文本(多语言风格)
            "table",//插入表格
            "datetime",//日期时间
            "emoji",//emoji 表情
            // "html-entities",//HTML实体字符--特殊字符
            "pagebreak",//插入分页符
            "|",
            //         "preview",//全窗口预览HTML（按 Shift + ESC还原）
            "watch",//实时预览
            "|",
            //         "fullscreen", //全屏
            "clear", //清空
            //         "search", //搜索
            "help", //使用帮助
            "info", //关于
            ]
      },
});
//上面的挑有用的写上去就行

其他用法

                  // 定位到第90行
                $("#goto-line-btn").bind("click", function(){
                    testEditor.gotoLine(90);
                });
                // 显示编辑器
                $("#show-btn").bind('click', function(){
                    testEditor.show();
                });
                // 因此编辑器
                $("#hide-btn").bind('click', function(){
                    testEditor.hide();
                });
                // 获取markdown源码
                $("#get-md-btn").bind('click', function(){
                    alert(testEditor.getMarkdown());
                });
                // 获取渲染后的html内容
                $("#get-html-btn").bind('click', function() {
                    alert(testEditor.getHTML());
                });                
                // 查看预览
                $("#watch-btn").bind('click', function() {
                    testEditor.watch();
                });                 
                // 取消预览
                $("#unwatch-btn").bind('click', function() {
                    testEditor.unwatch();
                });              
                // 只看预览
                $("#preview-btn").bind('click', function() {
                    testEditor.previewing();
                });
                // 编辑器全屏
                $("#fullscreen-btn").bind('click', function() {
                    testEditor.fullscreen();
                });
                // 显示菜单栏
                $("#show-toolbar-btn").bind('click', function() {
                    testEditor.showToolbar();
                });
                // 关闭菜单栏
                $("#close-toolbar-btn").bind('click', function() {
                    testEditor.hideToolbar();
                });
                // 回到指定标题
                $("#toc-menu-btn").click(function(){
                    testEditor.config({
                        tocDropdown   : true,
                        tocTitle      : "目录 Table of Contents",
                    });
                });
                // 回到顶部
                $("#toc-default-btn").click(function() {
                    testEditor.config("tocDropdown", false);
                });