wangeditor2在struts2使用和上传图片

最近用shh框架写了一个小项目，所以选择了wangeditor2编辑器，然而因为以前没接触过，遇到了一些小问题，下面我来说说我遇到的问题，（我用的版本2，因为版本2基础功能要多一些，比版本1成熟，比版本3基础功能要多一些，当然可以自己配置功能，版本2和版本3的写法有所不同要注意，要用的话，我推荐先看看版本2的文档，再去看版本3的文档）

一.（配置显示富文本）

1.下载（https://github.com/wangfupeng1988/wangEditor/releases）这里提供了多个版本下载。

2.选取文件     版本2选择dist文件夹，版本3选用release文件夹

3.引入     版本2在项目中导入dist文件下的所有文件后，在页面要引入

<link rel="stylesheet" type="text/css" href="../css/wangEditor.min.css"><div id="editor"></div>                

 <script type="text/javascript" src="../jquery-1.10.2.min.js"></script>    <script type="text/javascript" src="../wangEditor.min.js"></script>    <script type="text/javascript">        var E = window.wangEditor        var editor = new E('editor')                    editor.config.uploadImgUrl = '${rootPath}manage/StockDetailsAction_uploadImg'//这里是Action中的处理方法        editor.config.uploadImgFileName = 'myFileName'    //给上传的本地图片文件命名的统一名称        editor.create()        </script>

版本3在项目中要导入release文件下的所有文件，在页面引入

<div id="editor"></div>

<script type="text/javascript" src="/wangEditor.min.js"></script>    <script type="text/javascript">        var E = window.wangEditor        var editor = new E('#editor')        // 或者 var editor = new E( document.getElementById('#editor')     editor.customConfig.uploadImgServer='${rootPath}manage/StockDetailsAction_uploadImg'//这里是Action中的处理方法     editor.customconfig.uploadFileName = 'myFileName'    //给上传的本地图片文件命名的统一名称  editor.create()</script>

二.（本地图片上传）

4.在struts.xml中配置临时保存文件夹，value值可以自己设定

<constant name="struts.multipart.saveDir" value="/temp"/>

5.Action本地的处理

public class StockDetailsAction extends BaseAction{private File myFileName;public File getMyFileName() {return myFileName;}public void setMyFileName(File myFileName) {this.myFileName = myFileName;}public void uploadImg() throws Exception{HttpServletRequest req2 = ServletActionContext.getRequest(); HttpServletResponse res2 = ServletActionContext.getResponse();        String name=myFileName.getName();        // 提取文件拓展名        String fileNameExtension = name.substring(name.indexOf("."), name.length() - 1);        // 生成实际存储的真实文件名        String realName = UUID.randomUUID().toString() + fileNameExtension;        // 图片存放的真实路径        String realPath = req2.getServletContext().getRealPath("/uploadImg/source") + "/" + realName;        // 将文件写入指定路径下        InputStream in = new FileInputStream(myFileName);        File uploadFile = new File(realPath);OutputStream out = new FileOutputStream(uploadFile);byte[] buffer = new byte[1024 * 1024];int length;while ((length = in.read(buffer)) > 0) {out.write(buffer, 0, length);}in.close();out.close();                // 返回图片的URL地址        res2.getWriter().write(req2.getContextPath() + "/uploadImg/source/" + realName);}}

我只理解到这里，我去网上搜它的图片上传，没找到有很大帮助的，所以写了这个，我还有很多不懂得地方，需要去学习，如果有错误，望各位评论指正

三.（获得富文本编辑内容，并以表单提交到后台储存到数据库）

<script type="text/javascript">     function modifyContent() {                 var content = document.getElementById("content");                        content.value = editor.$txt.html();//把编辑器中的值赋给被隐藏的textarea,由后台获取               //版本3 content.value = editor.txt.html();//把编辑器中的值赋给被隐藏的textarea,由后台获取   }</script> 

<div>   <form action="" method="post" onsubmit="modifyContent()">      <textarea rows="5" cols="35" name="details.origins" style="display:none;" id="content"></textarea><br>      <div id="editor" style="width:800px;height:400px;"></div> 

<script type="text/javascript" src="../js/lib/jquery-1.10.2.min.js"></script>      <script type="text/javascript" src="../js/wangEditor.min.js"></script>      <script type="text/javascript">        var E = window.wangEditor       var editor = new E('editor')       editor.config.uploadImgUrl = '${rootPath}manage/StockDetailsAction_uploadImg'       editor.config.uploadImgFileName = 'myFileName'       editor.create()        editor.$txt.html('${el表达式}')       //版本3 editor.txt.html('${el表达式}')      </script> 

 <input type="submit" value="修改" style="width:80px;">   </form>  </div></body>

这样就可以了，可以传递到后台，有的时候富文本编辑器无法显示，因为获取的数据库内容有可能和单引号匹配为其他字符，无法显示，我还有很多不懂得地方，需要去学习，如果有错误，望各位评论指正