本文介绍了如何在SpringBoot项目中整合wangEditor富文本编辑器。内容包括官网下载、开发文档链接，以及集成过程的关键步骤，如图片Base64编码处理、IDEA配置热更新和编辑器功能演示。同时讲解了通过Ajax将编辑器内容保存到数据库，并能从数据库读取显示的实现方法。
1. 官网下载 版本3 http://www.wangeditor.com/
2. 开发文档 https://www.kancloud.cn/wangfupeng/wangeditor3/430149
3.了解以及提前准备事项
3.1 将图片转换为Base64编码，可以在没有上传文件的条件下将图片插入其它的网页、编辑器中。 这对于一些小的图片是很方便的，因为你不需要找一个保存图片的地方。
3.2 js 其中 encodeURI是加密方法 需要加密两次
var phone=encodeURI(encodeURI(document.getElementById("phone").value));
Java解密
String phone=URLDecoder.decode(StringUtil.trim(request.getParameter("phone")),"utf-8");
3.3 idea如何设置不必每次修改html代码就重启服务方法如下：
打开设置,把这个勾要选上
Mac按下 shitf+option+command+/ 四个键，会弹出一个对话框选择第一个，找到指定的再打勾
5.运行的效果图如下，可以实现图片的上传到本项目指定的文件夹下，进行图片的回显在当前页面；
当点击获取html按钮时，将富文本编辑器的内容获取到，通过Ajax方式发送到后台controller处理，接收该字符串，保存到数据库中，而前端页面图片的介绍可以从数据库获取该字段的值进行显示。
6.核心代码部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>wangEditor demo</title>
</head>
<body>
<!--用父容器来控制宽度-->
<div style="width:90%">
<!--用当前元素来控制高度-->
<div id="editor" style="height:400px;max-height:500px;" >
<p>欢迎使用 wangEditor 富文本编辑器</p>
</div>
</div>
<button id="btn1">获取html</button>
<button id="btn2">获取text</button>
<!-- wangEditor3版本使用手册 -->
<script type="text/javascript" src="js/wangEditor.min.js"></script>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var E = window.wangEditor
var editor = new E('#editor')
// 或者 var editor = new E( document.getElementById('editor') )
//配置指定文件名
editor.customConfig.uploadFileName = 'fileName'
// 下面两个配置，使用其中一个即可显示“上传图片”的tab。但是两者不要同时使用！！！
// 配置服务器端地址
editor.customConfig.uploadImgServer = 'fileUpload'
//如果图片不大，可以用base64存储
//editor.customConfig.uploadImgShowBase64 = true
// 隐藏“网络图片”tab
editor.customConfig.showLinkImg = false
editor.customConfig.uploadImgHooks = {
customInsert: function (insertImg, result, editor) {
var url =result.data;
insertImg(url);
}
}
// 自定义菜单配置
editor.customConfig.menus = [
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'link', // 插入链接
'list', // 列表
'justify', // 对齐方式
'quote', // 引用
'emoticon', // 表情
'image', // 插入图片
'table', // 表格
'video', // 插入视频
'code', // 插入代码
'undo', // 撤销
'redo' // 重复
]
editor.create()
document.getElementById('btn1').addEventListener('click', function () {
// 读取 html
var text = editor.txt.html();
console.log(text);
//此处发送请求保存控制台
$.ajax({
type:"POST",
contentType:"application/x-www-form-urlencoded",
url:"editorsave",
data:{
"text":text
},
success:function(data){
console.log("data===="+data.status);
console.log("data===="+data.data);
},
error:function(data){
//responseText ：服务器响应返回的文本信息
console.log("登陆回调失败，原因为"+data.status)
}
})
}, false)
document.getElementById('btn2').addEventListener('click', function () {
// 读取 text
console.log(editor.txt.text())
}, false)
</script>
</body>
</html>
/**
*
* @param file 要上传的文件
* @return
*/
@RequestMapping("fileUpload")
@ResponseBody
public Object upload(@RequestParam("fileName") MultipartFile file, Map<String, Object> map){
//2012031220134655.jpg
System.out.println("file.getOriginalFilename() "+file.getOriginalFilename());
File outpath = null;
try{
//...../ew/out/production/resources/static
outpath = ResourceUtils.getFile("classpath:static");
}catch (Exception e){
e.printStackTrace();
}
File outsrc = new File(outpath+"/images/"+file.getOriginalFilename());
// 要上传的目标文件存放路径
String localPath = System.getProperty("user.dir")+"/src/main/resources/static/images/";
// 上传成功或者失败的提示
String msg = "";
if (FileUtils.upload(file, localPath, file.getOriginalFilename())){
// 上传成功，给出页面提示
msg = "上传成功！";
//
//srcFile：需要拷贝的文件 destFile：拷贝后的文件
try{
org.apache.commons.io.FileUtils.copyFile(new File(localPath+file.getOriginalFilename()),outsrc);
}catch (Exception e){
e.printStackTrace();
}
}else {
msg = "上传失败！";
}
// 显示图片
map.put("msg", msg);
map.put("fileName", file.getOriginalFilename());
return new WangEditorResponse("1",Arrays.asList("http://localhost:8080/images/"+file.getOriginalFilename()));
}
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.IOException;
/**
文件上传工具
**/
public class FileUtils {
/**
*
* @param file 文件
* @param path 文件存放路径
* @param fileName 源文件名
* @return
*/
public static boolean upload(MultipartFile file, String path, String fileName){
//使用原文件名
String realPath = path + fileName;
File dest = new File(realPath);
try {
//保存文件
file.transferTo(dest);
return true;
} catch (IllegalStateException e) {
e.printStackTrace();
return false;
} catch (IOException e) {
e.printStackTrace();
return false;
}
}
}
import java.util.List;
/*
{
// errno 即错误代码，0 表示没有错误。
// 如果有错误，errno != 0，可通过下文中的监听函数 fail 拿到该错误码进行自定义处理
"errno": 0,
// data 是一个数组，返回若干图片的线上地址
"data": [
"图片1地址",
"图片2地址",
"……"
]
}
*/
public class WangEditorResponse {
private String errno;
private List<String> data;
public WangEditorResponse() {
}
public WangEditorResponse(String errno, List<String> data) {
this.errno = errno;
this.data = data;
}
public String getErrno() {
return errno;
}
public void setErrno(String errno) {
this.errno = errno;
}
public List<String> getData() {
return data;
}
public void setData(List<String> data) {
this.data = data;
}
}
扫一扫
466
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
