IDEA springboot整合ueditor百度富文本编辑器详细教程

第一步：建立 Mysql数据库

注意：需要上传多个文件跟视频的字段名类型要用 == text == (否则：会出现超出字段名保存长度)

第二步：逆向工程在IDEA 建立项目

这个就是普通的逆向生成跟 IDEA建立项目

第三步：官网下载ueditor jsp版

解压放在项目目录 static 下

第四步：把这段代码引入前端页面

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="/ueditor/lang/zh-cn/zh-cn.js"></script>



    <title>百度编辑器</title>

    <script type="text/javascript">
        //实例化编辑器
        //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
        UE.getEditor('editor');
    </script>
</head>
<body>

<h1>百度编辑器</h1>
<form action="save1" method="post" >
    <label>标题：</label>
    <input type="text" id="title" name="userName" >
    <strong><textarea id="editor" name="userPwd" style="width: 70%;height:400px;" > </textarea>
    </strong>    <input type="submit" id="Submit" value="提交">
</form>

</body>
</html>

第五步：修改源代码，因为官方提供的是JSP，所以引入之后图片上传等一些功能无法使用

1.修改ueditor.config.js，防止大家懒得自己写，给大家贴一下代码
var server_url = window.location.protocol+"//"+window.location.hostname+":"+window.location.port
serverUrl: server_url+"/config"

2.新增一个ServerController（一定要单独建一个，不要在其他Controller里写）

代码：

@Controller
public class ServerController {
@RequestMapping(value = "/config")
public void config(HttpServletRequest request, HttpServletResponse response) {
response.setContentType("application/json");
String rootPath = ClassUtils.getDefaultClassLoader().getResource("").getPath() + "static/ueditor/jsp";
try {
response.setCharacterEncoding("UTF-8");
String exec = new ActionEnter(request, rootPath).exec();
System.out.println(exec);
PrintWriter writer = response.getWriter();
writer.write(new ActionEnter(request, rootPath).exec());
writer.flush();
writer.close();
} catch (IOException e) {
e.printStackTrace();
}
}

注意：
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190705113706361.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0,size_16,color_FFFFFF,t_70)

ActionEnter类是ueditor里一个jar包的，添加以下依赖