富文本++php+源码,轻量级富文本编辑器wangEditor

基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用、开源免费。

wangEditor是用javascript编写的 轻量级web富文本编辑器 ，依赖于jQuery和fontAwesome字体库， 支持所有浏览器 。使用 wangEditor 可以轻松创建web富文本框，并可以自定义扩展菜单功能。wangEditor所有源码都已经在github上开源下载。

一个简单实例html>

wangEditor demo

欢迎使用 wangEditor 富文本编辑器

var E = window.wangEditor

var editor = new E('#editor')

// 或者 var editor = new E( 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 是服务器端返回的结果

// 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 格式字符串！！！否则报错

}

}