wangeditor2在struts2使用和上传图片

这篇博客写的较早，当初有好多不懂得地方,所以写的不够简洁明了，后来再用的时候，比较熟练了，所以又写了wangEditor2和3本地上传图片

wangEditor2上传本地图片       wangEditor3上传本地图片

最近用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>

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