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 ...
随机推荐
- linux内核中访问共享资源
访问共享资源的代码区域称为临界区,临时以某种互斥机制加以保护.中断屏蔽.原子操作 自旋锁和信号量是Linux设备驱动中可采用的互斥途径. 在单CPU范围内避免竞态的一种简单方法是在进入临界区之前屏蔽系 ...
- 恶补web之五:dhtml学习
dhtml是一种使html页面具有动态特性的艺术.对于多数人来说dhtml意味着html(html DOM),样式表和javascript的组合. dhtml不是w3c标准.dhtml指动态html, ...
- Fullpage.js全屏滚动jQuery插件
兼容性: 支持 IE8+ 及其他现代浏览器. 主要功能: 1.支持鼠标滚动: 2.支持前进后退键盘控制; 3.多个回调函数; 4.支持手机.移动设备; 5.支持窗口缩放自动调整; 6.可设置滚动宽度. ...
- FFPLAY的原理（六）
显示视频 这就是我们的视频线程.现在我们看过了几乎所有的线程除了一个--记得我们调用schedule_refresh()函数吗?让我们看一下实际中是如何做的: static void schedule ...
- MySQL 的索引优化
索引类似大学图书馆建书目索引,可以提高数据检索的效率,降低数据库的IO成本.MySQL在300万条记录左右性能开始逐渐下降,虽然官方文档说500~800w记录,所以大数据量建立索引是非常有必要的.My ...
- php插入mysql中文数据出现乱码
$con = mysqli_connect(DB_HOST, DB_USER, DB_PWD, $dbname) or die('数据库连接失败'); mysqli_set_charset($con, ...
- 使用Swashbuckle构建RESTful风格文档
本次和大家分享的是Swagger to WebApi的nuget包Swashbuckle:因为项目需要统一api文档的风格,并要支持多种开发语言(C#,java,python),所以首先想到的是swa ...
- JS实现数组去重的6种方法总结
方法一: 双层循环,外层循环元素,内层循环时比较值,如果有相同的值则跳过,不相同则push进数组. Array.prototype.distinct = function(){ var arr = t ...
- 基于Python的数据分析(3):文件和时间
在接下来的章节中,我会重点介绍一下我自己写的基于之前做python数据分析的打包接口文件common_lib,可以认为是专用于python的第三方支持库.common_lib目前包括文件操作.时间操作 ...
- C#学习笔记 day_three
C#学习笔记 day three Chapter 3 类型 3.3引用类型 引用类型的变量也成为对象,有六种类型:(1)对象类型 (2)字符串类型 (3)类类型 (4)数组类型 (5)接口类型 (6) ...