给自己的网页添加MarkDown编辑器_dw如何添加类似markdown的编辑器

对于程序员来说，使用MarkDown编辑器远远比使用word等编辑器好，统一自然、代码高亮等特点已经成为了程序员的必备编辑器。

那么如何使自己开发的页面也具备markdown编辑器的功能呢？

需要看效果的，可以到我自己的个人博客查看：palewl.cn

下载与安装

1.下载开源的编辑器插件 Markdown.zip
方法一：官网下载：https://pandao.github.io/editor.md/ —速度有点慢，有点难下载

方法二：百度网盘 https://pan.baidu.com/s/1JzoQR17zopU9t7Jq7XWvvg 提取码：qdlz —推荐√ 速度虽然慢，但是还是可以下载的

2.解压文件，并复制到你自己的项目中去。



3.在你需要markdown功能的页面引入css和js

需要注意的是，markdowm需要jq的支持，所以也需要引入jq文件。

4.markdowm其实就是一种文本编辑器，比如我们做个人博客的时候，发布文章一般都有标题、内容

两个框，markdown就是要放在内容框里面展示的。

4.1将textarea文本框定义在一个新的div区，id为:md-content.如图

4.2 复制以下js代码到前面，注意要在jq和editormd.min.js的后面。

var contentEditor;

$(function() {
    contentEditor = editormd("md-content", {
        width   : "100%",
        height  : 640,
        syncScrolling : "single",
        path    : "../static/lib/editormd/lib/"
    });
});
1
2
3
4
5
6
7
8
9
10

也可以将代码放在专门的js文件里，引入即可。

至此，大功告成。