wangeditor使用以及读取本地文件错误解决（思想教训深刻啊）

由于项目需要富文本编辑器来设计网站后台，所以选择了wangeditor富文本编辑器。

一、生成富文本编辑器

<div class="formDiv">
<h3>内容</h3>
<div style="width: 100%;max-width: 1000px;margin-left: 30px;">
<div id="div1" style="height: 400px; max-height: 500px;">
</div>
</div>
</div>

var editor = new wangEditor('div1');
editor.config.menus = [
        'source',
'bold',
'underline',
'italic',
'strikethrough',
'eraser',
'forecolor',
'bgcolor',
'|',
'quote',
'fontfamily',
'fontsize',
'head',
'unorderlist',
'orderlist',
'alignleft',
'aligncenter',
'alignright',
'|',
'link',
'unlink',
'table',
'img',  //配置上上传图片按钮
'|',
'undo',
'redo'
];
//修改了源码不单独上传，但必须配置路径才能显示上传按钮
editor.config.uploadImgUrl = 'TbWebConsultManageActionAjax_upload.action';    //点击上传图片以后往后台存储图片，并返回回调路径（本地路径、网络路径、项目路径，也可以是一个action请求）
editor.config.uploadImgFileName = 'consult';   //接收文件的name域，后台接收的临时文件   File    fileName fileContentType，跟传统的上传文件一样
editor.config.hideLinkImg = true;
editor.create();

二、点击上传接收文件

    public void upload() throws Exception{
        ActionContext.initialize(ServletActionContext.getRequest(),
                ServletActionContext.getResponse());
        if(null !=consult){
            String[] substr = consultFileName.split("\.");
            storageName = UUIDGenerator.getUUID()+"."+substr[substr.length-1];
            FileUtils.saveFile(consult,FilePath.WEBSITE_CONSULT, storageName);
        }
        System.out.println("================================================================");
        System.out.println(FilePath.WEBSITE_CONSULT + File.separator + storageName);
       
//        ServletActionContext.getResponse().getWriter().write("http://localhost:8088/project/upload/AOP.png");
//        ServletActionContext.getResponse().getWriter().write(FilePath.WEBSITE_CONSULT + File.separator + storageName);

 ServletActionContext.getResponse().getWriter().write("TbWebConsultManageActionAjax_getImg.action?storageName="+storageName);
    }

三、用流的方式读取文件

public void getImg() throws Exception{
        FileInputStream fis = null;
        BufferedInputStream bis = null;
        OutputStream os = null;
        try{
            fis = new FileInputStream(FilePath.WEBSITE_CONSULT+File.separator+storageName);
            bis = new BufferedInputStream(fis);
            os = this.getHttpResponse().getOutputStream();
            int len =0;
            byte[] buf = new byte[4096];
            while ((len = fis.read(buf)) > 0) {
                os.write(buf,0,len);
            }
        }catch(Exception e){
            throw e;
        }finally{
            try{
                if(os != null){
                    os.flush();
                    os.close();
                }
                if(bis != null){
                    bis.close();
                }
                if(fis != null){
                    fis.close();
                }
            }catch(Exception e){
                throw e;
            }
        }
    }

四、遇到的问题

第一、在用wangeditor开发图片的时候，受//修改了源码不单独上传，但必须配置路径才能显示上传按钮    项目经理这句话的影响，一直以为配置了

editor.config.uploadImgUrl = 'TbWebConsultManageActionAjax_upload.action'; 这个上传路径才能出来上传按钮，最后看文档才知道上传按钮时需要配的'img',  //配置上上传图片按钮。 这个上传路径只不过是点

击上传后发的一个请求（servlet或者action）汗，自己学艺不精。

第二、在上传文件后，需要返回一个返显图片路径或者说请求，一开始我是返显的本地路径，返回来这个本地，

即ServletActionContext.getResponse().getWriter().write(FilePath.WEBSITE_CONSULT + File.separator + storageName); 

但是在返显图片的过程中会出现错误：Not allowed to load local resource: file:///D:/MftccFundSystemFiles/website/consult/830f674b6c55fe6e0a7cb1b1dd686e2e.png，找

文档发现浏览器为了安全起见，不允许直接访问本地文件，需要在tomcat中加一个虚拟目录：

解决方案：

<Host appBase="webapps" autoDeploy="true" name="localhost" unpackWARs="true" xmlNamespaceAware="false" xmlValidation="false">
      <Context path="/"      docBase="D:MftccFundSystemFileswebsiteconsult" debug="0" reloadable="true"/>
      <Context docBase="fund" path="/fund" reloadable="false" source="org.eclipse.jst.jee.server:fund"/>

</Host>

在tomcat的server.xml中加上这句话，指定本地文件的目录。在访问的时候直接写相对路径。OK。问题解决（直接配置项目路径是可以直接访问的）

图片返显到了富文本编辑器中；

第三：这么做下来被项目经理一顿批，说这样的怎么能从本地路径中读取文件呢，如果不在同一个服务器上怎么办。哎，自己考虑问题不全面啊。于是接着改成请求的方式：

ServletActionContext.getResponse().getWriter().write("TbWebConsultManageActionAjax_getImg.action?storageName="+storageName);

所以总结下来，系统访问本地路径一定要用流的方式来做。

五、总结

wangEditor富文本编辑器上传图片的道理其实很简单，就是把图片上传到你指定的位置，然后你返回给wangEditor一个路径，wangEditor会生成一个img标签存储到数据

库中。

<img src="TbWebConsultManageActionAjax_getImg.action?storageName=eb7584b26db0d6e63a04e584eb9fa10b.png" alt="secondarytile" style="max-width:100%;">

然后在编辑器中显示出图片时，会去找src路径的图片。

最后

以上就是优雅书包为你收集整理的wangeditor使用以及读取本地文件错误解决（思想教训深刻啊）的全部内容，希望文章能够帮你解决wangeditor使用以及读取本地文件错误解决（思想教训深刻啊）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。