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

2024-04-02 08:49:40

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

码农公寓

相关文章