One：wangeditor编辑器完成文章编辑

 本文核心：引入wangeditor3富文本编辑器①实现对文章的添加②文章添加图片【图片上传到服务器】

 

这系列博客是记录自己做过项目学到知识。one、two代表项目编号。

 

前言：

后台管理系统

技术选型：ssm + easyui + ajax + js/jq + jsp + mysql + redis

工具版本：jdk1.8 + tomcat7/8 + mysql8.0.11 + idea2017 + spring4.1.13

项目规范：maven3.3.9 + git

 

 

一：wangeditor富文本编辑器的基本使用

 

 

关于这款富文本编辑器：https://www.kancloud.cn/wangfupeng/wangeditor3/332599     

学习重点：①创建wangEditor富文本编辑器 ②配置上传服务器信息  ③获取编辑器中的内容。

下面这段代码演示了前两条。【注意，注释信息】

    
欢迎使用 wangEditor 富文本编辑器

关于：如何获取文本编辑器中的内容

editor.txt.html()//html格式
editor.txt.text()//纯文本形式

 

二：SpringMVC接收文件【图片】

 

wangeditor要求图片上传后返回的数据格式【重点】

首先，我封装了一个对象作为返回值

public class RichText implements Serializable{
	private Integer errno;
	private List data;
	
	public RichText() {
	}
	
	public RichText(Integer errno, List data) {
		this.errno = errno;
		this.data = data;
	}
        //......省略get/set
}

 

Controller接收多个文件【图片】 注意注释，文件上传的细节默认读者已会。

@Controller
@RequestMapping("/rt")
public class RichTextController {
	
	@RequestMapping("/upload")
	public @ResponseBody RichText updateMorePic(@RequestParam("myFiles") MultipartFile[] myFiles, HttpSession session){
		
		RichText richText=new RichText();
		//获取文件的在服务器的磁盘路径
		String realPath=session.getServletContext().getRealPath("");
		String contextPath=realPath.substring(0,realPath.lastIndexOf("\\"));
		String uploadPath=contextPath.substring(0,contextPath.lastIndexOf("\\"))+"\\Upload";

		List list=new ArrayList();
		if(myFiles!=null && myFiles.length>0){
			try {
				for (MultipartFile myFile : myFiles) {
					String fileName= UUID.randomUUID().toString().replace("-","")+"."+ FilenameUtils.getExtension(myFile.getOriginalFilename());
					//将文件写入到服务器
					myFile.transferTo(new File(uploadPath+"\\"+fileName));
					String path="/cmfz/load/"+fileName;
					//将图片的访问路径加入集合中
					list.add(path);
				}
				//图片上传成功 返回0  图片路径集合。
				richText.setErrno(0);
				richText.setData(list);
			} catch (Exception e) {
				//若出现异常说明图片上传失败，返回1
				richText.setErrno(1);
			}
			
		}
		return richText;//返回上传结果
	}
	
}

 

三：EasyUI表单提交【编辑器文章内容作为额外参数提交】

 

Jsp页面效果图

这里要提醒的是：EasyUI的各种请求都是异步的方式。  

 

wangEditor的构建利用了div，使用JS渲染。我把编辑器的内容作为额外参数传递到了后台。【onSubmit】

JSP源码

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>




  文章标题：    



    文章作者：  



    文章状态：  
                            上架
                            下架
                            



    
欢迎使用 wangEditor 富文本编辑器




<%--按钮的渲染    添加文章  重置所有--%>

    创建文章
      
    easyui

Article我有对应的数据库实体

Controller的添加文章方法

	@RequestMapping("/addArticle")
	public @ResponseBody String addArticle(Article article){
		Integer number=articleService.addArticle(article);
		if(number>0){
			return "success";
		}else {
			return "failure";
		}
	}