开源软件名称：

开源软件地址：

开源软件介绍：

MDEditor--markdown编辑器

直接上网址碳素云-markdown编辑器

功能介绍

MDEditor是一款前端实现markdown编辑器的模块，目前功能包含：

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

依赖

实现编辑器的全部部分并非我一人之手，使用了很多成熟的框架，编辑器的编译部分也是使用大神写的markdown编译器，我只是做了一个外壳而已，以下是本编辑器所依赖的框架：

1. jquery-1.10.2 以上就可以了
2. avalon 前端框架
3. bootstrap3 前端UI框架
4. font-awesome 字体图标库

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

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

除此之外，实现编译和代码美化的部分也用了别人的代码：

1. marked markdown编译器
2. prettify 代码美化插件

小生感激不尽！

文件结构

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

attention.js 是罗丹的提示插件，新版本名字已经修改了，我用的是老版本的，所以还是用的这个名字。

markdown.js 是markdown的编译器，prettify.js是代码美化插件。

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

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

###2. src这个文件夹里面放置了静态资源，包括各种框架等等的，其中比较总要的是MDEditor.css这个文件，这个文件就是编辑器的样式表，加入了之后就能看到正确的样子了###3. config.js这个文件用于配置项目相关的配置项，例如API的接口，全局方法等，比较重要的是，要将依赖的地址在这里明确写出来，像这样：

require.config({    paths: {        MDEditor:"../../plugins/MDEditor",        marked:"../../plugins/markdown",        prettify:"../../plugins/prettify"    }});

基本地址是从avalon.js所在的地址开始，具体的细节可以看avalon关于加载器的详细介绍。如果你的目录结构和我的不一样，只需要在这里配置好各个依赖的地址，使用就没问题了。###4. include.js这个文件里面是一个avalon的VM，作用是用来控制各个模块在index.html上面的各种引入。我在这里引入了MDEditor.html。###5. index.html启动文件，不用多说，一看就明白。###6. router.jsavalon的路由系统的文件，具体怎么弄的可以看这里。我在这里监听了首页的路由，然后动态加载了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加载器加载：

require(['MDEditor'], function () {     MDEditor.ready()})

加载成功之后执行MDEditor.ready()这个方法，编辑器就加载好了。

（完

The MIT License (MIT)

Copyright (c) 2015 mooshroom

See LICENSE for more info.