# MDEditor

**Repository Path**: mooshroom/MDEditor

## Basic Information

- **Project Name**: MDEditor
- **Description**: 碳素云前端markdown编辑器模块
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 7
- **Forks**: 3
- **Created**: 2015-03-05
- **Last Updated**: 2025-08-20

## Categories & Tags

**Categories**: text-editor

**Tags**: None

## README

# MDEditor--markdown编辑器
---

直接上网址[碳素云-markdown编辑器](http://md.tansuyun.cn/)

## 功能介绍
MDEditor是一款前端实现markdown编辑器的模块，目前功能包含：
>1. markdown格式文本的实时编译（同时支持GFM语法）
>2. 编辑模式的切换
>3. 快捷键功能
>4. 实时预览时编辑窗口和预览窗口的同步滚动（算法有待优化） 
>5. 可以使用avalon内置的AMD加载器动态加载
>6. 更具当前浏览器的高度自动调整编辑框的高度，好处很多。
>7. 2015年3月14日，添加了保存文件到本地的功能，以及打开文件的功能，无后端依赖。

## 依赖
实现编辑器的全部部分并非我一人之手，使用了很多成熟的框架，编辑器的编译部分也是使用大神写的markdown编译器，我只是做了一个外壳而已，以下是本编辑器所依赖的框架：
>1. jquery-1.10.2 以上就可以了
>2. [avalon](http://avalonjs.github.io/) 前端框架
>3. [bootstrap3](http://www.bootcss.com/) 前端UI框架
>4. [font-awesome](http://fontawesome.io/) 字体图标库

因为这个模块原本是在自己团队内部使用，而团队就用这3个框架来进行开发，所以这里也是直接基于这3者开始，图标的部分就不额外给设计师加工作量，所以就直接用的fontAwesome的库，总之都是很偷懒的啦~

不过我还没写完全部的功能就被推荐了也是很以外（所以才来好好写写文档）。

除此之外，实现编译和代码美化的部分也用了别人的代码：
>1. [marked](https://github.com/chjj/marked) markdown编译器
>2. [prettify](http://code.google.com/p/google-code-prettify/) 代码美化插件

小生感激不尽！

## 文件结构
文件结构直接使用碳素云前端团队的标准目录结构
###1. plugins
这个文件用户放置项目所用的各种插件，MDEditor也是一个插件，所以也是放在这个里面，团队使用的时候直接整个文件夹拖过去就好。

[attention.js](http://git.oschina.net/luodan/tip)  是[罗丹](http://git.oschina.net/luodan)的提示插件，新版本名字已经修改了，我用的是老版本的，所以还是用的这个名字。

[markdown.js](https://github.com/chjj/marked) 是markdown的编译器，prettify.js是代码美化插件。

MDEditor.html是编辑器的结构层，需要引入才能看，使用的时候可以用动态加载的方法也可以直接代码负责粘贴。

MDEditor.js是编辑器的主要文件，其中实现了快捷键，自动高度，跟随滚动，等等的功能。

###2. src
这个文件夹里面放置了静态资源，包括各种框架等等的，其中比较总要的是**MDEditor.css**这个文件，这个文件就是编辑器的样式表，加入了之后就能看到正确的样子了
###3. config.js
这个文件用于配置项目相关的配置项，例如API的接口，全局方法等，比较重要的是，要将依赖的地址在这里明确写出来，像这样：
```javascript
require.config({
    paths: {
        MDEditor:"../../plugins/MDEditor",
        marked:"../../plugins/markdown",
        prettify:"../../plugins/prettify"
    }
});
 ```
基本地址是从avalon.js所在的地址开始，具体的细节可以看avalon关于加载器的[详细介绍](http://avalonjs.github.io/#zh/engineering/loader.html)。如果你的目录结构和我的不一样，只需要在这里配置好各个依赖的地址，使用就没问题了。
###4. include.js
这个文件里面是一个avalon的VM，作用是用来控制各个模块在index.html上面的各种引入。我在这里引入了MDEditor.html。
###5. index.html
启动文件，不用多说，一看就明白。
###6. router.js
avalon的路由系统的文件，具体怎么弄的可以看[这里](https://github.com/RubyLouvre/mmRouter)。我在这里监听了首页的路由，然后动态加载了MDEditor.js，然后在MDEditor.js里面动态加载了编译器和代码美化插件，所以如果你目录结构和我一样，直接动态加载，或者引入MDEditor.js就可以了。
## 使用指引
如果你只是下下来自己用的话，你需要配置一个本地的服务器，用IIS还是nginx 都可以，然后打开 http://localhost/mdeditor 就可以使用了（localhost是什么我就不多说了）。

要在自己的项目中使用，首先需要引入**jquery、avalon、bootstrap、font-awesome**，不想引入avalon，bootstrap，font-awesome也是可以的，不过**jq必须得有**，其他的没有的话，需要修改一下代码，核心的方法不需要修改。

引入结构层和表现层：**MDEditor.html** 
和
 **MDEditor.css**

然后需要配置编译器和代码美化的地址，这个上面说过了。

使用avalon的AMD加载器加载：
```javascript
require(['MDEditor'], function () {
     MDEditor.ready()
})
 ```
加载成功之后执行MDEditor.ready()这个方法，编辑器就加载好了。

（完



### The MIT License (MIT) ###
---

Copyright (c) 2015 mooshroom

See LICENSE for more info.