iceEditor
简约的唯美设计,高贵、简洁、极速
iceEditor是一款简约风格的富文本编辑器,体型十分娇小,无任何依赖,整个编辑器只有一个
文件,功能却很不平凡!简约的唯美设计,简洁、极速、使用它的时候不需要引用jQuery、font
css……等文件,因为整个编辑器只是一个Js,支持上传图片、附件!支持添加音乐、视频!
iceEditor官方群:324415936
首页 实例 文档 更新日志 关于

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颜色配置设置文字的颜色<配置/td>
创建编辑器


欢迎使用iceEditor富文本编辑器
new ice.editor("editor");
创建编辑器时,只需引入一个js文件即可,无序引入JQ、CSS等文件,整个编辑器只有一个js,编辑器的容器推荐使用div,当然也可以使用textarea标签,如下:
不管哪种方式创建,一定要给容器指定一个唯一的id,然后实例化它new ice.editor('editor')就OK了……
欢迎使用iceEditor富文本编辑器
欢迎使用iceEditor富文本编辑器
<script type="text/javascript" src="/iceEditor.js"></script> <script type="text/javascript"> new ice.editor("editor1"); new ice.editor("editor2"); </script>
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.onclick=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
下面是使用案例
<script src="https://rawgit.com/leizongmin/js-xss/master/dist/xss.js"></script>
<script type="text/javascript">
 var e = new ice.editor("content");
 var html = filterXSS(e.getHTML);
 console.log(html); //过滤后的安全数据
</script>