Wang Editor 富文本编辑器

wangEditor 简介

轻量级 web 富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器。

官网：http://www.wangEditor.com

文档：http://www.kancloud.cn/wangfupeng/wangeditor3/332599

源码：http://github.com/wangfupeng1988/wangEditor

页面引入

<link href="https://cdn.bootcss.com/wangEditor/3.1.1/wangEditor.css" rel="stylesheet">

<script src="https://cdn.bootcss.com/wangEditor/3.1.1/wangEditor.min.js"></script>

在放编辑器的地方 写入div并初始化即可出现编辑器

<div id="editor">
    //给编辑器赋初始内容
    ${item.itemDesc.itemDesc} 
</div>

Wang Editor初始化以及配置的抽取

var WangEditor=function () {
    //初始化WangEditor编辑器 第一个参数为上面编辑器div的id,来初始化编辑,第二个参数为表单项id,用于表单项赋初始值以及编辑器内容改变后表单项的值也随着改变
    var init=function (editorId,descId) {
        var E = window.wangEditor;
        var editor = new E('#'+editorId);
        // 配置服务器端地址(上传文件的请求地址,可同时上传多个)
        editor.customConfig.uploadImgServer = '/upload';
        //配置参数别名(上传文件的别名 用于服务端接收参数时)
        editor.customConfig.uploadFileName = 'editorFileName';
        // 编辑器变化之后事件  html为编辑器内容 赋值给表单项
        editor.customConfig.onchange = function (html) {
            $("#"+descId).val(html);
        };
        //启用Wang Editor
        editor.create();
        //取编辑器初始内容用于给表单项赋初始值 直接在表单写value=... 会页面出现多余的字。。
        $("#"+descId).val(editor.txt.text());
    };

    return{
        init:function (editorId,descId) {
            init(editorId,descId);
        }
    }
}();

文件上传 Example

服务器端需要返回给前端的数据以及格式：

{
    // errno 即错误代码，0 表示没有错误。
    //       如果有错误，errno != 0，可通过下文中的监听函数 fail 拿到该错误码进行自定义处理
    "errno": 0,

    // data 是一个数组，返回若干图片的线上地址
    "data": [
        "图片1地址",
        "图片2地址",
        "……"
    ]
}

服务器端代码 Example(Dropzone部分可忽略---即第一个参数等部分)

@Controller
public class UploadController {
    //保存文件的目录
    private static final String FILE_UPLOAD_PATH = "static" + File.separator + "upload";
    /**
     * 图片上传
     * @return
     */
    @ResponseBody
    @RequestMapping(value = "/upload")
    public Map<String, Object> upload(MultipartFile uploadFile,MultipartFile[] editorFileName,HttpServletRequest request) throws IOException {
        String path=null;
        Map<String,Object> map= Maps.newHashMap();
        //DropZone上传
        if(uploadFile!=null){
            path = getString(uploadFile, request);
            map.put("path",path);
        }
        //Wang Editor上传
        else{
            List<String> paths = Lists.newArrayList();
            for (MultipartFile editorFile : editorFileName) {
                path = getString(editorFile, request);
                paths.add(path);
            }
            map.put("errno",0);
            map.put("data",paths);
        }
        return map;
    }

    private String getString(MultipartFile uploadFile, HttpServletRequest request) throws IOException {
        //获取upload目录在服务器的绝对路径
        String realPath = request.getServletContext().getRealPath(FILE_UPLOAD_PATH);
        File file=new File(realPath);
        if(!file.exists()){
            file.mkdirs();
        }
        //文件名
        String fileName=uploadFile.getOriginalFilename();
        //保存的文件名
        String saveFileName= UUID.randomUUID().toString().replaceAll("-","")+fileName;
        file=new File(file, saveFileName);
        //保存文件
        uploadFile.transferTo(file);
        //将图片绝对路径返回给前端
        return String.format("%s://%s:%s/%s/%s", request.getScheme(),request.getServerName(),request.getServerPort(),FILE_UPLOAD_PATH,saveFileName);
    }
}