wangEditor富文本编辑器【超简单教程】

2020-07-16 14:02:33 阅读：433 来源： 互联网

标签：function 文本编辑 result wangEditor 教程 customConfig editor var 图片

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" style="width:800px;" id="editor"></div>
<script>
var E = window.wangEditor;
var editor = new E('#editor');
editor.create();
</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" style="width:800px;" 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
editor.customConfig.menus = [
'bold',
'italic',
'underline',
'strikeThrough',
'link', // 插入链接
'list', // 列表
'quote', // 引用
'image', // 插入图片
'undo', // 撤销
'redo' // 重复
]

editor.customConfig.onchange = function(html) {
// html 即变化之后的内容
//因为用editor.txt.text()来校验字数，输入一个空格的话会被识别为5个字符，所以用$('div[contenteditable]').eq(0).text()字符来判断
$('.attip').eq(0).find('font').text($.trim($('div[contenteditable]').eq(0).text()).length);
//$.trim()
//editor.txt.text()
}
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) {
this.editor.cmd.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){this.editor.cmd.do("insertHTML",'<img src="'+e+'" style="max-width:100%;"/>');var n=document.createElement("img");n.onload=function(){n=null},n.onerror=function(){n=null,t._alert("插入图片错误",'wangEditor: 插入图片出错，图片链接是 "'+e+'"，下载该链接失败')},n.onabort=function(){n=null},n.src=e}}
//上面函数是原生的insertImg函数
var insertImg1 = function(e) {
var t = this;
if (e) {
this.editor.cmd.do("insertHTML", '<img src="' + e + '" />'); //这里如果加上限制图片的宽度的样式的话，请求会报错。
} else {
return insertImg(e);
}
}
insertImg1(url);
// result 必须是一个 JSON 格式字符串！！！否则报错
}
}
editor.customConfig.customAlert = function(info) {
// info 是需要提示的内容
cog(info)
}
window.onload = function() {
editor.create();
};
</script>
</body>

</html>

————————————————
版权声明：本文为CSDN博主「时间飞逝子非鱼」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/lgysjfs/article/details/91984038

标签：function,文本编辑,result,wangEditor,教程,customConfig,editor,var,图片
来源： https://www.cnblogs.com/Ao-min/p/13322284.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

wangEditor富文本编辑器【超简单教程】