给自己的网页添加MarkDown编辑器

谁借莪１个温暖的怀抱￠ 2023-02-23 08:58 4阅读 0赞

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

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

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

## **下载与安装** ##

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

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

2.解压文件，并复制到你自己的项目中去。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dxMjMyMw_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dxMjMyMw_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dxMjMyMw_size_16_color_FFFFFF_t_70 2]  
3.在你需要markdown功能的页面引入css和js  
![在这里插入图片描述][20200706234150329.png]  
![在这里插入图片描述][20200706234247977.png]需要注意的是，markdowm需要jq的支持，所以也需要引入jq文件。

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

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

4.1将textarea文本框定义在一个新的div区，id为:md-content.如图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dxMjMyMw_size_16_color_FFFFFF_t_70 3]

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/"
        });
    });

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dxMjMyMw_size_16_color_FFFFFF_t_70 4]

至此，大功告成。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dxMjMyMw_size_16_color_FFFFFF_t_70 5]![在这里插入图片描述][20200816093414132.png_pic_center]

[palewl.cn]: http://palewl.cn
[https_pandao.github.io_editor.md]: https://pandao.github.io/editor.md/
[https_pan.baidu.com_s_1JzoQR17zopU9t7Jq7XWvvg]: https://pan.baidu.com/s/1JzoQR17zopU9t7Jq7XWvvg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dxMjMyMw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200706233315783.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dxMjMyMw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dxMjMyMw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200706233503955.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dxMjMyMw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dxMjMyMw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2020070623372620.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dxMjMyMw==,size_16,color_FFFFFF,t_70
[20200706234150329.png]: https://img-blog.csdnimg.cn/20200706234150329.png
[20200706234247977.png]: https://img-blog.csdnimg.cn/20200706234247977.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dxMjMyMw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200706234458525.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dxMjMyMw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dxMjMyMw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200706234739945.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dxMjMyMw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dxMjMyMw_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200706234818219.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dxMjMyMw==,size_16,color_FFFFFF,t_70
[20200816093414132.png_pic_center]: https://img-blog.csdnimg.cn/20200816093414132.png#pic_center