java feditor,iceEditor

API

编辑器主函数

API类型说明

new ice.editor(id)id构建一个编辑器实例，需要给它传入一个id

create()创建或格式化编辑器，当配置完编辑器或者自定义一些参数之后可使用它来创建

getHTML()获取编辑器内的内容(html格式)

getText()获取编辑器内的文字内容(text内容，不包括html标签)

setValue(str)String设置编辑器内的内容

addValue(str)String追加内容，将内容追加到编辑器内容的尾部

getSelectText()获取选中的内容

getSelectHTML()获取选中的HTML

setText(str)String插入文字内容

setHTML(Node,Boolean)Node,Boolean将选中的内容添加样式，或在光标处插入新内容(Boolean需要为true)

Node为新节点，可给该节点附加一些样式或者属性，被选中的内容会被新节点包裹起来，boolean默认为false

编辑器配置项

API类型默认说明

widthString100%初始化编辑器的宽，要加上单位px

heightString400px初始化编辑器的高，要加上单位px

codeBooleanfalse编辑器的html源码模式是否打开

maxWindowBooleantrue设置编辑器的最大化和最小化

menuArray['backColor','fontSize','foreColor','bold','italic','underline','strikeThrough','line','justifyLeft','justifyCenter','justifyRight','indent','outdent','line','insertOrderedList','insertUnorderedList','line','superscript','subscript','createLink','unlink','line','insertHorizontalRule','table','files','music','video','insertImage','removeFormat','line','code']编辑器菜单配置，可自由调换菜单顺序与显示

backColorArray['#ffffff','#000000','#eeece1','#1f497d','#4f81bd','#c0504d','#9bbb59','#8064a2','#4bacc6','#f79646',

'#f2f2f2','#979797','#ddd9c3','#c6d9f0','#dbe5f1','#f2dcdb','#ebf1dd','#e5e0ec','#dbeef3','#fdeada',

'#d8d8d8','#595959','#c4bd97','#8db3e2','#b8cce4','#e5b9b7','#d7e3bc','#ccc1d9','#b7dde8','#fbd5b5',

'#bfbfbf','#3f3f3f','#938953','#548dd4','#95b3d7','#d99694','#c3d69b','#b2a2c7','#92cddc','#fac08f',

'#a5a5a5','#262626','#494429','#17365d','#366092','#953734','#76923c','#5f497a','#31859b','#e36c09',

'#7f7f7f','#0c0c0c','#1d1b10','#0f243e','#244061','#632423','#4f6128','#3f3151','#205867','#974806',

'#c00000','#ff0000','#ffc000','#ffff00','#92d050','#00b050','#00b0f0','#0070c0','#002060','#7030a0'];设置文字的背景颜色配置

foreColorArray同backColor颜色配置设置文字的颜色

创建编辑器

欢迎使用iceEditor富文本编辑器

new ice.editor("editor");

创建编辑器时，只需引入一个js文件即可，无序引入JQ、CSS等文件，整个编辑器只有一个js，编辑器的容器推荐使用div，当然也可以使用textarea标签，如下：

欢迎使用iceEditor富文本编辑器

不管哪种方式创建，一定要给容器指定一个唯一的id，然后实例化它new ice.editor('editor')就OK了……

欢迎使用iceEditor富文本编辑器

欢迎使用iceEditor富文本编辑器

new ice.editor("editor1");

new ice.editor("editor2");

iceEditor支持一个页面上无限创建多个编辑器，只要指定一个唯一的id，实例化它即可，创建方法与上面的相同！就是这么简单！

menu-菜单配置说明

//第一步：创建实例化对象

var e = new ice.editor('content');

//第二步：配置图片或附件上传提交表单的路径

//如果你的项目使用的php开发，可直接使用upload.php文件

//其它的编程语言需要你单独处理，后期我会放出.net java等语言代码

//具体与你平常处理multipart/form-data类型的表单一样

//唯一需要注意的就是：处理表单成功后要返回json格式字符串，不能包含其它多余的信息：

//url：文件的地址

//name：文件的名称(包含后缀)

//error：上传成功为0，其它为错误信息，将以弹窗形式提醒用户

//例如批量上传了两张图片：

//[

// {url:'/upload/img/153444.jpg', name:'153444.jpg', error:0},

// {url:'/upload/img/153445.jpg', name:'153445.jpg', error:'禁止该文件类型上传'}

//]

