markdown编辑器——MintMarkdown

为什么80%的码农都做不了架构师？>>>   

简介

特点

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”属性值。

转载于:https://my.oschina.net/cnlw/blog/390206