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>
<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有四个初始化参数
选择器字符串,必选,指定工具栏所在的位置
选择器字符串,必选,指定编辑区域所在的位置
非必选,定制工具栏按钮,目前的按钮包括
按钮名 | 操作 |
---|---|
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的浏览器上使用 |
竖线 | 分隔符,用于按钮的分组 |
对个别按钮的额外设置,参数的结构为
{ "buttonName" : {...} }
目前只有insertImg按钮需要额外设置,内容如下
设置项 | 类型 | 描述 |
---|---|---|
uploadUrl | string | 上传文件的url |
loadUrl | string | 获取已有图片url |
deleteUrl | string | 删除图片的url |
imgDataFilter(loadImgdata) | function | 回调函数。根据loadUrl获取到数据后交给此回调函数处理,请返回包含文件的路径和文件名对象数组如:[{name : "img.jpg",src : "http://localhost/imgs/img.jpg"}] |
本插件只有两个接口。
接口名 | 参数 | 描述 |
---|---|---|
html([html]) | string或者dom,参数可选 | 当有参数时,表示设置编辑器的新内容,当没有参数时表示获取编辑器的编辑结果 |
getCatalogue() | 获取当前编辑结果的目录,只获取所有的“h”标签,每个标签都有一个“for”属性,该属性的值就是文章中标题的“id”属性值。 |