e.menu = [

'backColor', //字体背景颜色

'fontSize', //字体大小

'foreColor', //字体颜色

'bold', //粗体

'italic', //斜体

'underline', //下划线

'strikeThrough', //删除线

'justifyLeft', //左对齐

'justifyCenter', //居中对齐

'justifyRight', //右对齐

'indent', //增加缩进

'outdent', //减少缩进

'insertOrderedList', //有序列表

'insertUnorderedList', //无序列表

'superscript', //上标

'subscript', //下标

'createLink', //创建连接

'unlink', //取消连接

'hr', //水平线

'table', //表格

'files', //附件

'music', //音乐

'video', //视频

'insertImage', //图片

'removeFormat', //格式化样式

'code', //源码

'line' //菜单分割线

];

//第三步：创建

e.create();

编辑器的菜单配置为数组类型，菜单的功能说明请看上面列表，菜单的顺序可以随意调整，可以选择添加和移除，提示：'line'并不是编辑器的菜单，而是菜单中的分割线，用来分类使用！

设置编辑器尺寸

var e = new ice.editor('content');

e.width='700px'; //宽度

e.height='300px'; //高度

e.create();

编辑器的宽默认为100%，高为400px，设置其他尺寸时，一定要加上单位‘px’哦！

禁用编辑器

var e = new ice.editor('content');

e.disabled=true;

e.create();

获取内容

var e = new ice.editor('content');

console.log(e.getHTML()); //获取HTML格式内容

console.log(e.getText()); //获取Text格式内容

设置内容

var e = new ice.editor('content');

e.setValue('hello world！');

设置编辑器内的内容，一般文章编辑功能会用到这个函数，利用ajax给它异步传值非常方便！

追加内容

var e = new ice.editor('content');

e.addValue('hello world！');

追加内容，将内容追加到编辑器内容的尾部！

颜色配置

var e = new ice.editor('content');

//文字背景颜色

e.backColor = [

'#ffffff','#000000','#eeece1','#1f497d','#4f81bd','#c0504d','#9bbb59','#8064a2','#4bacc6','#f79646',

'#f2f2f2','#979797','#ddd9c3','#c6d9f0','#dbe5f1','#f2dcdb','#ebf1dd','#e5e0ec','#dbeef3','#fdeada',

'#d8d8d8','#595959','#c4bd97','#8db3e2','#b8cce4','#e5b9b7','#d7e3bc','#ccc1d9','#b7dde8','#fbd5b5',

'#bfbfbf','#3f3f3f','#938953','#548dd4','#95b3d7','#d99694','#c3d69b','#b2a2c7','#92cddc','#fac08f',

'#a5a5a5','#262626','#494429','#17365d','#366092','#953734','#76923c','#5f497a','#31859b','#e36c09',

'#7f7f7f','#0c0c0c','#1d1b10','#0f243e','#244061','#632423','#4f6128','#3f3151','#205867','#974806',

'#c00000','#ff0000','#ffc000','#ffff00','#92d050','#00b050','#00b0f0','#0070c0','#002060','#7030a0'

];

//文字颜色

e.foreColor = e.backColor;

e.create();

编辑器的文字与背景颜色配置均为数组类型，颜色值是HEX格式，该色系选用了百度编辑器(UEditor)内的色系，在文本编辑器上完全够用了，一般不需要给它重新配置颜色。

附件和图片上传

//第一步：创建实例化对象

var e = new ice.editor('content');

//第二步：配置图片或附件上传提交表单的路径

e.uploadUrl="/iceEditor/src/upload.php";

//如果你的项目使用的php开发，可直接使用官方自带的upload.php文件

//其它的编程语言需要你单独处理，后期我会放出.net java等语言代码

//具体与你平常处理multipart/form-data类型的表单一样

//唯一需要注意的就是：处理表单成功后要返回json格式字符串，不能包含其它多余的信息：

//url：文件的地址

//name：文件的名称(包含后缀)

//error：上传成功为0，其它为错误信息，将以弹窗形式提醒用户

//例如批量上传了两张图片：

//[

// {url:'/upload/img/153444.jpg', name:'153444.jpg', error:0},

// {url:'/upload/img/153445.jpg', name:'153445.jpg', error:'禁止该文件类型上传'}

//]

/*********************** 上传项配置区 开始 ***********************/

// 绝对路径

define('URL',str_ireplace(str_replace("/","\\",$_SERVER['PHP_SELF']),'',__FILE__));

//上传目录

$dir = isset($_SESSION['upload_path'])?$_SESSION['upload_path']:'/upload/files/'.date("Ymd").'/';

//上传控件名称

$field = 'file';

//支持上传的文件格式

$type = ['jpg','jpeg','png','gif','bmp','exe','flv','swf','mkv','avi','rm','rmvb','mpeg','mpg','ogg','ogv','mov',

'wmv','mp4','webm','mp3','wav','mid','rar','zip','tar','gz','7z','bz2','cab','iso','chm','doc','docx',

'xls','xlsx','ppt','pptx','pdf','txt','md','xml','torrent'];

