使用wangEditor实现富文本编辑(后端为Java)

  富文本编辑器,Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器.
CSDN的markdown编辑器便是一种富文本编辑器.

  蓝莓商城商品详情这一部分的编辑需要使用富文本编辑器.本来想使用百度的ueditor的,但是弄了好久依然还是有问题.所以就放弃了.ueditor配置确实比较复杂,官方的文档也没有很好的说清楚,错误提示不够明了,出错时未提示具体的原因.

  最后找到这个wangEditor.相比ueditor,配置更加简单,使用更加方便.其功能虽不及ueditor多,但是应付一般的需求足够了.
 

流程说明


 由于对于图片上传整个流程比较复杂,所以本文仅对其进行说明.
 图片上传的流程是,当页面选择图片后,将会创建XMLHttpRequest请求,将图片数据发送给服务端,服务端接收后将图片保存到本地,再将图片路径返回给客户端,客户端接收到图片路径后,创建 元素,并将图片路径赋给src,最后再把该元素插入到编辑器中.
 

 // 定义 xhr 发送请求给服务端
  var xhr = new XMLHttpRequest();
   xhr.open('POST', uploadImgServer);

客户端配置说明

下载

直接下载:https://github.com/wangfupeng1988/wangEditor/releases
使用npm下载:npm install wangeditor (注意 wangeditor 全部是小写字母)
使用bower下载:bower install wangEditor (前提保证电脑已安装了bower)
使用CDN://unpkg.com/wangeditor/release/wangEditor.min.js

调试阶段推荐使用方式1中的未压缩版本,因为如果出现问题也好调试和查找.
下载后将目录里的wangEditor.js放入工程目录中.只需要这个文件,其他的不需要.
使用wangEditor实现富文本编辑(后端为Java)_第1张图片
我放在webapp下的wangEditor路径下.
使用wangEditor实现富文本编辑(后端为Java)_第2张图片

前端配置

引入js文件
contextPathOfStatic这里是我的项目路径下的static文件夹:http://localhost:8080/lanmei-os/static

<script type="text/javascript" src="${contextPathOfStatic}/wangEditor/wangEditor.js">script>

jsp页面添加

<div id="editor">
 
   <p>欢迎使用 <b>wangEditorb> 富文本编辑器p>
div>

这里我创建3个按钮进行测试

<button id="editorSetBtn">设置内容button>
<button id="editorGetBtn1">获取内容1button>
<button id="editorGetBtn2">获取内容2button>

js文件编写

