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添加文章的更多相关文章

  1. ASP.NET MVC5 网站开发实践(二) Member区域 - 添加文章

    上次把架构做好了,这次做添加文章.添加文章涉及附件的上传管理及富文本编辑器的使用,早添加文章时一并实现. 要点: 富文本编辑器采用KindEditor.功能很强大,国人开发,LGPL开源,自己人的好东 ...

  2. ECShop 添加文章时作者默认为当前登录用户

    打开admin\article.php文件 查找代码 $article['is_open'] = 1; 在下边添加代码 $article['author'] = $_SESSION['admin_na ...

  3. WordPress主题制作教程10：添加文章类型插件Custom Post Type UI

    下载 Custom Post Type UI>> 用Custom Post Type UI添加自定义文章类型对于新手来说最简单不过了,下载安装后,在插件栏启用一下,就可以开始添加文章类型了 ...

  4. ueditor编辑文章时候，复制粘贴内容，原来的图片不能显示

    ueditor编辑文章时候.当现有文章有图片的时候, 再复制粘贴文本进去的时候.里面的图片就不能显示了, 编辑器查看文章Html代码,图片路径显示为:src="http://localhos ...

  5. Django：（博客系统）添加文章（中文）出现UnicodeEncodeError乱码

    添加文章时出现了一个UnicodeEncodeError乱码问题 在添加文章时,抛出了异常: 解决方案,修改manage.py(添加import sys reload(sys) sys.setdefa ...

  6. dedecms添加文章时提示标题为空，编辑文章时编辑器空白的解决办法

    dedecms添加文章时提示标题为空,编辑文章时编辑器空白的解决办法 dedecms出现这个问题与代码无关,主要是和PHP的版本有关,用的PHP5.4,更换成PHP5.2之后就不会有这个问题了. 问题 ...

  7. 用 Markdown 写作(一)——添加文章页内导航

    Markdown 可以用更简化的标记来写文章,基本的语法可以参考Markdown 语法说明 (简体中文版). 我平时很少按照论文的写法去写博客,说来忏愧,因为很少写技术性的文章,最近看到百度百科和很多 ...

  8. [python][django学习篇][11]后台admin用户登录博客，添加文章---这一章和博客首页设计没有关系

    1 如果没有创建超级管理员账号,先要创建python manage.py createsuperuser 2 在admin后台注册模型(如果没有这一步,登录http://127.0.0.1:8000/ ...

  9. DTCMS，添加文章时，内容中第一张图片作缩略图，并且等比例缩放图片

    DTCMS,添加文章时,内容中第一张图片作缩略图 admin/article/article_edit.aspx.cs 导入: using System.Drawing;using System.Dr ...

随机推荐

  1. 根据Facebook内存的管理使用，浅谈在iOS上自动检测内存泄漏问题

    分装库下载:https://github.com/facebook/FBMemoryProfiler FBMemoryProfiler类库使用教程:http://ifujun.com/fbmemory ...

  2. android https安全连接

    如果不需要验证服务器端证书,直接照这里做 [java] view plaincopy public class Demo extends Activity { /** Called when the  ...

  3. HFile

    HFile存储格式 HBase中的所有数据文件都存储在Hadoop HDFS文件系统上,主要包括两种文件类型: 1. HFile, HBase中KeyValue数据的存储格式,HFile是Hadoop ...

  4. OpenCV鼠标画图例程，鼠标绘制矩形

    鼠标画矩形: // An example program in which the // user can draw boxes on the screen. // /* License: Oct. ...

  5. obj-c编程09:块的语法

    在obj-c中,有一种和C截然不同的东西--块.块可以在外边定义,也可以在函数或方法内部定义,可以被赋值给一个变量,然后用该变量调用.默认情况下块对外部变量的访问只能读不能写,除非用__block显示 ...

  6. ruby技巧001:求md5散列

    ruby核心库中未包含md5之类的功能,不过在其标准库digest中可以方便的使用该功能: = Digest (from ruby core) ---------------------------- ...

  7. Java小技巧输出26个英文字母

    相信有的童鞋写到过与字母有关的小东西,是否有写过全部的字母呢?26个这么多字母,一个个打会疯掉.所有咱们可以用一个小技巧使用for循环帮我们把26个字母自动搞出来,大家来瞅一眼把! 使用Java遍历2 ...

  8. 合法的json数组字符串，转换json

    List list = JSON.parseArray("[{'id':1,'name':'a'},{'id':2,'name','b'}]", JSONObject.class) ...

  9. mybatis自我总结

    mybatis是一款优秀的持久层框架,它避免了JDBC代码.将SQL语句放在Java中以及结果集的处理.利于后期的维护.它将SQL语句放到XML文件中. mybatis有sqlsessionfacto ...

  10. Python-Web框架之 - 利用SQLALchemy创建与数据库MySQL的连接, 详解用Flask时会遇到的一些大坑 !

    经过这个小项目算是对Django与Flask这两个web框架有了新的认识 , Django本身的轮子非常齐全 , 套路也很固定 , 新手在接触Django框架时 , 不会陷入到处找轮子的大坑 ; 那么 ...