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

ASP.NET MVC5 网站开发实践(二) Member区域 - 添加文章
上次把架构做好了,这次做添加文章.添加文章涉及附件的上传管理及富文本编辑器的使用,早添加文章时一并实现. 要点: 富文本编辑器采用KindEditor.功能很强大,国人开发,LGPL开源,自己人的好东 ...
ECShop 添加文章时作者默认为当前登录用户
打开admin\article.php文件查找代码 $article['is_open'] = 1; 在下边添加代码 $article['author'] = $_SESSION['admin_na ...
WordPress主题制作教程10：添加文章类型插件Custom Post Type UI
下载 Custom Post Type UI>> 用Custom Post Type UI添加自定义文章类型对于新手来说最简单不过了,下载安装后,在插件栏启用一下,就可以开始添加文章类型了 ...
ueditor编辑文章时候，复制粘贴内容，原来的图片不能显示
ueditor编辑文章时候.当现有文章有图片的时候, 再复制粘贴文本进去的时候.里面的图片就不能显示了, 编辑器查看文章Html代码,图片路径显示为:src="http://localhos ...
Django：（博客系统）添加文章（中文）出现UnicodeEncodeError乱码
添加文章时出现了一个UnicodeEncodeError乱码问题在添加文章时,抛出了异常: 解决方案,修改manage.py(添加import sys reload(sys) sys.setdefa ...
dedecms添加文章时提示标题为空，编辑文章时编辑器空白的解决办法
dedecms添加文章时提示标题为空,编辑文章时编辑器空白的解决办法 dedecms出现这个问题与代码无关,主要是和PHP的版本有关,用的PHP5.4,更换成PHP5.2之后就不会有这个问题了. 问题 ...
用 Markdown 写作(一)——添加文章页内导航
Markdown 可以用更简化的标记来写文章,基本的语法可以参考Markdown 语法说明 (简体中文版). 我平时很少按照论文的写法去写博客,说来忏愧,因为很少写技术性的文章,最近看到百度百科和很多 ...
[python][django学习篇][11]后台admin用户登录博客，添加文章---这一章和博客首页设计没有关系
1 如果没有创建超级管理员账号,先要创建python manage.py createsuperuser 2 在admin后台注册模型(如果没有这一步,登录http://127.0.0.1:8000/ ...
DTCMS，添加文章时，内容中第一张图片作缩略图，并且等比例缩放图片
DTCMS,添加文章时,内容中第一张图片作缩略图 admin/article/article_edit.aspx.cs 导入: using System.Drawing;using System.Dr ...

随机推荐

Leetcode_257_Binary Tree Paths
本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/49432057 Given a binary tree, r ...
SoC嵌入式软件架构设计
内存是SoC(System on Chip,片上系统)集成设计的重要模块,是SoC中成本比重较大的部分.内存管理的软硬件设计是SoC软件架构设计的重要一环,架构设计师必须要在成本和效率中取得平衡,做到 ...
How--to-deploy-smart-contracts-on
The following smart contract code is only an example and is NOT to be used in Production systems. pr ...
PowerBI开发第十篇：R 脚本
R是一种专门用于数据分析和统计的脚本语言,广泛应用在每一个需要统计和数据分析的领域.PowerBI支持R脚本,只不过,PowerBI Desktop默认没有安装R.在使用R脚本之前,必须向PowerB ...
SNMP相关的RFC建议和链接
1. SNMP Books or Articleshttp://www.faqs.org/faqs/snmp-faq/part1/http://www.faqs.org/faqs/snmp-faq/p ...
前端技术之_CSS详解第四天
前端技术之_CSS详解第四天一.第三天的小总结盒模型box model,什么是盒子? 所有的标签都是盒子.无论是div.span.a都是盒子.图片.表单元素一律看做文本. 盒模型有哪些组成: wi ...
Day19 Django
老师代码博客: http://www.cnblogs.com/yuanchenqi/articles/7552333.html 上节内容回顾: class Book(models.Model): ti ...
Python-Web框架之 - 利用SQLALchemy创建与数据库MySQL的连接, 详解用Flask时会遇到的一些大坑 !
经过这个小项目算是对Django与Flask这两个web框架有了新的认识 , Django本身的轮子非常齐全 , 套路也很固定 , 新手在接触Django框架时 , 不会陷入到处找轮子的大坑 ; 那么 ...
Spring security在MS-SQL下的初始化脚本
-- create table users( -- username nvarchar(50) not null primary key, -- password nvarchar(50) not n ...
获取radio、select、checkbox标签选中的值
<input type="radio" id="radio1" name="radio"><label for=" ...

8. 使用ueditor添加文章

8. 使用ueditor添加文章的更多相关文章

随机推荐

热门专题