$(function(){

    var E = window.wangEditor;
    //这里的id为
var editor = new E('#editor'); // 配置服务器端地址,也就是controller的请求路径,不带项目路径,前面没有/ editor.customConfig.uploadImgServer = 'commodity/upload/editor/img'; //配置属性名称,绑定请求的图片数据 //controller会用到,可以随便设置,但是一定要与controller一致 editor.customConfig.uploadFileName = 'img'; //创建编辑器 editor.create(); $("#editorSetBtn").click(function(){ //这是设置编辑器内容 editor.txt.html("dsafdfadsfdafdsfds"); }) $("#editorGetBtn1").click(function(){  //获取编辑器的内容,带样式  //一般使用这个获取数据,通过ajax发送给服务端 ,然后服务端以String接收,保存到数据库. alert(editor.txt.html()); }) $("#editorGetBtn2").click(function(){     //获取编辑器的内容,不带样式,纯文本 alert(editor.txt.text()); }) })

程序加载完之后页面就会出现编辑器.
这里写图片描述

客户端设置完成

服务端配置

WEB层创建Controller

@Controller
@RequestMapping(path="/commodity")
public class CommodityController {
    @Autowired
    AddCommodityService   addCommodityService;
    @Autowired
private static final Logger logger = LoggerFactory.getLogger("CommodityController.class");
    @ResponseBody
    @RequestMapping(path="/upload/editor/img")
    //RequestParam中的属性名称要和前端定义的一致,上面说明了.所以写"img"
    //使用List进行接收
    //返回的是一个Dto类,后面会说明,使用@ResponseBody会将其转换为Json格式数据
    public ImgResultDto uploadEditorImg(@RequestParam("img") List list) {    
        //这里是我在web中定义的两个初始化属性,保存目录的绝对路径和相对路径,你们可以自定义    
        String imgUploadAbsolutePath = request.getServletContext().getInitParameter("imgUploadAbsolutePath");
        String imgUploadRelativePath = request.getServletContext().getInitParameter("imgUploadRelativePath");

      //服务曾处理数据,返回Dto
        ImgResultDto imgResult
                = addCommodityService.upLoadEditorImg(list, imgUploadAbsolutePath, 
                                                imgUploadRelativePath,1);
            return imgResult;           
    }

}

服务层创建Service类

服务层创建Service接口类

public interface AddCommodityService {
    /**
     * 上传商品图片
     * @param files
     */
    ImgResultDto upLoadEditorImg(List list,
            String UploadAbsolutePath,
            String UploadRelativePath,
            int commodityId);
}
服务层创建Service接口实现类

这里需要注意的是保存地址,我是保存在项目路径下,有的会保存在文件系统根目录下,比如windows可能是D://xxx/xx,linux是/xx/xx,那么返回给客户端的地址就会不一样.需要根据实际情况设置

public class AddCommodityServiceImpl extends BaseService  implements AddCommodityService{
    @Autowired
    private CommodityMapper commodityMapper;
    @Autowired
    CommodityImageMapper commodityImageMapper;
    @Autowired
    private DruidDataSource dataSource; 
    @Autowired
    private SqlSessionFactoryBean sqlSessionFactory;
/**
     * 图片上传处理
     */
    @Override
    public ImgResultDto upLoadEditorImg(List list,
            String UploadAbsolutePath,
            String UploadRelativePath,
            int commodityId) {

        //获取当前登录的管理员
        //CmsAdmin admin = (CmsAdmin) SessionUtils.getSession("currenLogintAdmin");
        CmsAdmin admin = new CmsAdmin("测试用户");
        //工程绝对路径
        String imgUploadAbsolutePath = UploadAbsolutePath;
        //工程相对路径
        String imgUploadRelativePath = UploadRelativePath;
        logger.debug("files.length = " + list.size() );
        ImgResultDto imgResultDto = new ImgResultDto();
        //这里定
        String[] urlData = new String[5];
        int index = 0;
        try {
            for(MultipartFile img : list) {
              //获取原始文件名,比如你上传的是 图片.jpg,则fileName=图片.jpg
                String fileName = img.getOriginalFilename();
                if(fileName == "") {
                    continue;
                }
                logger.debug("file  name = " + fileName);
                String finalPath = imgUploadAbsolutePath + imgUploadRelativePath;  //绝对路径 + 相对路径
                //为了保证文件名不一致,因此文件名称使用当前的时间戳和4位的随机数,还有原始文件名组成
                //觉得实际的企业开发不应当使用原始文件名,否则上传者使用一些不好的名字,对于下载者就不好了.
                //这里为了调试方便,可以加上.
                String finalFileName =  (new Date().getTime()) + Math.round(Math.random() * 1000)  //文件名动态部分
                                    + fileName; //文件名 原始文件名        
                File newfile = new File( finalPath + finalFileName);
                logger.debug("创建文件夹 = " + newfile.mkdirs() +  "  path = " + newfile.getPath());
                logger.debug("" + newfile.getAbsolutePath());
                //保存文件到本地
                img.transferTo(newfile);
                logger.debug("上传图片成功");
                //持久化到数据库
                CommodityImage commodityImage = new  CommodityImage(commodityId, imgUploadRelativePath,
                        finalFileName,(byte)(0),admin.getLoginJobnum(), new Date());

                commodityImageMapper.insert(commodityImage);
                logger.debug("数据库写入图片成功");  
                //这里的路径是项目路径+文件路径+文件名称
                //这么写不是规范的做法,项目路径应是放在前端处理,只需要发送相对路径和文件名称即可,项目路径由前端加上.
                urlData[index++] = "http://localhost:8080/lanmei-cms/"+imgUploadRelativePath + finalFileName;
                logger.debug("index = " + index 
                        + "  url = " + urlData[0]);
                //设置异常代号
                imgResultDto.setErrno(0);
            }
            imgResultDto.setData(urlData);
            //返回Dto
            return imgResultDto;
        } catch (Exception e) {
            // TODO: handle exception
            e.printStackTrace();
            return imgResultDto;
        }

    }

}

Dto编写

Dto 只是一个普通的pojo类,没有业务方法,只有属性和构造器,getter and setter.主要用于层间传输数据,更详细的说明自行百度.

public class ImgResultDto {

    private int  errno;//错误代码

    private String[] data;//存放数据
    //构造器
    //getter and setter

前端接收处理

添加 customInsert: function (insertImg, result, editor)这段程序
result是返回的json数据
因为上面只是上传了一张图片,保存在数组索引0里
因此通过下面获取图片地址.
var url = result.data[0];

    // 上传图片 hook 
    uploadImgHooks: {

        before: function before(xhr, editor, files) {
            // 图片上传之前触发

            // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
            // return {
            //     prevent: true,
            //     msg: '放弃上传'
            // }
        },
        success: function success(xhr, editor, result) {
            // 图片上传并返回结果,图片插入成功之后触发
            console.log("插入图片成功 success result = " + result.errno + "  path = " + result.data[0] );
        },
        fail: function fail(xhr, editor, result) {
            console.log(" fail result = " + result.errno + "  path = " + result.data[0] );
            // 图片上传并返回结果,但图片插入错误时触发
        },
        error: function error(xhr, editor) {
            // 图片上传出错时触发
            console.log("error result = " + result.errno + "  path = " + result.data[0] );
        },
        timeout: function timeout(xhr, editor) {
            // 图片上传超时时触发
            console.log("timeout result = " + result.errno + "  path = " + result.data );
        },

       // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式,可使用该配置 
        //--------------添加这段程序------------------
        customInsert: function (insertImg, result, editor) {
            // 图片上传并返回结果,自定义插入图片的事件(而不是编辑器自动插入图片!!!)
            // insertImg 是插入图片的函数,editor 是编辑器对象,result 是服务器端返回的结果

            // 举例:假如上传图片成功后,服务器端返回的是 {url:'....'} 这种格式,即可这样插入图片:

            //-----------修改这里------------------
            //获取返回的图片地址
            var url = result.data[0];

            insertImg(url);

            console.log("插入图片 url = " + url );
            // result 必须是一个 JSON 格式字符串!!!否则报错
        }
    },

    // 是否上传七牛云,默认为 false
    qiniu: false

};

完成!!!!!!!!!!!!!!!!!

总结

  本文说明了如何在Java WEB项目中使用富文本编辑器wangEditor,包括前端配置和后端处理.仅说明其简单的用法,业务也未考虑的很周详.更多功能扩展请看官方的说明.
  项目的完整程序请看蓝莓商城项目,后面我会陆续完善.

你可能感兴趣的:(Java,Web,蓝莓商城)