富文本编辑器——MintEditor

简介

特点

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

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

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

富文本编辑器——MintEditor

为什么要开发这个插件

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

用法

引入依赖文件

编辑器的对话框用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”属性值。

你可能感兴趣的:(富文本编辑器——MintEditor)