文档章节

富文本编辑器——MintEditor

水牛叔叔
 水牛叔叔
发布于 2015/03/23 06:35
字数 1037
阅读 120
收藏 1

简介

特点

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

© 著作权归作者所有

水牛叔叔

水牛叔叔

粉丝 143
博文 80
码字总数 36149
作品 2
珠海
程序员
私信 提问
轻量化web富文本框 - wangEditor

wangEditor——基于javascript和css开发的 Web富文本编辑器, 轻量、简洁、易用、开源免费。

wangfupeng1988
2014/11/11
15.3K
5
Eleditor —— 移动端跨平台富文本编辑器

由于移动设备的交互方式,传统的 PC 富文本编辑器在移动手机、平板上面无法达到良好的操作体验,Eleditor(element editor)顾名思义,旨在对 html 元素进行操作编辑,实现了唯一开源的真正所...

王练
2017/06/05
84
0
CSDN博客富文本编辑器正式上线公告

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/blogdevteam/article/details/81067669 CSDN博客富文本编辑器新版已经正式上线了,在此也特别感谢在之前的内测...

CSDN官方博客
2018/07/16
0
0
DevExpress v15.1:ASP.NET MVC功能升级(一)

<下载最新版DevExpress ASP.NET Controls v15.1.5> MVC富文本编辑器扩展 Word® Inspired富文本编辑器 v15.1包含了我们最新的MVC扩展——MVC的DevExpress Rich Text Editor。它与WebForms配对...

Miss_Hello_World
2015/08/14
337
0
百度富文本编辑器集成——代码备份

百度富文本编辑器集成 ——mini版本,之前使用完整版本的,需要上传图片需要依赖flash插件,本次直接集成mini版本 这里下载的版本是:UMeditor 版本是:[1.2.3 Jsp 版本-UTF-8版本] 插件umedi...

rzg813
2017/06/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Android 图片加载带进度条的ImageView

https://blog.csdn.net/shu_quan/article/details/79975578

shzwork
14分钟前
5
0
关于XAMPP默认端口80 和443被占用的问题

本文转载于:专业的前端网站➩关于XAMPP默认端口80 和443被占用的问题 关于安装xampp-win32-1.8.1-VC9-installer.zip后启动时候报端口80和443被占用的问题解决 xampp-win32-1.8.1-VC9-instal...

前端老手
16分钟前
4
0
错误Setting the parent of a transform which resides in a Prefab Asset is...

错误日志 Setting the parent of a transform which resides in a Prefab Asset is disabled to prevent data corruption 原因1 用Resouce.Load加载一个prefab,没有实例化直接设置parent ......

XBlock
17分钟前
5
0
Spring boot 配置mybatis

当然任何模式都需要首先引入mybatis-spring-boot-starter的pom文件,现在最新版本是1.1.1(刚好快到双11了 :)) <dependency>    <groupId>org.mybatis.spring.boot</groupId>    <......

雷开你的门
18分钟前
5
0
云栖干货回顾 | 更强大的实时数仓构建能力!分析型数据库PostgreSQL 6.0新特性解读

阿里云 AnalyticDB for PostgreSQL 为采用MPP架构的分布式集群数据库,完备支持SQL 2003,部分兼容Oracle语法,支持PL/SQL存储过程,触发器,支持标准数据库事务ACID。AnalyticDB PG通过行存...

开源中国小二
30分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部