基于javascript和css开发的 Web富文本编辑器, 轻量、简洁、易用、开源免费。
wangEditor是用javascript编写的轻量级web富文本编辑器,依赖于jQuery和fontAwesome字体库,支持所有浏览器。使用wangEditor可以轻松创建web富文本框,并可以自定义扩展菜单功能。wangEditor所有源码都已经在github上开源下载。
一个简单实例html>
wangEditordemo
欢迎使用wangEditor富文本编辑器
varE=window.wangEditor
vareditor=newE('#editor')
//或者vareditor=newE(document.getElementById('editor'))
editor.create()
自定义菜单配置项//自定义菜单配置editor.customConfig.menus=['head',//标题
'bold',//粗体
'fontSize',//字号
'fontName',//字体
'italic',//斜体
'underline',//下划线
'strikeThrough',//删除线
'foreColor',//文字颜色
'backColor',//背景颜色
'link',//插入链接
'list',//列表
'justify',//对齐方式
'quote',//引用
'emoticon',//表情
'image',//插入图片
'table',//表格
'video',//插入视频
'code',//插入代码
'undo',//撤销
'redo'//重复];
图片上传配置项editor.customConfig.uploadImgServer='/admin.php/Upload/wang_editor';//上传图片到服务器//3Meditor.customConfig.uploadImgMaxSize=3*1024*1024;//限制一次最多上传5张图片editor.customConfig.uploadImgMaxLength=1;//自定义文件名editor.customConfig.uploadFileName='editor_img';//将timeout时间改为3seditor.customConfig.uploadImgTimeout=5000;
editor.customConfig.uploadImgHooks={before:function(xhr,editor,files){//图片上传之前触发
//xhr是XMLHttpRequst对象,editor是编辑器对象,files是选择的图片文件
//如果返回的结果是{prevent:true,msg:'xxxx'}则表示用户放弃上传
//return{
//prevent:true,
//msg:'放弃上传'
//}
//alert("前奏");
},success:function(xhr,editor,result){//图片上传并返回结果,图片插入成功之后触发
//xhr是XMLHttpRequst对象,editor是编辑器对象,result是服务器端返回的结果
//varurl=result.data.url;
//alert(JSON.stringify(url));
//editor.txt.append(url);
//alert("成功");
},fail:function(xhr,editor,result){//图片上传并返回结果,但图片插入错误时触发
//xhr是XMLHttpRequst对象,editor是编辑器对象,result是服务器端返回的结果
alert("失败");
},error:function(xhr,editor){//图片上传出错时触发
//xhr是XMLHttpRequst对象,editor是编辑器对象
//alert("错误");
},//如果服务器端返回的不是{errno:0,data:[...]}这种格式,可使用该配置
//(但是,服务器端返回的必须是一个JSON格式字符串!!!否则会报错)
customInsert:function(insertImg,result,editor){//图片上传并返回结果,自定义插入图片的事件(而不是编辑器自动插入图片!!!)
//insertImg是插入图片的函数,editor是编辑器对象,result是服务器端返回的结果
//举例:假如上传图片成功后,服务器端返回的是{url:'....'}这种格式,即可这样插入图片:
varurl=result.data[0];
insertImg(url);//result必须是一个JSON格式字符串!!!否则报错
}
}