8. 使用ueditor添加文章

ueditor是一个很好用的html编辑器，不仅提供了格式化编辑文本的功能，还提供了自动上传图片的功能，现在就使用该编辑器来实现博客文章的编辑功能。
1. 使用ueditor过程中会请求一个后台js文件作为语言文件，不加处理的话中文会乱码，所以要修改http的编码方式，即在application.properties中添加如下配置：

spring.http.encoding.force=true
spring.http.encoding.charset=UTF-8
spring.http.encoding.enabled=true
server.tomcat.uri-encoding=UTF-8
2. 将ueditor的整个资源放在static目录下；
3. 因为下载的时jsp版本的ueditor，而这个版本是依赖一个jsp文件运行的，所以这儿需要对ueditor的ueditor.config.js文件做修改，以使请求指向到指定的动作上，修改如下
//, serverUrl: URL + "jsp/controller.jsp"
, serverUrl:"/admin/config"
4. 在AdminController中添加config动作

 @RequestMapping(value="/config")

 @ResponseBody

 public String config(String action, HttpServletRequest request, HttpServletResponse response) throws Exception {

     if("config".equals(action)) {

         File resource = ResourceUtils.getFile("classpath:config.json");

         String str = StringUtil.ReadFile(resource, "GB2312");

         return str;

     } else if("uploadimage".equals(action)) {

         StandardMultipartHttpServletRequest multipartRequest = (StandardMultipartHttpServletRequest)request;

         if(multipartRequest != null) {

             MultipartFile file = multipartRequest.getFile("upfile");

             UploadState state = new UploadState();

             String url = UploadUtil.imgUpLoad(file);

             state.setUrl(url);

             state.setState("SUCCESS");

             state.setOriginal(file.getName());

             state.setType(url.substring(url.lastIndexOf('.')));

             return JsonUtil.toJson(state);

         }

     }

     return "";

 }

AdminController

因为这儿主要是用到了ueditor的图片上传功能，而这样也就只用关心ueditor的配置请求和上传图片请求，所以根据action参数的值，如果是config就表示ueditor请求获取配置信息，这样就直接从后台读取config.json的内容返回给前台即可；如果是uploadimage，则是上传请求，这样就要处理文件的上传，然后返回UploadState对象对应的json即可，如此就完成了ueditor的配置和上传图片的功能；
5. 添加ArticleController，响应文件上传：

 package com.lvniao.blog.admin.controller;

 import java.util.Date;

 import javax.servlet.http.HttpSession;

 import org.springframework.beans.factory.annotation.Autowired;

 import org.springframework.stereotype.Controller;

 import org.springframework.ui.Model;

 import org.springframework.web.bind.annotation.RequestMapping;

 import org.springframework.web.bind.annotation.ResponseBody;

 import com.lvniao.blog.mapper.ArticleMapper;

 import com.lvniao.blog.model.Article;

 import com.lvniao.blog.model.User;

 import com.lvniao.blog.util.Constant;

 import com.lvniao.blog.util.JsonUtil;

 @Controller

 @RequestMapping("/article")

 public class ArticleController {

     @Autowired

     private ArticleMapper articleMapper;

     @RequestMapping("/")

     public String index(Model model) {

         return "article/index";

     }

     @RequestMapping("/add")

     public String add() {

         return "article/add";

     }

     @RequestMapping("/addarticle")

     public String addArticle(Article article, HttpSession session) {

         article.setCreateTime(new Date());

         article.setAuthor((User)session.getAttribute(Constant.CurrentUser));

         articleMapper.insertArticle(article);

         return "article/add";

     }

     @RequestMapping(value="/category", produces="application/json;charset=utf-8")

     @ResponseBody

     public String category() {

         return JsonUtil.toJson(articleMapper.getCategorys());

     }

 }

ArticleController