//上传文件存储大小的限制-默认30M

$maxSize = 30 * 102400;

//上传文件的名称命名方式，默认以'time'方式命名

//time 将以时间戳+数字排序

//fileName 将以文件原来的名称命名，如果该文件含有中文，则自动改为time形式命名

//填写其它字符串(禁止填写中文)，将以该字符串形式命名，如果为批量上传，则将该字符串后面添加数字排序防止重名

$rename = 'time';

/*********************** 上传项配置区 结束 ***********************/

//第二步：配置图片或附件上传提交表单的路径

//如果你的项目使用的php开发，可直接使用upload.php文件

//其它的编程语言需要你单独处理，后期我会放出.net java等语言代码

//具体与你平常处理multipart/form-data类型的表单一样

//唯一需要注意的就是：处理表单成功后要返回json格式字符串，不能包含其它多余的信息：

//url：文件的地址

//name：文件的名称(包含后缀)

//error：上传成功为0，其它为错误信息，将以弹窗形式提醒用户

//例如批量上传了两张图片：

//[

// {url:/upload/img/153444.jpg, name:153444.jpg, error:0},

// {url:/upload/img/153445.jpg, name:153445.jpg, error:'禁止该文件类型上传'}

//]

上传图片或者附件请配置upload.php文件，配置项已在该文件中详细说明，做为上传已经够用了，需要其他功能，例如图片缩略图和图片水印功能，请另加。iceEditor目前只配置了PHP语言的上传文件，其他语言后续再加，计划会有JAVA、.NET两门语言的上传，哪位大牛如果有比较好的上传类库可以传我一份，我的QQ：308018629(其实网上有很多的文件上传类库)。

截图粘贴

//截图粘贴功能默认为开启状态，如需关闭，请将screenshot设为false

var e = new ice.editor('content');

e.screenshot=false;

//截图粘贴功能默认为上传到服务期，如需关闭，请将screenshotUpload设为false

//禁用后，将默认以base64格式显示图片

var e = new ice.editor('content');

e.screenshotUpload=false;

插件开发

var e = new ice.editor('content');

e.addValue('hello world！');

//┌────────────────────────────────────────────────────────────────────────

//│ e.plugin(options)传参说明

//│────────────────────────────────────────────────────────────────────────

//│ options {json}

//│ ├ name {string} [必填]菜单唯一的name，可配置menu项显示与顺序

//│ ├ menu {string} [必填]展示在菜单栏上的按钮，可为图标或者文字

//│ ├ data {string} execCommand的命令

//│ ├ id {string} 菜单按钮上的id

//│ ├ css {string} 菜单按钮上的class

//│ ├ style {string} 该插件的style，以css文件中的样式形式书写

//│ ├ dropdown {string} 下拉菜单里的html，如果定义了popup，则该参数失效

//│ ├ popup {json} 弹窗json

//│ │ ├ width {int} 弹窗的宽度

//│ │ ├ height {int} 弹窗的高度

//│ │ ├ title {string} 弹窗上的标题

//│ │ └ content {string} 弹窗的内容，可为html

//│ ├ click {function} 按钮点击事件

//│ └ success {function} 插件安装成功后会自动执行该方法

//└────────────────────────────────────────────────────────────────────────

//function方式

e.plugin({

menu:'function方式',

name:'click',

click:function(e,z){

z.setText('hello world');

}

});

//execCommand命令

e.plugin({

menu:'删除命令',

name:'del',

data:'delete'

});

//下拉菜单类型

e.plugin({

menu:'下拉菜单',

name:'dropdown',

dropdown:'

复制选中的文字',

});

//弹出层类型

e.plugin({

menu:'弹窗演示',

name:'popup',

style:'.demo-p{margin-bottom:10px}.demo-button{padding:0 10px}',

popup:{

width:230,

height:120,

title:'我是一个demo',

content:'

在光标处插入hello world! 确定',

},

success:function(e,z){

//获取content中的按钮

var btn = e.getElementsByTagName('button')[0];

//设置点击事件

btn.οnclick=function(){

z.setText('hello world');

//关闭本弹窗

e.close()

}

}

});

e.create();

目前提供这四种形式的菜单类开发，后期将增加一些其它的，敬请期待！

预防XSS攻击

为了预防 xss 攻击，可使用一些xss类的过滤模块，推荐使用xss.js，因为它支持白名单过滤配置，并且可以通过自定义处理函数，对任意标签及其属性进行处理，使用很简单:

你需要这个XSS过滤模块，请到官方下载：http://jsxss.com/zh/index.html

在线演示：http://jsxss.com/zh/try.html

下面是使用案例

var e = new ice.editor("content");

var html = filterXSS(e.getHTML);

console.log(html); //过滤后的安全数据