基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用、开源免费。
wangEditor是用javascript编写的 轻量级web富文本编辑器 ，依赖于jQuery和fontAwesome字体库， 支持所有浏览器 。使用 wangEditor 可以轻松创建web富文本框，并可以自定义扩展菜单功能。wangEditor所有源码都已经在github上开源下载。
一个简单实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>wangEditor demo</title>
</head>
<body>
<div id="editor">
<p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
</div>
<!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
<script type="text/javascript" src="/wangEditor.min.js"></script>
<script type="text/javascript">
var E = window.wangEditor
var editor = new E('#editor')
// 或者 var editor = new E( document.getElementById('editor') )
editor.create()
</script>
</body>
</html>自定义菜单配置项
// 自定义菜单配置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 是服务器端返回的结果
// var url = 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:'....'} 这种格式，即可这样插入图片：
var url = result.data[0];
insertImg(url); // result 必须是一个 JSON 格式字符串！！！否则报错
}
}
