富文本的使用(WangEditor)
传统创建：
//js
var E=window.wangEditor;
var editor=new E('#editor');
editor.create()分离创建：
我是中间空的
//js
var E2=window.wangEditor;
var ed=new E2('#ed1','#ed3');
ed.create();
ed.$textElem.attr('contenteditable', true); //开启与关闭文本框的编辑使用
初始化文字：
ed.txt.html('我是JS添加的文字
') //使用js初始化添加文字
ed.txt.append('我是js追加的文字
') //使用js追加的文字
ed.txt.clear(); //可以让文本框中内容清空读取内容：
alert(ed4.txt.html()) //获取的是文本框中带有标签的内容
alert(ed4.txt.html()) //获取其中纯文本使用textarea,在文本框中输入，会同步到textarea中：
var E5=window.wangEditor;
var text=$('textarea');
var ed5=new E5('#ed5');
ed5.customConfig.οnchange=function (html) {
text.val(html)
};
ed5.create();
text.val(ed5.txt.html())自定义菜单项：
ed.customConfig.menus=[ //使用哪个写哪个就行
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'link', // 插入链接
'list', // 列表
'justify', // 对齐方式
'quote', // 引用
'emoticon', // 表情
'image', // 插入图片
'table', // 表格
'video', // 插入视频
'code', // 插入代码
'undo', // 撤销
'redo' // 重复
]定义debug模式：
var E2=window.wangEditor;
var ed2=new E2('#ed2');
// 实际开发中不建议直接定义为true或者false，可通过 url 参数进行干预：
// 通过 url 参数配置 debug 模式。url 中带有 wangeditor_debug_mode=1 才会开启 debug 模式
ed2.customConfig.debug = location.href.indexOf('wangeditor_debug_mode=1') > 0
ed2.create()配置onchange函数：
var E3=window.wangEditor;
var ed3=new E3('#ed3');
ed3.customConfig.οnchange=function (html) {
console.log(html); //当文本框中的内容发生改变时，才会触发
}
// 自定义 onchange 触发的延迟时间，默认为 200 ms
// ed3.customConfig.onchangeTimeout = 1000 // 单位 ms
// ed3.create();
$('button').on('click',function () {
ed3.txt.append('111
') //注意在js中添加的内容不会触发此函数行为，需要手动使用 ed3.change()
ed3.change && ed3.change()
})配置编辑区的z-index 默认10000 注意次修改将同时修改菜单栏和文本框
ed4.customConfig.zIndex=100;自定义菜单项中的语言
ed5.customConfig.lang = {
'设置标题': 'title',
'正文': 'p',
'链接文字': 'link text',
'链接': 'link',
'上传图片': 'upload image',
'上传': 'upload',
'创建': 'init'
// 还可自定添加更多
}
// 以上代码中的链接文字要写在链接前面，
// 上传图片要写在上传前面，因为前者包含后者。
// 如果不这样做，可能会出现替换不全的问题，切记切记！粘贴文本
// 关闭粘贴样式的过滤
ed6.customConfig.pasteFilterStyle = false;
// 忽略粘贴内容中的图片
ed6.customConfig.pasteIgnoreImg = true;
// // 自定义处理粘贴的文本内容
ed6.customConfig.pasteTextHandle = function (content) {
// content 即粘贴过来的内容（html 或 纯文本），可进行自定义处理然后返回
return content + '在粘贴内容后面追加一行
'
}插入网络图片的回调：
ed1.customConfig.linkImgCallback = function (url) { //可以在css中定义图片的大小
console.log(url) // url 即插入图片的地址
}插入链接的效验：
ed2.customConfig.linkCheck = function (text, link) {
console.log(text) // 插入的文字
console.log(link) // 插入的链接
return true // 返回 true 表示校验成功
// return '验证失败' // 返回字符串，即校验失败的提示信息
}插入网络图片的效验：
ed3.customConfig.linkImgCheck = function (src) {
console.log(src) // 图片的链接
return true // 返回 true 表示校验成功
// return '验证失败' // 返回字符串，即校验失败的提示信息
}配置onfocus函数：
ed4.customConfig.οnfοcus=function () { //文本框获焦执行此函数
console.log('获焦触发的函数1');
}
ed4.customConfig.οnblur=function () { //文本框失焦执行此函数
console.log('失焦触发的函数2');
}配置字体与背景色：
ed5.customConfig.colors=[
'#000000',
'#ff0000',
'#00ff00',
'#0000ff',
]配置字体：
ed6.customConfig.fontNames = [
'宋体',
'微软雅黑',
'Arial',
'Tahoma',
'Verdana'
]配置表情：
ed7.customConfig.emotions=[{
title:'默认',
type:'image',
content:[{
src : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/7a/shenshou_thumb.gif",
alt : "[草泥马]"
},
{
src : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/60/horse2_thumb.gif",
alt : "[神马]"
}
]
},
{
title:'emoji',
type:'emoji',
content:['☸','✈','〠','♚','☎']
}
]配置表情 从json文件中取
var box=[];
for(var i=0;i上传图片：
// 下面两个配置，使用其中一个即可显示“上传图片”的tab。但是两者不要同时使用！！！
ed8.customConfig.uploadImgShowBase64=true; //使用 base64 保存图片
ed8.customConfig.uploadImgServer='/upload'（url）; //上传到服务器
ed8.customConfig.uploadImgMaxSize = 3 * 1024 * 1024 // 将图片大小限制为 3M
ed8.customConfig.uploadImgMaxLength = 5 //默认为 10000 张（即不限制），需要限制可自己配置
ed8.customConfig.uploadFileName = 'yourFileName' //自定义 fileName显示与隐藏网络图片上传：
ed9.customConfig.showLinkImg=false; //隐藏网络图片项
ed9.customConfig.uploadImgServer='/upload'; //上传到服务器