富文本 wangEditor 前后端交互例子
之前看了很多 但都不是很详细,这次贴上的代码,希望新手能少走弯路,与君共勉
参考文献
官方文档 https://www.kancloud.cn/wangfupeng/wangeditor3/332599
主要引入: <script type="text/javascript" src="../static/js/wangEditor.min.js"></script>
官方文档中都有,没用的可以自行删除
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>H+ 后台主题UI框架 - 富文本编辑器</title>
<meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后�?">
<meta name="description" content="H+是一个完全响应式,基于Bootstrap3�?新版本开发的扁平化主题,她采用了主流的左右两栏式布局,使用了Html5+CSS3等现代技�?">
<link rel="shortcut icon" href="favicon.ico"> <link href="../static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="../static/css/font-awesome.css?v=4.4.0" rel="stylesheet">
<link href="../static/css/animate.css" rel="stylesheet">
<link href="../static/css/plugins/summernote/summernote.css" rel="stylesheet">
<link href="../static/css/plugins/summernote/summernote-bs3.css" rel="stylesheet">
<link href="../static/css/style.css?v=4.1.0" rel="stylesheet">
<script src="../static/js/jquery.min.js?v=2.1.4"></script>
<script src="../static/js/bootstrap.min.js?v=3.3.6"></script>
<!-- Peity -->
<script src="../static/js/plugins/peity/jquery.peity.min.js"></script>
<script type="text/javascript" src="../static/js/wangEditor.min.js"></script>
</head>
<body class="gray-bg">
<div>
<span class="col-lg-8" id="editor"></span>
</div>
<div>
<button id="btn2">获取text</button>
</div>
<script type="text/javascript">
var E = window.wangEditor;
var editor = new E('#editor');
//editor.create();
// 自定义菜单配置
editor.customConfig.menus = [
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'link', // 插入链接
'list', // 列表
'justify', // 对齐方式
'quote', // 引用
'emoticon', // 表情
'image', // 插入图片
'table', // 表格
'video', // 插入视频
'code', // 插入代码
'undo', // 撤销
'redo' // 重复
];
//editor.customConfig.uploadImgServer = '/admin.php/Upload/wang_editor'; // 上传图片到服务器
//editor.customConfig.uploadImgServer = '/upload';
editor.customConfig.uploadImgShowBase64 = true; // 使用 base64 保存图片
// 3M
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
// 限制一次最多上传 5 张图片
editor.customConfig.uploadImgMaxLength = 1;
// 自定义文件名
editor.customConfig.uploadFileName = 'editor_img';
// 将 timeout 时间改为 3s
editor.customConfig.uploadImgTimeout = 5000;
editor.create();
editor.customConfig.uploadImgHooks = {
before: function (xhr, editor, files) {
// 图片上传之前触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,files 是选择的图片文件
// 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
// return {
// prevent: true,
// msg: '放弃上传'
// }
// alert("前奏");
},
success: function (xhr, editor, result) {
// 图片上传并返回结果,图片插入成功之后触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
// var url = result.data.url;
// alert(JSON.stringify(url));
// editor.txt.append(url);
// alert("成功");
},
fail: function (xhr, editor, result) {
// 图片上传并返回结果,但图片插入错误时触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
alert("失败");
},
error: function (xhr, editor) {
// 图片上传出错时触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象
// alert("错误");
},
// 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式,可使用该配置
// (但是,服务器端返回的必须是一个 JSON 格式字符串!!!否则会报错)
customInsert: function (insertImg, result, editor) {
// 图片上传并返回结果,自定义插入图片的事件(而不是编辑器自动插入图片!!!)
// insertImg 是插入图片的函数,editor 是编辑器对象,result 是服务器端返回的结果
// 举例:假如上传图片成功后,服务器端返回的是 {url:'....'} 这种格式,即可这样插入图片:
var url = result.data[0];
insertImg(url);
// result 必须是一个 JSON 格式字符串!!!否则报错
}
}
//获取文本输入的内容
document.getElementById('btn2').addEventListener('click', function () {
editor.txt.html(content);
var content = editor.txt.html();
console.log(content);
// 读取 text
var announcement_mag = editor.txt.text();
alert(announcement_mag)
$.ajax({
url : "http://localhost:8080/User/inserAnnouncements?announcement_mag="+announcement_mag,
type : "post",
dataType : "json",
success : function(data) {
alert(data.result);
},
error : function(msg) {
alert("ajax连接异常:" + msg);
}
});
}, false)
</script>
</body>
</html>
效果
后台:
/*
* 新增公告信息
*/
@RequestMapping(value = "/inserAnnouncements")
@ResponseBody
public Map<String, Object> inserAnnouncements(String announcement_mag) {
Map<String, Object> map = new HashMap<String, Object>();
Announcement announcement = new Announcement();
announcement.setAnnouncement_mag(announcement_mag);
try {
int insertUser = userservice.inserAnnouncement(announcement);
} catch (Exception e) {
map.put("result", "false");
e.printStackTrace();
}
map.put("result", "true");
System.out.println(map.get("result"));
return map;
}
在富文本中输入文字:点击提交
数据库字段如下图:
添加成功
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
2019.4.1
继续完善插入图片回显到富文本
测试使用的是spring boot框架
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>H+ 后台主题UI框架 - 富文本编辑器</title>
<meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后�?">
<meta name="description" content="H+是一个完全响应式,基于Bootstrap3�?新版本开发的扁平化主题,她采用了主流的左右两栏式布局,使用了Html5+CSS3等现代技�?">
<link rel="shortcut icon" href="favicon.ico"> <link href="../static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="../static/css/font-awesome.css?v=4.4.0" rel="stylesheet">
<link href="../static/css/animate.css" rel="stylesheet">
<link href="../static/css/plugins/summernote/summernote.css" rel="stylesheet">
<link href="../static/css/plugins/summernote/summernote-bs3.css" rel="stylesheet">
<link href="../static/css/style.css?v=4.1.0" rel="stylesheet">
<script src="../static/js/jquery.min.js?v=2.1.4"></script>
<script src="../static/js/bootstrap.min.js?v=3.3.6"></script>
<!-- Peity -->
<script src="../static/js/plugins/peity/jquery.peity.min.js"></script>
<script type="text/javascript" src="../static/js/wangEditor.min.js"></script>
</head>
<body class="gray-bg">
<div>
<span class="col-lg-8" id="editor"></span>
</div>
<div>
<button id="btn2">获取text</button>
</div>
<script type="text/javascript">
var E = window.wangEditor;
var editor = new E('#editor');
// 配置服务器端地址
//editor.customConfig.uploadImgServer = '/upload'
editor.customConfig.uploadImgServer = 'http://localhost:8080/User/selectJpgUrl';
//editor.create();
// 自定义菜单配置
editor.customConfig.menus = [
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'link', // 插入链接
'list', // 列表
'justify', // 对齐方式
'quote', // 引用
'emoticon', // 表情
'image', // 插入图片
'table', // 表格
'video', // 插入视频
'code', // 插入代码
'undo', // 撤销
'redo' // 重复
];
//editor.customConfig.uploadImgServer = '/admin.php/Upload/wang_editor'; // 上传图片到服务器
editor.customConfig.uploadImgShowBase64 = true; // 使用 base64 保存图片
// 3M
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
// 限制一次最多上传 5 张图片
editor.customConfig.uploadImgMaxLength = 1;
//自定义文件名
editor.customConfig.uploadFileName = 'myFileName'
// 自定义文件名
//editor.customConfig.uploadFileName = 'editor_img';
// 将 timeout 时间改为 3s
editor.customConfig.uploadImgTimeout = 50000;
editor.customConfig.uploadImgHooks = {
before: function (xhr, editor, files) {
// 图片上传之前触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,files 是选择的图片文件
// 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
// return {
// prevent: true,
// msg: '放弃上传'
// }
// alert("前奏");
},
success: function (xhr, editor, result) {
// 图片上传并返回结果,图片插入成功之后触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
// var url = result.data.url;
// alert(JSON.stringify(url));
// editor.txt.append(url);
// alert("成功");
},
fail: function (xhr, editor, result) {
// 图片上传并返回结果,但图片插入错误时触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
alert("失败");
},
error: function (xhr, editor) {
// 图片上传出错时触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象
// alert("错误");
},
// 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式,可使用该配置
// (但是,服务器端返回的必须是一个 JSON 格式字符串!!!否则会报错)
customInsert: function (insertImg, result, editor) {
// 图片上传并返回结果,自定义插入图片的事件(而不是编辑器自动插入图片!!!)
// insertImg 是插入图片的函数,editor 是编辑器对象,result 是服务器端返回的结果
// 举例:假如上传图片成功后,服务器端返回的是 {url:'....'} 这种格式,即可这样插入图片:
var url = result.url
console.log(url);
//var jsonStrings = encodeURIComponent(url);
insertImg(url);
// result 必须是一个 JSON 格式字符串!!!否则报错
}
}
editor.create();
//获取文本输入的内容
document.getElementById('btn2').addEventListener('click', function () {
editor.txt.html(content);
var content = editor.txt.html();
console.log(content);
// 读取 text
var announcement_mag = editor.txt.text();
alert(announcement_mag)
$.ajax({
url : "http://localhost:8080/User/inserAnnouncements?announcement_mag="+announcement_mag,
type : "post",
dataType : "json",
success : function(data) {
alert(data.result);
},
error : function(msg) {
alert("ajax连接异常:" + msg);
}
});
}, false)
</script>
</body>
</html>
主要相对于之前的代码新增了,服务器地址和自定义文件名,本插件会自动访问你的路径进行调用图片下载上传。
后台代码:
/*
* 返回图片路径(富文本)
*/
@RequestMapping(value = "/selectJpgUrl")
@ResponseBody
public Map<String,String> selectJpgUrl(@RequestParam(value = "myFileName") MultipartFile mf, HttpServletRequest request)
throws IOException {
String realPath = request.getSession().getServletContext().getRealPath("myFileName");
// 获取源文件
String filename = mf.getOriginalFilename();
String[] names = filename.split("\\.");//
String tempNum = (int) (Math.random() * 100000) + "";
String uploadFileName = tempNum + System.currentTimeMillis() + "." + names[names.length - 1];
File targetFile = new File(realPath, uploadFileName);// 目标文件
// 开始从源文件拷贝到目标文件
// 传图片一步到位
try {
mf.transferTo(targetFile);
} catch (IllegalStateException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
Map<String, String> map = new HashMap<String, String>();
map.put("errno","0");
System.out.println(uploadFileName);
map.put("data","http://localhost:8080/static/myFileName/"+uploadFileName);// 这里应该是项目路径
map.put("url","http://localhost:8080/static/myFileName/"+uploadFileName);
return map;// 将图片地址返回
}
//细节如下:
spring boot配置文件:
设置完成展示富文本:
控制台显示