我的第一个网站——MISDream（二）：wangeditor的使用和图片上传

网站需要一个能够发布新闻的文字编辑器，经过朋友推荐，得知了wangeditor富文本编辑器，决定就用他了。

一，wangeditor的使用

其实wangeditor的文档还算挺简洁了，几步就可以使用上编辑器了

1. 下载：官网 http://www.wangeditor.com/或者直接去github下载最新的版本https://github.com/wangfupeng1988/wangEditor/releases
2. 引入：直接在jsp页面中引入wangedtior.js 
3. 使用：直接在script标签中引入一下代码的前两行和最后一行即可

<script type="text/javascript">
    var E = window.wangEditor;
    var editor = new E('#editorarea');
    //配置服务器地址
    editor.customConfig.uploadImgServer = 'file_upload.action';//上传图片用的action
    editor.customConfig.debug = location.href.indexOf('wangeditor_debug_mode=1') > 0;
    editor.customConfig.uploadFileName = 'upload';
    editor.create();
</script>

一些基本的操作都能使用了，但是会发现图片上传好像不能本地上传，因此我们要打开本地图片上传模式，在create之前，加上

editor.customConfig.uploadImgServer = 'file_upload.action'

这里需要指定你处理图片的action，直接写上action的全称即可。

然后我们可以打开debug模式

editor.customConfig.debug = location.href.indexOf('wangeditor_debug_mode=1') > 0;

再为上传的图片指定统一的文件名，相当于file标签中的name属性

editor.customConfig.uploadFileName = 'upload';

这样我们就大致设置好了编辑器，可以开始使用了！

二，处理图片

这里就和文件上传的步骤是一样的啦，参考上一篇博客的详细介绍即可。

*由于当时实现wangeditor上传图片的功能在先，所以这里贴的代码不是上一篇文件上传的代码，有些许不同，可能麻烦了一点，仅供参考

public class Uploadimg extends ActionSupport {
    private File upload;
    private String uploadFileName;
    private String uploadContentType;
    private String savePath;
    public File getUpload() {
        return upload;
    }
    public void setUpload(File upload) {
        this.upload = upload;
    }
    public String getUploadFileName() {
        return uploadFileName;
    }
    public void setUploadFileName(String uploadFileName) {
        this.uploadFileName = uploadFileName;
    }
    public String getUploadContentType() {
        return uploadContentType;
    }
    public void setUploadContentType(String uploadContentType) {
        this.uploadContentType = uploadContentType;
    }
    public String getSavePath() {
        HttpServletRequest request=ServletActionContext.getRequest();
        ServletContext servletContext=request.getSession().getServletContext();
//        return ServletActionContext.getServletContext().getRealPath(savePath);
        String wholepath=servletContext.getRealPath("/");
        int outindex=wholepath.indexOf("out");
        System.out.println(outindex);
        return wholepath.substring(0,outindex)+"web\\save";
    }
    public void setSavePath(String savePath) {
        this.savePath = savePath;
    }
    //处理wangeditor富文本编辑器上传的文件
    public String UploadByWangEditor() throws IOException {
        //文件名为空
        if (getUploadFileName()==null) {
            System.out.println("file is NULL");
            return null;
        }
        //输出文件信息
        System.out.println(savePath);
        System.out.println(getUploadFileName());
        System.out.println(getUploadContentType());
        //文件路径
        System.out.println(getSavePath());
        String filePath=getSavePath()+"\\"+getUploadFileName();
        System.out.println("路径"+filePath);
        //存储文件
        InputStream iStream=new FileInputStream(getUpload());
        OutputStream oStream=new FileOutputStream(filePath);
        byte buffer[]=new byte[1024];
        int len=0;
        while ((len=iStream.read(buffer))>0) {
            oStream.write(buffer, 0, len);
        }
        oStream.close();
        iStream.close();

        //获取当前项目地址
        HttpServletResponse response = ServletActionContext.getResponse();
        HttpServletRequest request = ServletActionContext.getRequest();
        String projectName = request.getContextPath();
        String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+projectName;
        String Imgpath=projectName+"/save/"+uploadFileName;
        System.out.println(Imgpath);
        //将图片信息以json返回给前端
        String data = "{errno: 0,data: ['" + Imgpath + "']}";//imgpath
        response.setContentType("text/text;charset=utf-8");
        //这里需要用JSONObject转一下String类型的数据，才能保证传回去的数据是json格式的
        JSONObject jsonObject = JSONObject.fromObject(data);
        //返回图片的URL地址
        response.getWriter().write(jsonObject.toString());
        return null;
    }

}