富文本编辑器——MintEditor

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

简介

特点

MintEditor是一款轻巧的富文本编辑器。工具栏和编辑区域可分开，方便与多种布局融合。开发者友好，易于扩展

网站：http://mint-ui.wemakers.net/

下载：http://git.oschina.net/895925636/mint-ui

为什么要开发这个插件

原因主要是因为作者在用其他编辑器编写博客时，每插入一张图片就要上传一次，而且图片不小心被删除了就找不回来了，得重新上传。所以我希望能有个能管理当前博客所有图片的编辑器，我可以在博客中随时插入和删除图片，但是我找了很久都没找着。偶然间，发现开发个简单的编辑器也并不难，所以就自己开发了一个。

用法

引入依赖文件

编辑器的对话框用MintDialog实现。

<script src="../lib/jquery-1.8.3.min.js"></script>
/*弹窗功能用MintDialog实现*/
<script src="../MintDialog/MintDialog.min.js"></script>
<script src="MintEditor.js"></script>

编写html

<div id="toolbar"></div>
<div id="editorBody"></div>

创建编辑器

var tools = [
        "undo", "redo", "removeFormat", "|", 
        "bold", "italic", "underline", "strikeThrough", "|",
        "justifyLeft", "justifyCenter", "justifyRight", "justifyFull", "|", 
        "indent", "outdent", "|",
        "insertUnorderedList", "insertOrderedList", "quote", "cancelQuote", "lang", "superscript", "subscript", "createLink", "unlink", "|", 
        "head", "fontSize", "fontName", "foreColor", "|",
        "insertImg"
    ];

var buttonSetting= {
        insertImg : {
            uploadUrl : "docadmin/imgs", //上传文件的url
            loadUrl : "docadmin/imgs",    //获取图片的url
            deleteUrl : "docadmin/imgs/delete",//删除图片的url

            /*根据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 editor = new MintEditor("#toolbar", "#editorBody", tools, buttonSetting);
/*设置初始编辑内容*/
editor.html("初始内容");

/*获取编辑结果*/
var html = editor.html();

/*获取编辑结果的目录*/
var catalogue = editor.getCatalogue();

获取到的目录大概样子如下：

<h2 for="h8830">jdk安装</h2>
<h3 for="h33621">配置</h3>
<h3 for="h92951">设置默认启动（可选）</h3>
<h2 for="h5672">安装mysql</h2>
<h3 for="h96579">安装</h3>
<h2 for="h76835">tomcat配置</h2>
<h3 for="h1097">修改启动参数</h3>
<h3 for="h1299">配置server.xml</h3>
<h3 for="h2530">配置ssl证书</h3>
<h3 for="h39480">配置共享项目的共享jar包路径</h3>

初始化参数

MintEditor有四个初始化参数

toolbarSelector

选择器字符串，必选，指定工具栏所在的位置

editorbodySelector

选择器字符串，必选，指定编辑区域所在的位置

tools

非必选，定制工具栏按钮，目前的按钮包括

按钮名	操作
undo	撤销一步
redo	重做一步
removeFormat	清除格式
bold	粗体
italic	斜体
underline	下划线
strikeThrough	删除线
justifyLeft	左对齐
justifyCenter	居中
justifyRight	右对齐
justifyFull	分散对齐
indent	增加缩进
outdent	减少缩进
insertUnorderedList	无序列表
insertOrderedList	有序列表
quote	引用
cancelQuote	取消引用
lang	插入代码
superscript	上标
subscript	下标
createLink	添加链接
unlink	取消链接
head	标题和段落
fontSize	字号
fontName	字体
foreColor	字体颜色
insertImg	插入图片。上传图片功能是用html5 api实现的，所有该按钮要在支持html5的浏览器上使用
竖线	分隔符，用于按钮的分组

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"}]

api

本插件只有两个接口。

接口名	参数	描述
html([html])	string或者dom，参数可选	当有参数时，表示设置编辑器的新内容，当没有参数时表示获取编辑器的编辑结果
getCatalogue()		获取当前编辑结果的目录，只获取所有的“h”标签，每个标签都有一个“for”属性，该属性的值就是文章中标题的“id”属性值。

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