6 添加文件上传页面

 <!DOCTYPE html>

 <html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"

       xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

 <head>

     <title>riddle</title>

     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

     <link rel="stylesheet" th:href="@{/css/base.css}"/>

     <link rel="stylesheet" th:href="@{/css/font-awesome.css}"/>

     <link rel="stylesheet" th:href="@{/css/login.css}"/>

     <link rel="stylesheet" th:href="@{/css/form.css}"/>

     <script th:src="@{/js/jquery-3.2.1.js}"></script>

     <script type="text/javascript" th:src="@{/layui/layui.js}"></script>

     <script type="text/javascript" th:src="@{/layui/layui.all.js}"></script>

     <script type="text/javascript" th:src="@{/js/form.js}"></script>

     <script>

         $(function(){

             $.ajax({

                 url:'/article/category',

                 success:function(data){

                     $("#category").html("");

                     for(var i in data){

                         var content = '<option value="' + data[i].id + '">' + data[i].name + '</option>';

                         $("#category").append(content);

                     }

                 }

             })

             $("#btnOk").click(function(){

                 var content = UE.getEditor('editor').getContent();

                 $.ajax({

                     url:'/article/addarticle',

                     type:"post",

                     data:getArticleData(),

                     success:function(data){

                         close();

                     }

                 })

             })

         });

         function getArticleData(){

             var res = {};

             res.name = $("#name").val();

             res.content = UE.getEditor('editor').getContent();

             res.summary = UE.getEditor('editor').getContentTxt().substr(0, 500);

             var radio = $("input[name='first']:checked");

             if(radio.length > 0){

                 res.first = $("input[name='first']:checked").val();

             } else {

                 res.first = false;

             }

             radio = $("input[name='publiz']:checked");

             if(radio.length > 0){

                 res.publiz = $("input[name='publiz']:checked").val();

             } else {

                 res.publiz = false;

             }

             res["category.id"] = $("#category").val();

             return res;

         }

     </script>

     <script th:src="@{/js/jquery-3.2.1.js}"></script>

     <script type="text/javascript" charset="gbk" th:src="@{/ueditor/ueditor.config.js}"></script>

     <script type="text/javascript" charset="gbk" th:src="@{/ueditor/ueditor.all.min.js}"> </script>

     <script type="text/javascript" charset="gbk" th:src="@{/ueditor/lang/zh-cn/zh-cn.js}"></script>

 </head>

 <body>

     <div class="lv-form-container">

         <div class="lv-control-row">

             <div class="lv-label">标题</div>

             <input type="text" id="name" class="lv-control"/>

         </div>

     </div>

     <div>

         <script id="editor" type="text/plain" style="width:95%;height:450px;margin:0 auto;"></script>

     </div>

     <div class="lv-control-row">

         <div class="lv-label">是否公开</div>

         <input type="radio" name="publiz" class="lv-control" style="width:25px;" value="true"/><span>公开</span>

         <input type="radio" name="publiz" class="lv-control" style="width:25px;"  value="false"/><span>私密</span>

     </div>

     <div class="lv-control-row">

         <div class="lv-label">是否优先</div>

         <input type="radio" name="first" class="lv-control" style="width:25px;" value="true"/><span>是</span>

         <input type="radio" name="first" class="lv-control" style="width:25px;"  value="false"/><span>否</span>

     </div>

     <div class="lv-control-row">

             <div class="lv-label">文章类别</div>

             <select class="lv-control" id="category">

             </select>

         </div>

     <div class="lv-form-container" style="margin-bottom:10px;" id="btns">

         <div class="lv-control-row">

             <div class="lv-btn" id="btnCancel">取消</div>

             <div class="lv-btn" id="btnOk">发布</div>

         </div>

     </div>

 <script type="text/javascript">

     var ue = UE.getEditor('editor');

 </script>

 </body>

 </html>

add.html

7. 验证上传

如上边完成了文件上传功能。其中为实现ueditor上传功能添加了写代码，下载路径为：https://pan.baidu.com/s/1x0L1hB5v6XOpQaB8zZL59Q，密码：l7q9。

巴特西

8. 使用ueditor添加文章

最新文章

热门文章