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 ...

随机推荐

总结一下 Spring的IOC、DI
国庆节刚过,应一些朋友的提问,总结一下Spring中IOC也即DI的通俗理解. 网友wm5920解释: IOC控制反转:说的是创建对象实例的控制权从代码控制剥离到IOC容器控制,实际就是你在xml文件 ...
The 2nd tip of DB Query Analyzer
The 2nd tip of DB Query Analyzer Ma Genfeng (Guangdong Unitoll Servi ...
为何我会喜欢封闭的apple？
原来本猫喜欢的手机是简单的塞班系统,nokia的E72i,超经典吧!就是最近都有把它充满电重新拿出来用的冲动呀.可惜无奈的是上面的应用太少呀!原来PC和笔记本装的是各种清一色的windows系统,从3 ...
Jhipster 学习（一）jhipster构建项目
如何安装jhipster 第一步:下载jdk 自己安装的1.8版本 (安装.环境变量配置略) 第二步:1.下载Eclipse (luna版 eclipse-4.4.1) 第三步:下载maven ( ...
Binary Tree Level Order Traversal II（层序遍历2）
Given a binary tree, return the bottom-up level order traversal of its nodes' values. (ie, from left ...
List内存分配
当采用默认构造函数List<int> value = new List<int>();实例化一个List<T>对象时,.Net Framework只是在内存中申请了 ...
Aptana下Django1.6以后的项目模板结构改造
Django1.6以后的manage.py放在项目包目录的根目录下,这种情况下在create app的app也在这个目录下面,由此可能导致app的名称有可能会和广大的内建包或者第三方包发生命名冲突,解 ...
Dubbo配置引发的一个问题--- Duplicate spring bean id
1.原因因项目业务需要,要调用RPC框架,项目原本已经依赖了很多RPC接口需要启动时加载,所以准备做成启动时不预加载. 就是在配置的时候加上check=false. 官方文档解释的作用,就是Dubb ...
c#学习笔记 day_one
C#学习笔记 day one Chapter 1 c#概述 1.1 c#概述 C#是微软设计的,简洁的,类型安全的,面向对象的语言.它以c/c++作为基础.它的开发环境是visual studio,最 ...
PHP_保留两位小数并且四舍五入(可用于精度计算)_保留两位小数并且不四舍五入
小数例子: PHP保留两位小数并且四舍五入 1 $n=0.1265489; 2 echo sprintf("%.2f", $n); // 0.13 大家可以看到我们用到了sprin ...

8. 使用ueditor添加文章

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

随机推荐

热门专题