editormd使用教程

  1. 云栖社区>
  2. 博客>
  3. 正文

editormd使用教程

渣渣先 2017-01-21 12:31:00 浏览916
展开阅读全文

对于现在的程序员来说,都需要一个快速写文章的语言,那么无非就是markdown了,市面上markdown编辑器并不多,而且也不怎么好用,现在推荐国内的比较牛逼的。

入门

  1. 建议先到官方看下如何使用,避免少走弯路。
  2. 官方地址 https://pandao.github.io/editor.md/examples/index.html

下载安装

  1. 下载地址 https://pandao.github.io/editor.md/

开始集成

将editormd拷贝到你的项目

20161229101318.png

css代码

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

html代码

20161229104919.png

js代码

<script src="/Content/editormd/editormd.min.js"></script>
<script type="text/javascript">
    //初始化编辑器
    var testEditor;
    $(function () {
        testEditor = editormd("txtblogcontent", {
            width: "100%",
            height: 740,
            path: '/Content/editormd/lib/',
            theme: "dark",
            previewTheme: "dark",
            editorTheme: "pastel-on-dark",
            markdown: "",
            codeFold: true,
            //syncScrolling : false,
            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: "/Center/RichTextUpload",
            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);
            }
        });
    });

    //获取编辑器内容
    var blogcontent = encodeURIComponent(testEditor.getMarkdown());
</script>

将markdown转换成html

css代码

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

html代码

20161229104956.png

js代码

 <script src="/Content/editormd/lib/marked.min.js"></script>
 <script src="/Content/editormd/lib/prettify.min.js"></script>
 <script src="/Content/editormd/lib/raphael.min.js"></script>
 <script src="/Content/editormd/lib/underscore.min.js"></script>
 <script src="/Content/editormd/lib/sequence-diagram.min.js"></script>
 <script src="/Content/editormd/lib/flowchart.min.js"></script>
 <script src="/Content/editormd/lib/jquery.flowchart.min.js"></script>
 <script src="/Content/editormd/editormd.min.js"></script>
 <script type="text/javascript">
    var testEditor;
    $(function () {
        testEditor = editormd.markdownToHTML("txtblogcontent", {
            htmlDecode: "style,script,iframe",  // you can filter tags decode
            emoji: true,
            taskList: true,
            tex: true,  // 默认不解析
            flowChart: true,  // 默认不解析
            sequenceDiagram: true,  // 默认不解析
            codeFold: true,
    });
 </script>

完善

到这里基本已经完成了,上传图片的自己后台处理下即可,还有一些弹出框,例如弹出上传图片时样式会影响,根据自己的需求改改即可,另外还有表情里的github-emoji会没有显示出来,需要改几个地方。

  1. 将emoji表情下载下来上传到服务器。
  2. 修改emoji-dialog.js文件

20161229102733.png

第一个箭头表示存放表情包的文件夹

js修改代码

20161229102951.png

将路径改为自己上传的表情表路径即可

展示表情

20161229115449.png

将这四个js文件中的路径替换成你表情包的路径,原来路径 http://www.emoji-cheat-sheet.com/graphics/emojis/

表情包下载地址 http://obgwarx9r.bkt.clouddn.com/emoji.zip

网友评论

登录后评论
0/500
评论
渣渣先
+ 关注