由 UEditor 编辑器替换成支持 Markdown 的 editor.md 编辑器_小白的日常记录，小白博客，php博客，个人博客，技术博客，个人随笔记录，【小白】随笔记录

由 UEditor 编辑器替换成支持 Markdown 的 editor.md 编辑器

19-08-20 14:23 杂七杂八小白 editor.md markdown

#### 此篇已经支持 Markdown 啦~

> 本网站之前都是使用百度的 UEditor 做文章编写使用，但是在使用过程中越来越发现 UEditor 在编写技术相关内容时很麻烦，于是有转用 Markdown 编辑器想法

### 选择 Markdown 编辑器
在选择支持 Markdown 编辑器时看了不少，但是符合个人要求的不多，后来看不少人博主推荐使用`editor.md`，这个是国人开发的开源在线 Markdown 编辑器，对中文支持也不错，在使用过程中挺舒服就它了。

### editor.md 官网和版本选择
官网地址：<a href="https://pandao.github.io/editor.md/" target="_blank">https://pandao.github.io/editor.md/</a>
版本选择：v1.5.0

### 使用
通过 GitHub 下载`editor.md `解压把以下文件和文件夹找出放到editmd文件夹下
```
css
fonts
images
languages
lib
plugins
scss
src
editormd.amd.js
editormd.amd.min.js
editormd.js
editormd.min.js
Gulpfile.js
zepto.min.js
```
页面添加引入文件
```html
<div id="md_editor">
    <textarea style="display:none;" name="content"></textarea>
</div>

![](/uploads/2019/20190820/9f3ca0c363caa3734e99e81c19dc1309.png "1.png")

### 页面 HTML 显示
```html
<div id="md_content">
    <textarea style="display:none;">{$new_row.content}</textarea>
</div>

**其他**

因为默认的代码模块是根据页面的宽度来换行的，如果想出现横向滚动条可以添加以下`CSS`
```css
/*设置代码块横向滚动条*/
.markdown-body pre, .markdown-body pre code{
    white-space: pre !important;
    overflow-x: scroll !important
}
```

本文为原创文章，转载无需和我联系，但请注明来自：http://www.baiyongj.com/news/510.html

上一篇：Windows下安装Redis服务

下一篇：editor.md 本地图片上传配置和自定义上传文件

由 UEditor 编辑器替换成支持 Markdown 的 editor.md 编辑器

推荐文章

热门文章