简介 特点 MintMarkdown是一款轻巧的富文本编辑器。工具栏和编辑区域可分开，方便与多种布局融合。采用marked将markdown语法转换成html。预览效果采用highlight代
简介
特点
MintMarkdown是一款轻巧的富文本编辑器。工具栏和编辑区域可分开，方便与多种布局融合。采用marked将markdown语法转换成html。预览效果采用highlight代码块语法高亮。
MintMarkdown非常简单，开发者友好，易于扩展
网站：http://mint-ui.wemakers.net/
下载：http://git.oschina.net/895925636/mint-ui
为什么要开发这个插件
原因主要是因为作者在用其他编辑器编写博客时，每插入一张图片就要上传一次，而且图片不小心被删除了就找不回来了，得重新上传。所以我希望能有个能管理当前博客所有图片的编辑器，我可以在博客中随时插入和删除图片，但是我找了很久都没找着。所以就自己开发了一个。
用法
引入依赖
<script src="../lib/jquery-1.8.3.min.js"></script><script src="../MintDialog/MintDialog.min.js"></script><script src="MintMarkdown.js"></script>编写html
<div class="toolbar"></div><div class="editor">my markdown</div>创建编辑器
var tools = ["undo", "redo", "|", "insertImg", "preview", "leftRight", "rightLeft"];var buttonSetting = { insertImg : { uploadUrl : "docadmin/imgs", //上传文件的url loadUrl : "docadmin/imgs", //获取图片的url deleteUrl : "docadmin/imgs/delete", /* * 根据loadUrl获取到数据后交给此函数处理，请返回文件的路径和文件名对象数组 * 如：[{ * name : "img.jpg", * src : "http://localhost/imgs/img.jpg" * }] */ imgDataFilter : function(data){ var d = []; $.each(data.data, function(i, t){ d.push({ name : t.name, src : "static/doc/"+t.fileName, id : t.id }); }); return d; } } };var previewOn = true;var editor = new MintMarkdown(".toolbar", ".editor", tools, buttonSetting, previewOn);var html = editor.html();var text = editor.text();editor.text("新内容");初始化参数
toolsbarSelector
选择器字符串，必选，指定工具栏所在的位置
editorbodySelector
选择器字符串，必选，指定编辑区域所在的位置
tools
非必选，定制工具栏按钮，目前的按钮包括
| 按钮名 | 功能 |
|---|---|
| undo | 向后撤销一步 |
| redo | 重做 |
| insertImg | 插入图片。上传图片功能是用html5 api实现的，所有该按钮要在支持html5的浏览器上使用 |
| preview | 开启预览模式 |
| leftRight | 预览模式下，左右布局，markdown编辑区在左，预览区在右 |
| rightLeft | 预览模式下，右左布局，预览区在左，markdown编辑区在右 |
buttonSetting
对个别按钮的额外设置，参数的结构为
{ "buttonName" : {...}}目前只有insertImg按钮需要额外设置，内容如下
| 设置项 | 类型 | 描述 |
|---|---|---|
| uploadUrl | string | 上传文件的url |
| loadUrl | string | 获取已有图片url |
| deleteUrl | string | 删除图片的url |
| imgDataFilter(loadImgdata) | function | 回调函数。根据loadUrl获取到数据后交给此回调函数处理，请返回包含文件的路径和文件名对象数组如：[{name : "img.jpg",src : "http://localhost/imgs/img.jpg"}] |
previewOn
编辑器初始化时是否开启预览模式，boolean类型，默认为true
api
本插件只有两个接口。
| 接口名 | 参数 | 描述 |
|---|---|---|
| text([text]) | string，参数可选 | 当有参数时，表示设置编辑器的新内容，当没有参数时表示获取编辑器的编辑结果 |
| getCatalogue() | 获取当前编辑结果的目录，只获取所有的“h”标签，每个标签都有一个“for”属性，该属性的值就是文章中标题的“id”属性值。 |
