wangeditor上传文件php,富文本编辑器(wangEditor)

近期在产品的开发工作中遇到要使用富文本编辑器的地方。于是对比了几款编辑器， 最后选择了wangEditor。

使用方式：

1. 创建一个容器：

2.引入js文件

3.初始化

// 富文本编辑器

var E = window.wangEditor;

var editor = new E("#editor")

editor.create()

4.上传图片

支持网络图片与本地上传

网络图片直接输入地址即可。

本地上传默认是关闭的。分为Base64与上传至服务器。

4.1 Base64格式

开启本地上传Base64

// 启用"上传图片"tab base64格式

editor.customConfig.uploadImgShowBase64 = true;

开启之后直接拖拽或手动选择上传即可。

Base64码

4.2 上传至服务器

配置上传接口,但是不能与Base64同时配置。

editor.customConfig.uploadImgServer = '/Storage/Upload'

注：所有的配置代码都需要放在   editor.create()   之前。

editor.customConfig.uploadImgHooks = {

before: function (xhr, editor, files) {

// 图片上传之前触发

// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件

// 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传

// return {

// prevent: true,

// msg: '放弃上传'

// }

},

success: function (xhr, editor, result) {

// 图片上传并返回结果，图片插入成功之后触发

// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果

},

fail: function (xhr, editor, result) {

console.log(result)

// 图片上传并返回结果，但图片插入错误时触发

// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果

},

error: function (xhr, editor) {

// 图片上传出错时触发

// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象

},

timeout: function (xhr, editor) {

// 图片上传超时时触发

// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象

},

// 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置

// (但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错)

customInsert: function (insertImg, result, editor) {

// 图片上传并返回结果，自定义插入图片的事件(而不是编辑器自动插入图片！！！)

// insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

// 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：

var url = result.Url

insertImg(url)

// result 必须是一个 JSON 格式字符串！！！否则报错

}

}

4.3 后端接口

只需将文件的最终存储路径按指定的格式/或自定义格式放回即可。

5.将编辑器内的数据传递给后台方法

我这里是先将编辑器内的数据赋值给 textarea ，然后使用ajax的方式提交textarea的数据。

5.1 创建textarea 并隐藏

5.2 在js中配置

// 隐藏的文本域

var $text1 = $('#text1')

// 监听编辑器内容的变化,html为变化后的数据

editor.customConfig.onchange = function (html) {

// 监控变化，同步更新到 textarea

$text1.val(html)

}

5.3 提交数据并在后台保存

添加一个按钮

保存

ajax提交

$("#btnSubmit2").click(function () {

// 文本域的内容

var text1 = $('#text1').val();

$.ajax({

type: "post",

data: {

"editorHtml": text1

},

url: "/Editor/Save",

success: function (data) {

console.log(data)

});

})

6.其他配置及功能请直接访问文档：