直接上代码吧
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>发布文章</title>
<script src="https://unpkg.com/wangeditor@3.1.1/release/wangEditor.min.js"></script>
</head>
<body>
<div id="div1"></div>
<button id="btn1">获取html</button>
<button id="btn2">获取text</button>
<div id="">
$content$
</div>
<script type="text/javascript">
var E = window.wangEditor;
var editor = new E('#div1');
editor.customConfig.menus = [
'head', // 标题
'bold' /** 粗体*/, 'fontSize' /** 字号 */, 'fontName' /** 字体 */,'italic' /** 斜体 */,
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'link', // 插入链接
'list', // 列表
'justify', // 对齐方式
'quote', // 引用
'emoticon', // 表情 打开后支持表情功能
'image', // 插入图片
'table', // 表格
'video', // 插入视频
'code', // 插入代码
'undo', // 撤销
'redo' // 重复
]
// 配置服务器端地址
//本地配置
//ip路径需与访问ip一致,要么同为localhost ,要么同为ip地址,跨域需要服务端配置跨域
editor.customConfig.uploadImgServer = 'http://localhost:8080/app/uploadHeadPicture'
editor.customConfig.uploadFileName = 'file'
// 进行下文提到的其他配置
// 将图片大小限制为 3M
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024
// 限制一次最多上传 5 张图片
editor.customConfig.uploadImgMaxLength = 5
//自定义上传图片事件
editor.customConfig.uploadImgHooks = {
before: function(xhr, editor, files) {
},
success: function(xhr, editor, result) {
console.log("上传成功");
},
//此处失败是服务端返回有数据,但自动设置图片出错,一般是返回数据格式问题
fail: function(xhr, editor, result) {
console.log("上传失败,原因是" + result);
console.log(result);
},
error: function(xhr, editor) {
console.log("上传出错");
},
timeout: function(xhr, editor) {
console.log("上传超时");
},
// 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式,可使用该配置
// (但是,服务器端返回的必须是一个 JSON 格式字符串!!!否则会报错)
customInsert: function (insertImg, result, editor) {
// 图片上传并返回结果,自定义插入图片的事件(而不是编辑器自动插入图片!!!)
// insertImg 是插入图片的函数,editor 是编辑器对象,result 是服务器端返回的结果
// 举例:假如上传图片成功后,服务器端返回的是 {url:'....'} 这种格式,即可这样插入图片:
insertImg(result.data.url)
// result 必须是一个 JSON 格式字符串!!!否则报错
}
}
editor.create();
document.getElementById('btn1').addEventListener('click', function () {
// 读取 html
alert(editor.txt.html())
}, false)
document.getElementById('btn2').addEventListener('click', function () {
// 读取 text
alert(editor.txt.text())
}, false)
</script>
</body>
</html>