freemark+UEditor+SpringBoot

最新推荐文章于 2024-03-31 03:01:48 发布

我家排行老三

最新推荐文章于 2024-03-31 03:01:48 发布

阅读量887

点赞数

分类专栏： UEditor

UEditor 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

参考 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格式，默认值是false
              content: "", //忽略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;