wangEditor

　　富文本编辑器，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

调试阶段推荐使用方式１中的未压缩版本，因为如果出现问题也好调试和查找．
下载后将目录里的wangEditor.js放入工程目录中．只需要这个文件，其他的不需要．

我放在webapp下的wangEditor路径下．

前端配置

引入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>wangEditor</b> 富文本编辑器</p>
</div>

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

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

js文件编写

$(function(){

    var E = window.wangEditor;
    //这里的id为<div id="editor"中的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发送给服务端　，然后服务端以Ｓtring接收，保存到数据库．
         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<MultipartFile>进行接收
    //返回的是一个Ｄto类，后面会说明，使用@ResponseBody会将其转换为Ｊson格式数据
    public ImgResultDto uploadEditorImg(@RequestParam("img") List<MultipartFile> 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<MultipartFile> list,
            String UploadAbsolutePath,
            String UploadRelativePath,
            int commodityId);
}

服务层创建Ｓervice接口实现类

这里需要注意的是保存地址，我是保存在项目路径下，有的会保存在文件系统根目录下，比如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<MultipartFile> 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);
            //返回Ｄto
            return imgResultDto;
        } catch (Exception e) {
            // TODO: handle exception
            e.printStackTrace();
            return imgResultDto;
        }

    }

}

Dto编写

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

public class ImgResultDto<T> {

    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,包括前端配置和后端处理．仅说明其简单的用法，业务也未考虑的很周详．更多功能扩展请看官方的说明．
　　项目的完整程序请看蓝莓商城项目，后面我会陆续完善．