wangEditor富⽂本编辑器【超简单教程】
1、引⼊wangEditor.min.js
<script src="./jquery-2.1.4.min.js"></script>
<script src="./wangEditor.min.js"></script>
2、初始化wangEditor
<div class="min800 inline-block" id="editor"></div>asp富文本编辑器
<script>
var E = window.wangEditor;
var editor = new E('#editor');
</script>
简单配置富⽂本的dome源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./jquery-2.1.4.min.js"></script>
<script src="./wangEditor.min.js"></script>
</head>
<body>
<!-- 富⽂本编辑器 -->
<div class="min800 inline-block" id="editor"></div>
<script>
var E = window.wangEditor;
var editor = new E('#editor');
editor.customConfig.showLinkImg = false; //隐藏‘⽹络图⽚’的按钮
editor.customConfig.uploadImgServer = '/upload/image.do' // 上传图⽚到服务器
editor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024; // 将图⽚⼤⼩限制为 2M
editor.customConfig.uploadImgMaxLength = 5; // 限制⼀次最多上传 5 张图⽚
editor.customConfig.uploadFileName = 'file';
editor.customConfig.uploadImgTimeout = 30000; // 将 timeout 时间改为 3s
us = [
'bold',
'italic',
'underline',
'strikeThrough',
'link', // 插⼊链接
'list', // 列表
'quote', // 引⽤
'image', // 插⼊图⽚
'undo', // 撤销
'redo' // 重复
]
hange = function(html) {
// html 即变化之后的内容
//因为⽤()来校验字数，输⼊⼀个空格的话会被识别为5个字符，所以⽤$('div[contenteditable]').eq(0).text()字符来判断            $('.attip').eq(0).find('font').text($.trim($('div[contenteditable]').eq(0).text()).length);
//$.trim()
//$.trim()
//()
}
editor.customConfig.uploadImgHooks = {
before: function(xhr, editor, files) {
//校验图⽚不能超过9张
var _imgs = $('#richtext img');
if (_imgs.length >= 9) { //
alert("校验图⽚不能超过9张 ")
}
// 图⽚上传之前触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图⽚⽂件
// 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表⽰⽤户放弃上传
// return {
//    prevent: true,
/
/    msg: '放弃上传'
// }
},
fail: function(xhr, editor, result, insertImg) {
var insertImg1 = function(e) {
var t = this;
if (e) {
d.do("insertHTML", '<img src="' + e + '" />'); //这⾥如果加上限制图⽚的宽度的样式的话，请求会报错。
} else {
return insertImg(e);
}
}
insertImg1(result)
// 图⽚上传并返回结果，但图⽚插⼊错误时触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
},
error: function(xhr, editor) {
// 图⽚上传出错时触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
},
customInsert: function(insertImg, result, editor) {
// 图⽚上传并返回结果，⾃定义插⼊图⽚的事件（⽽不是编辑器⾃动插⼊图⽚）
/
/ insertImg 是插⼊图⽚的函数，editor 是编辑器对象，result 是服务器端返回的结果
// 举例：假如上传图⽚成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插⼊图⽚：
var url = result.url;
//function(e){var t=this;if(e){d.do("insertHTML",'<img src="'+e+'" />');var ateElement("img");n.onlo                //上⾯函数是原⽣的insertImg函数
var insertImg1 = function(e) {
var t = this;
if (e) {
d.do("insertHTML", '<img src="' + e + '" />'); //这⾥如果加上限制图⽚的宽度的样式的话，请求会报错。
} else {
return insertImg(e);
}
}
insertImg1(url);
// result 必须是⼀个 JSON 格式字符串否则报错
}
}
editor.customConfig.customAlert = function(info) {
// info 是需要提⽰的内容
cog(info)
}
};
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。