使用文档
创建编辑器
欢迎使用iceEditor富文本编辑器
ice.editor("content");
创建编辑器时，只需引入一个js文件即可，无序引入JQ、CSS等文件，整个编辑器只有一个js，编辑器的容器推荐使用div，当然也可以使用textarea标签，如下：
不管哪种方式创建，一定要给容器指定一个唯一的id，然后实例化它ice.editor('content')就OK了……
欢迎使用iceEditor富文本编辑器
欢迎使用iceEditor富文本编辑器
iceEditor支持一个页面上无限创建多个编辑器，只要指定一个唯一的id，实例化它即可，创建方法与上面的相同！就是这么简单！
//第一步：创建实例化对象
ice.editor('content',function(e){
//第二步，自定义菜单，默认加载全部
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', //格式化样式
'paste', //富文本粘贴
'code', //源码
'line' //菜单分割线
];
//关闭最大化按钮：默认显示最大化按钮
e.maxWindow = false;
//第三步：创建
e.create();
});
编辑器的菜单配置为数组类型，菜单的功能说明请看上面列表，菜单的顺序可以随意调整，可以选择添加和移除，提示：'line'并不是编辑器的菜单，而是菜单中的分割线，用来分类使用！
设置编辑器尺寸
ice.editor('content',function(){
this.width='700px'; //宽度
this.height='300px'; //高度
this.create();
});
编辑器的宽默认为100%，高为400px，设置其他尺寸时，一定要加上单位‘px’哦！
禁用编辑器
ice.editor('content',function(){
this.disabled=true;
this.create();
});
获取内容
ice.editor('content',function(){
console.log(this.getValue()); //获取编辑器内容，html格式
console.log(this.getHTML()); //获取HTML格式内容，同getValue，别名而已
console.log(this.getText()); //获取Text格式内容，纯文本，无html标签
});
设置内容
ice.editor('content',function(){
this.setValue('hello world！');
});
设置编辑器内的内容，一般文章编辑功能会用到这个函数，利用ajax给它异步传值非常方便！
追加内容
ice.editor('content',function(){
this.addValue('hello world！');
});
追加内容，将内容追加到编辑器内容的尾部！
颜色配置
ice.editor('content',function(){
//文字背景颜色
this.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'
];
//文字颜色
this.foreColor = this.backColor;
this.create();
});
编辑器的文字与背景颜色配置均为数组类型，颜色值是HEX格式，这些颜色在文本编辑器上完全够用了，一般不需要给它重新配置颜色，当然你需要的话。
附件和图片上传
ice.editor('content',function(){
//配置图片或附件上传提交表单的路径
this.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:'禁止该文件类型上传'}
//]
});
上传图片或者附件请配置upload.php文件，配置项已在该文件中详细说明，做为上传已经够用了，需要其他功能，例如图片缩略图和图片水印功能，请另加。iceEditor目前内置了PHP语言的上传文件，下面有网友「The only」提供了ASP.NET语言上传，支持多图上传以及粘贴截图，其它编程语言，哪位大牛如果有比较好的上传类库可以传我一份，我的QQ：550396509
ASP.NET上传
/// <summary>
/// 上传文件
/// </summary>
/// <returns></returns>
[HttpPost]
//备份之前
public async Task<IActionResult> Upload()
{
var files = Request.Form.Files;
var uploadedList = new List<IceEditorUploadOutput>();
var size = files.Sum(f => f.Length);
//总大小超过100MB 禁止上传
if (size > 104857600)
{
uploadedList.Add(new IceEditorUploadOutput
{
error = $"上传的文件不能超过100MB",
url = "",
name = ""
});
return Ok(uploadedList);
}
var filePathResultList = new List<string>();
// 保存到网站根目录下的 uploads 目录
// 按年+月放置
var firstFolder = DateTime.Today.ToString("yyyy");
var secondFolder = DateTime.Today.ToString("MM");
var uploadPath = Path.Combine(App.HostEnvironment.ContentRootPath, "wwwroot", "upload");
if (!Directory.Exists(uploadPath)) Directory.CreateDirectory(uploadPath);
var firstPath = Path.Combine(uploadPath, firstFolder);
if (!Directory.Exists(firstPath)) Directory.CreateDirectory(firstPath);
var secondPath = Path.Combine(firstPath, secondFolder);
if (!Directory.Exists(secondPath)) Directory.CreateDirectory(secondPath);
foreach (var thisFile in files)
{
var fileName = ContentDispositionHeaderValue.Parse(thisFile.ContentDisposition).FileName.Trim('"');
//如果没有后缀名，则添加png
if (string.IsNullOrEmpty(Path.GetExtension(fileName)))
{
fileName += ".png";
}
string saveFileName = "";
if (thisFile.Length > 0)
{
// 避免文件名重复，采用 GUID 生成
saveFileName = Guid.NewGuid().ToString("N") + Path.GetExtension(fileName);
var filePath = Path.Combine(secondPath, saveFileName);
using (var stream = System.IO.File.Create(filePath))
{
await thisFile.CopyToAsync(stream);
}
}
uploadedList.Add(new IceEditorUploadOutput
{
url = $"/upload/{firstFolder}/{secondFolder}/{saveFileName}",
name = fileName,
error = 0
});
}
return Ok(uploadedList);
}
class IceEditorUploadOutput
{
public string url { get; set; }
public string name { get; set; }
public object error { get; set; }
}
截图粘贴
ice.editor('content',function(){
//截图粘贴功能默认为开启状态，如需关闭，请将screenshot设为false
this.screenshot=false;
});
ice.editor('content',function(){
//截图粘贴功能默认为上传到服务期，如需关闭，请将screenshotUpload设为false
//禁用后，将默认以base64格式显示图片
this.screenshotUpload=false;
});
插件开发
ice.editor('content',function(){
this.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方式
this.plugin({
menu: 'function方式',
name: 'click',
click: function (e, z) {
z.setText('hello world');
}
});
//execCommand命令
this.plugin({
menu: '删除命令',
name: 'del',
data: 'delete'
});
//下拉菜单类型
this.plugin({
menu: '下拉菜单',
name: 'dropdown',
dropdown: '复制选中的文字
',
});
//弹出层类型
this.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() } } }); this.create(); });目前提供这四种形式的菜单类开发，后期将增加一些其它的，敬请期待！
预防XSS攻击
为了预防 xss 攻击，可使用一些xss类的过滤模块，推荐使用xss.js，因为它支持白名单过滤配置，并且可以通过自定义处理函数，对任意标签及其属性进行处理，使用很简单:
你需要这个XSS过滤模块，请到官方下载：http://jsxss.com/zh/index.html
在线演示：http://jsxss.com/zh/try.html
下面是使用案例
你需要这个XSS过滤模块，请到官方下载：http://jsxss.com/zh/index.html
在线演示：http://jsxss.com/zh/try.html
下面是使用案例