freemark+UEditor+SpringBoot_综合

参考 https://blog.csdn.net/weixin_34023982/article/details/88273308

####依赖

<!--ueditor --><dependency><groupId>com.gitee.qdbp.thirdparty</groupId><artifactId>ueditor</artifactId><version>1.4.3.3</version></dependency><dependency><groupId>commons-io</groupId><artifactId>commons-io</artifactId><version>2.4</version></dependency><!-- https://mvnrepository.com/artifact/commons-codec/commons-codec --><dependency><groupId>commons-codec</groupId><artifactId>commons-codec</artifactId><version>1.9</version></dependency><!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload --><dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.3.1</version></dependency><!-- https://mvnrepository.com/artifact/org.json/json --><dependency><groupId>org.json</groupId><artifactId>json</artifactId><version>20170516</version></dependency>

1.下载 jsp 版本和完整源码版本

1--.将jsp版本里的内容复制到 /static 目录下

2---将源码版本的 ueditor-1.4.3.3.zip\ueditor-1.4.3.3\jsp\src\com 下的baidu文件夹拷贝至项目src/main/java/com/目录下

3.更改编辑页面引用js的路径

<html class="x-admin-sm"><head><meta charset="UTF-8"><title>人事处</title><meta name="renderer" content="webkit"><meta http-equiv="Content-Type" content="IE=edge,chrome=1;charset=utf-8""><meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" /><link rel="stylesheet" href="${request.contextPath}/static/admin/xadmin/css/font.css"><#--<link rel="stylesheet" type="text/css"--><#--href="${request.contextPath}/static/admin/lib/editor_md/css/editormd.min.css">--><#--<link rel="stylesheet" type="text/css"--><#--href="${request.contextPath}/static/admin/lib/editor_md/css/editormd.preview.min.css">--><link rel="stylesheet" href="${request.contextPath}/static/admin/xadmin/css/xadmin.css"><script type="text/javascript" src="${request.contextPath}/static/admin/xadmin/js/jquery-3.2.1.min.js"></script><script type="text/javascript" src="${request.contextPath}/static/admin/xadmin/lib/layui/layui.js" charset="utf-8"></script><script type="text/javascript" src="${request.contextPath}/static/admin/xadmin/js/xadmin.js"></script><#--<script type="text/javascript" src="${request.contextPath}/static/admin/xadmin/js/cookie.js"></script>--><#--<link rel="stylesheet" href="${request.contextPath}/static/admin/css/side.css"/>--><link rel="stylesheet" href="${request.contextPath}/static/admin/css/pintuer.css"/><script type="text/javascript" class="library" src="${request.contextPath}/static/admin/js/jquery.js"></script><script type="text/javascript" src="${request.contextPath}/static/admin/js/pintuer.js"></script><#--引入alert的css文件--><link href="${request.contextPath}/static/admin/css/alert.css" rel="stylesheet"><script type="text/javascript" charset="utf-8" src="${request.contextPath}/static/ueditor/ueditor.config.js"></script><script type="text/javascript" charset="utf-8" src="${request.contextPath}/static/ueditor/ueditor.all.js"> </script><!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败--><!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文--><script type="text/javascript" charset="utf-8" src="${request.contextPath}/static/ueditor/lang/zh-cn/zh-cn.js"></script><style type="text/css">div{width:100%;}</style></head><body><div class="x-nav"><span class="layui-breadcrumb"><a href="">首页</a><#--<a href="">演示</a>--><a><cite>添加文章</cite></a></span><a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新"><i class="layui-icon" style="line-height:30px">?</i></a></div><div class="x-body"><div class="container-fluid"><div class="x-body"><div class="main"><div class="panel"><div class="panel-body"><br/><form id="commentForm" accept-charset="UTF-8" ><div class="form-group"><table class="table table-responsive"><tr><td>新闻标题</td><td><input type="text" style="width: 735px;" name="title" class="input input-small required" required="required"></td></tr><tr><td>副标题</td><td><input type="text" class="input input-small " style="width: 735px;"name="subtitle" id="subtitle"></td></tr></table><br/><input type="text" class="input input-small " style="width: 735px;display: none"name="content" id="content" ><div><label>新闻内容</label></div><br/><div><#--<div id="my-editormd" class="editormd">--><#--<textarea id="my-editormd-markdown-doc" class="editormd-markdown-textarea required"--><#--name="content" style="display:none;" ></textarea>--><#--<!-- 注意：name属性的值&ndash;&gt;--><#--<textarea class="editormd-html-textarea" id="my-editormd-html-code"--><#--name="my-editormd-html-code" style="display:none;"></textarea>--><script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>// </div></div><div id="app"><table class="table table-responsive "><tr><td>所属栏目：</td><td><select class="input input-small required" name="Navigate2" id="Navigate2" @change="getChild()"style="width: 152px" required><option value="-1" disabled selected>请选择</option><option v-for="sort in navigate" v-bind:value="sort.id" v-if="sort.parentId==null&&sort.name!='机构设置'" value="{
   {sort.id}}" >{
   {sort.name}}</option></select></td></tr><tr id="navigate"><td>所属子栏目：</td><td><select class="input input-small required" name="navigate" id="navigate"style="width: 152px" required><option value="-1" disabled selected>请选择</option><option v-for="sort2 in navigate" v-bind:value="sort2.id" v-if="sort2.parentId==a&&sort2.name!='人才政策'" value="{
   {sort2.id}}">{
   {sort2.name}}</option></select></td></tr><tr id="newsSource"><td>新闻来源：</td><td><select name="source" class="input input-small" style="width: 150px;" required><#--<option value="" >请选择</option>--><option v-for="n in newsSource" v-bind:value="n.id">{
   {n.name}}</option></select></td></tr><tr><td>关键字：</td><td><select class="input input-small" name="type" style="width: 150px;" required><#--<option value="" selected>请选择</option>--><option v-for="t in type" v-bind:value="t.id">{
   {t.name}}</option></select></td></tr><tr><td>新闻作者：</td><td><input class="input input-small required" style="width: 152px;" type="text"name="author"></td><td></td></tr><tr><td>责任编辑：</td><td><input class="input input-small required" style="width: 152px;" type="text"name="editor"></td><#--<tr>--><#--<td>点击：</td>--><#--<td><input class="input input-small" style="width: 152px;" type="number" id=""--><#--name="click" ></td>--><#--<td></td>--><#--</tr>--></tr><input type="number" id="" name="click" value="1" hidden><tr><td>显示轮播图：</td><td><select class="input input-small" style="width: 152px;" name="carousel"><option>否</option><option>是</option></select></td></tr><tr><td>发布日期：</td><td><input type="date" class="input input-small required"style="width: 190px;"name="releaseTime" ></td><td></td></tr><#--<tr>--><#--<td>可选属性：</td>--><#--<td>--><#--<input type="checkbox" name="1">头条--><#--<input type="checkbox" name="1">滚动--><#--<input type="checkbox" name="1">推荐--><#--<input type="checkbox" name="1">幻灯--><#--<input type="checkbox" name="1">置顶--><#--</td>--><#--<td></td>--><#--<td></td>--><#--</tr>--><tr><td>新闻摘要：</td><td colspan="3"><textarea class="input" name="digest" placeholder="选填"></textarea></td><td></td></tr></table></div></div><div id="box"><input type="button" class="button" onclick="submitForm()" value="提交"></div></form><br/></div></div></div></div></div></div></body><script type="text/javascript" src="${request.contextPath}/static/admin/js/jquery.js"></script><script type="text/javascript" src="${request.contextPath}/static/admin/js/vue.min.js"></script><script type="text/javascript" src="${request.contextPath}/static/admin/lib/vue_resource/dist/vue-resource.min.js"></script><#--引入alert--><script src="${request.contextPath}/static/admin/js/alert.js"></script><#--<script src="${request.contextPath}/static/admin/js/bootstrap.min.js"></script>--><script src="${request.contextPath}/static/admin/js/jquery.nicescroll.min.js"></script><#--<script src="${request.contextPath}/static/admin/lib/editor_md/editormd.min.js"></script>--><#--页面加载**js**--><script src="${request.contextPath}/static/admin/js/jquery.mloading.js"></script><!-- content YDC end --><script type="text/javascript" src="${request.contextPath}/static/admin/js/nicEdit.js"></script><script type="text/javascript" src="${request.contextPath}/static/admin/js/upImg.js"></script><#--edit.md--><#--<script src="${request.contextPath}/static/admin/lib/editor_md/editormd.min.js"></script>--><#--<script src="${request.contextPath}/static/admin/lib/editor_md/lib/marked.min.js"></script>--><#--<script src="${request.contextPath}/static/admin/lib/editor_md/lib/prettify.min.js"></script>--><script type="text/javascript">//实例化编辑器//建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例// //全局禁用回车键document.onkeydown = function () {if (window.event && window.event.keyCode == 13) {window.event.returnValue = false;}}$(function () {var ue = UE.getEditor('editor');function isFocus(e){alert(UE.getEditor('editor').isFocus());UE.dom.domUtils.preventDefault(e)}function setblur(e){UE.getEditor('editor').blur();UE.dom.domUtils.preventDefault(e)}//加载编辑器<#--var EditorMd;--><#--EditorMd = editormd("my-editormd", {//注意1：这里的就是上面的DIV的id属性值--><#--width: "100%",--><#--height: 800,--><#--syncScrolling: "single",--><#--path: "${request.contextPath}/static/admin/lib/editor_md/lib/",//注意2：你的路径--><#--saveHTMLToTextarea: true,//注意3：这个配置，方便post提交表单--><#--imageUpload: true,--><#--imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],--><#--imageUploadURL: "${request.contextPath}/admin/saveContentImg",//注意你后端的上传图片服务地址--><#--});-->//获取数据loadData();});function loadData() {$.ajax({dataType: "JSON",type: "POST",url: "${request.contextPath}/admin/getNewsSourceAndTypeList",success: function (result, state) {console.log(result);getVue(result, state);// refreshEnd();},error: function (result, state) {// refreshEnd();alertWarning("网络异常");console.log(state)}});// refreshEnd();}//利用Vue填充信息var v;function getVue(r, s) {v = new Vue({el: "#app",data: {//数据赋值操作result: r,//新闻来源newsSource: r.resultObj[0],type: r.resultObj[1],navigate:r.resultObj[2],a:"test"//v-model绑定},methods: {getChild: function () {this.$data.a = $("#Navigate2").val();},}});}//保存文章function submitForm() {$("#content").val(UE.getEditor('editor').getContent());//判断表单字段是否为空var list = document.getElementsByClassName("required");for (var i = 0; i < list.length; i++) {// alert(list[i].value=="");if (list[i].value == ""||list[i].value == -1) {alertWarning("表单字段不能为空");return;}}$.ajax({type: "POST",async: true,url: "${request.contextPath}/admin/saveArticle",data: $("#commentForm").serialize(),success: function (result) {if (result.resultCode == 1) {var success;success = jqueryAlert({'content': "保存成功",'modal': true,'contentTextAlign': 'center','width': '450px','height': '100px','animateType': 'linear','buttons': {'确定': function () {// var a = document.getElementById("ChildNavigate").value;success.close();window.location.href = "${request.contextPath}/admin/tosuccess";}}})} else {alertWarning("保存失败!");}},error: function () {alertWarning("保存失败");}});}var warning;//弹出窗口函数function alertWarning(message) {warning = jqueryAlert({'content': message,'modal': true,'contentTextAlign': 'center','width': '450px','height': '100px','animateType': 'linear','buttons': {'确定': function () {warning.close();}}})}//刷新开始function refreshStart() {$("body").mLoading({text: "正在加载", //加载文字，默认值：加载中...//				icon: "", //加载图标，默认值：一个小型的base64的gif图片html: false, //设置加载内容是否是html格式，默认值是falsecontent: "", //忽略icon和text的值，直接在加载框中显示此值mask: true //是否显示遮罩效果，默认显示});}//刷新结束function refreshEnd() {$("body").mLoading("hide");}</script>
</html>

*****************之前写好了也编辑页面的跳转*********************

4.将static/ueditor/jsp/config.json 拷贝至resource目录下

5.编写UeditController

package com.tianmaxingkong.demo.controller.admin;import com.baidu.ueditor.ActionEnter;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;/*** @Author zhaoxin* @Email 1272743926@qq.com* @Description //TODO* @Date 2019/4/4**/
@Controller
public class UeditController {@RequestMapping(value="/config")public void config(HttpServletRequest request, HttpServletResponse response) {response.setContentType("application/json");String rootPath = request.getSession().getServletContext().getRealPath("/");try {String exec = new ActionEnter(request, rootPath).exec();PrintWriter writer = response.getWriter();writer.write(exec);writer.flush();writer.close();} catch (IOException e) {e.printStackTrace();}}
}

6.修改ConfigManage类的getConfigPath()方法

private String getConfigPath () {//return this.parentPath + File.separator + ConfigManager.configFileName;/*=========手动修改部分=========*/try{//获取classpath下的config.json路径return this.getClass().getClassLoader().getResource("config.json").toURI().getPath();}catch (URISyntaxException e){return null;}}

7.配置ueditor.config.js 打开ueditor.config.js

将：
, serverUrl: URL + "jsp/controller.jsp"
替换为：
, serverUrl: "/config"

8. 修改BinaryUploader 类，解决其无法获得带字节流的request的问题
打开com.baidu.ueditor.upload.BinaryUploader.java，修改为：

public class BinaryUploader {  public static final State save(HttpServletRequest request,  Map<String, Object> conf) {  // FileItemStream fileStream = null;  // boolean isAjaxUpload = request.getHeader( "X_Requested_With" ) != null;  if (!ServletFileUpload.isMultipartContent(request)) {  return new BaseState(false, AppInfo.NOT_MULTIPART_CONTENT);  }  // ServletFileUpload upload = new ServletFileUpload(  //  new DiskFileItemFactory());  //  // if ( isAjaxUpload ) {  //     upload.setHeaderEncoding( "UTF-8" );  // }  try {  // FileItemIterator iterator = upload.getItemIterator(request);  //  // while (iterator.hasNext()) {  //  fileStream = iterator.next();  //  //  if (!fileStream.isFormField())  //      break;  //  fileStream = null;  // }  //  // if (fileStream == null) {  //  return new BaseState(false, AppInfo.NOTFOUND_UPLOAD_DATA);  // }  MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;  MultipartFile multipartFile = multipartRequest.getFile(conf.get("fieldName").toString());  if(multipartFile==null){  return new BaseState(false, AppInfo.NOTFOUND_UPLOAD_DATA);  }  String savePath = (String) conf.get("savePath");  //String originFileName = fileStream.getName();  String originFileName = multipartFile.getOriginalFilename();  String suffix = FileType.getSuffixByFilename(originFileName);  originFileName = originFileName.substring(0,  originFileName.length() - suffix.length());  savePath = savePath + suffix;  long maxSize = ((Long) conf.get("maxSize")).longValue();  if (!validType(suffix, (String[]) conf.get("allowFiles"))) {  return new BaseState(false, AppInfo.NOT_ALLOW_FILE_TYPE);  }  savePath = PathFormat.parse(savePath, originFileName);  String physicalPath = (String) conf.get("rootPath") + savePath;  //InputStream is = fileStream.openStream();  InputStream is = multipartFile.getInputStream();  State storageState = StorageManager.saveFileByInputStream(is,  physicalPath, maxSize);  is.close();  if (storageState.isSuccess()) {  storageState.putInfo("url", PathFormat.format(savePath));  storageState.putInfo("type", suffix);  storageState.putInfo("original", originFileName + suffix);  }  return storageState;  // } catch (FileUploadException e) {  //  return new BaseState(false, AppInfo.PARSE_REQUEST_ERROR);  } catch (IOException e) {  }  return new BaseState(false, AppInfo.IO_ERROR);  }  private static boolean validType(String type, String[] allowTypes) {  List<String> list = Arrays.asList(allowTypes);  return list.contains(type);  }  
}

9.修改图片上传路径打开config.json，在其中增加：

"basePath": "G:/IdeaWork/Personnel_department/src/main/resources/static/",

11.打开ConfigManager.java

在
conf.put( "savePath", savePath );
conf.put( "rootPath", this.rootPath );
上面加一句：
conf.put( "basePath", this.jsonConfig.getString("basePath") );

12.打开BinaryUploader.java

将
String physicalPath = (String) conf.get("rootPath") + savePath;
修改为
String basePath=(String) conf.get("basePath");
String physicalPath = basePath + savePath;

至此配置成功。

freemark+UEditor+SpringBoot

1.下载 jsp 版本 和完整源码版本

1.下载 jsp 版本和完整源码版本