AJAX+Struts2+xhEditor整合与实现

□程裕强，张茂胜，周国军

（玉林师范学院 数学与信息科学学院，广西 玉林 537000）

1 引言

在Web开发中，在线编辑器是常用的图文编辑工具.随着信息社会发展，人们越来越多需要在Web进行图文编辑，比如商品描述、博文编辑、邮件编辑、新闻发布、论坛发帖以及相关回复评论等等，需要类似于Office的Word图文编辑功能.在线编辑器应运而生，较为成熟的在线编辑器产品有FreeTextBox、CKEditor、FCKEditor、uedtior、KindEditor等等.

在Java Web开发中，将Struts2框架与在线编辑器整合是困难的，特别是基于AJAX异步传输的Struts2框架与在线编辑器整合实现文件上传功能，这是复杂的.FCKeditor[1]虽然是一款功能强大的在线文本编辑器，在Java Web开发中应用较多.但是FCKeditor与Struts2框架整合相对复杂，不易理解.在众多的在线编辑器中，xhEditor[2]是一款国人开发的基于jQuery的在线可视化HTML编辑器.

xhEditor在线编辑器提供了丰富的文件上传接口，但xhEditor本身没有实现文件上传功能，需要第三方按照自己的需求去实现.现在，互联网上可以较为方便地找到在线编辑器xhEditor在PHP和ASP.NET应用开发中文件上传代码实现[3].但是在Java Web开发中，特别是在与Struts2框架整合时，很难找到成熟的Struts2+xhEditor整合的文件上传代码模块.针对这一常见需求，本文提出并设计实现了一种基于Ajax+Struts2的xhEditor文件上传模块，并且源代码开源，供大家参考.

2 框架整合

Struts2是现在主流的Java Web MVC框架[4].要实现Struts2与xhEditor的整合，首先需要创建一个Struts2应用项目（Java Web项目[5]），并将Struts2最小Jar包集[6]复制到对应项目的lib目录下面，其次将xhEditor和jquery相关的框架文件复制到项目对应的Web目录中.这是Struts2与xhEditor的整合工作的基础.下面分前台页面和后台实现两部分来实现Struts2与xhEditor的整合.

2.1 前台页面

创建一个普通的JSP页面，并在页面中添加一个表单

，在中通过表单元素的id属性来调用xhEditor在线编辑器.初始化xhEditor编辑器插件，并定义上传回调函数insertUpload(msg)，Substring(s)函数是处理服务器返回到回调函数的字符串内容，格式是JSON的数据格式[7]. 具体实现代码如下.</p><p><img src="https://img.fx361.cc/images/2023/0215/9b939e0df731ba9ed7dc3d32c8e0c6c7661cedd5.webp"/></p><p><img src="https://img.fx361.cc/images/2023/0215/b6fed202c02a8a00979081906dd05672e7bfcebc.webp"/></p><p>基于xhEditor在线编辑器的文件上传页面运行效果如图1所示.</p><p><img src="https://img.fx361.cc/images/2023/0215/9c2cf242bbec33f73957b0bc8f0062c158755268.webp"/></p><p>图1 xhEditor文件上传</p><h3>2.2 基于Struts2的异步处理</h3><p>含xhEditor在线编辑器的文件上传页面通过jquery异步调用Struts2后台文件上传程序.该Struts2后台文件上传Action程序返回json格式处理结果.具体实现代码如下.为了实现跨平台性，解决Windows平台和Linux平台的目录分隔符不同问题，这里使用了常量File Separator.此外，使用当前时间作为上传文件名，可以避免文件名冲突问题.</p><p><img src="https://img.fx361.cc/images/2023/0215/9124b9f406e0249e76cb37f7be37dfcb66f4eed5.webp"/></p><p><img src="https://img.fx361.cc/images/2023/0215/7efa1f9f600a3166197766e72a2116dcb076e3bc.webp"/></p><p>然后在Struts.xml配置文件中对异步处理程序进行配置，代码如下.</p><p><img src="https://img.fx361.cc/images/2023/0215/1a5e7d6054d30069b179476ad3a0ccc209df6f5c.webp"/></p><p>上传成功物理试图页面success.jsp代码如下.</p><p><img src="https://img.fx361.cc/images/2023/0215/68e86cb4cf6edd9b9da738f11988887d9168d30c.webp"/></p><p>success.jsp页面内容是异步显示在xhEditor在线编辑器页面中，如图2所示.</p><p><img src="https://img.fx361.cc/images/2023/0215/238e0daf2083b21c7758c29e39d783e1e494fb49.webp"/></p><p>图2 异步显示</p><p>文件上传时对应后台Struts2处理输出信息如图3所示.</p><p><img src="https://img.fx361.cc/images/2023/0215/9cc71ef1eaed28749ba9b665315a34ecf5575511.webp"/></p><p>图3 后台Struts2处理</p><p>最后，通过editorAction.jsp页面来显示xhEditor在线编辑器提交的内容，如图4所示，可以看到图文相关信息.</p><p><img src="https://img.fx361.cc/images/2023/0215/be97093a959eae13d7c85cc627b08472af2ec0bb.webp"/></p><p>图4 显示结果</p><h2>3 结束语</h2><p>在Java Web开发中，将Struts2框架与在线编辑器整合是困难的，复杂的.在众多在线编辑器中，xhEditor是国人开发较为优秀的一款软件，但xhEditor本身没有实现文件上传功能，需要第三方按照自己需求去实现.本文针对在线编辑器与Struts2整合开发中遇到的典型问题，提出了并设计实现了xhEditor+Struts2整合方案，通过多次实验测试，该方案可以满足Java Web以及Java EE企业级应用开发中在线编辑器与Struts2整合开发的需求.</p><p>[1]ckeditor官网[OL].http://ckeditor.com/demo,2015.</p><p>[2]xhEditor官网[OL].http://xheditor.com/about.html,2015</p><p>[3]李昊.个性化可定制在线WEB编辑器的设计与实现[D].成都：电子科技大学.2011.</p><p>[4]梁燕来，程裕强. Java面向对象程序设计[M].北京：人民邮电出版社，2013.4.</p><p>[5]程裕强.编程语言中浮点数精度丢失问题[J].计算机安全.总第148期，2013：59-61.</p><p>[6]程裕强.浅谈加密算法教学改革[J].玉林师范学院学院（自然科学），2013，32(2)：152-155.</p><p>[7]程裕强.抽象工厂模式探讨[J].玉林师范学院学院（自然科学），2014，35(2)：82-86.</p></div></div> <!-- <div class="m_article_pdf"><a href="https://cimg.fx361.com/kkb.apk">查看pdf文档请下载app</a></div>--><div class="article_love_part"> <h3>猜你喜欢</h3> <div class="article_love_keyword"><span><a href="/tags/5/7/e368336f07f46755/1.html" target="_blank">编辑器</a></span><span><a href="/tags/f/e/58f0f713c236e782/1.html" target="_blank">玉林</a></span><span><a href="/tags/3/0/cf63f1157b52ed2c/1.html" target="_blank">图文</a></span></div> <div class="article_love_news"><dd><a href="/news/2023/0118/16734549.html" target="_blank" title="王玉林作品">王玉林作品</a></dd><dd><a href="/news/2022/0120/9447946.html" target="_blank" title="画与理">画与理</a></dd><dd><a href="/news/2021/0206/7554483.html" target="_blank" title="司空见惯感觉烦　锁屏画面快走开">司空见惯感觉烦　锁屏画面快走开</a></dd><dd><a href="/news/2019/0602/15007035.html" target="_blank" title="邱玉林艺术作品欣赏">邱玉林艺术作品欣赏</a></dd><dd><a href="/news/2019/0306/4878287.html" target="_blank" title="你距离微信创作达人还有多远？">你距离微信创作达人还有多远？</a></dd><dd><a href="/news/2018/0829/15637257.html" target="_blank" title="车辆段收发车运行图编辑器的设计与实现">车辆段收发车运行图编辑器的设计与实现</a></dd><dd><a href="/news/2018/0514/8268402.html" target="_blank" title="Unit 6 Travelling around Asia Listening and speaking">Unit 6 Travelling around Asia Listening and speaking</a></dd><dd><a href="/news/2014/1115/10983652.html" target="_blank" title="瞻云寄兴">瞻云寄兴</a></dd><dd><a href="/news/2013/1211/3709348.html" target="_blank" title="图文配">图文配</a></dd><dd><a href="/news/2013/1210/3709327.html" target="_blank" title="图文配">图文配</a></dd></div> </div><div class="phbk_part"><h3>杂志排行</h3> <ul><li><a href="/bk/sdjy/202410.html" class="title">《师道·教研》</a><a href="/bk/sdjy/202410.html" class="date">2024年10期</a></li><li><a href="/bk/swyzhsby/202411.html" class="title">《思维与智慧·上半月》</a><a href="/bk/swyzhsby/202411.html" class="date">2024年11期</a></li><li><a href="/bk/xdgyjjhxxh/20242.html" class="title">《现代工业经济和信息化》</a><a href="/bk/xdgyjjhxxh/20242.html" class="date">2024年2期</a></li><li><a href="/bk/wxxsyb/202410.html" class="title">《微型小说月报》</a><a href="/bk/wxxsyb/202410.html" class="date">2024年10期</a></li><li><a href="/bk/gywsw/20241.html" class="title">《工业微生物》</a><a href="/bk/gywsw/20241.html" class="date">2024年1期</a></li><li><a href="/bk/xl/20249.html" class="title">《雪莲》</a><a href="/bk/xl/20249.html" class="date">2024年9期</a></li><li><a href="/bk/zxqyglykj/20246.html" class="title">《中小企业管理与科技》</a><a href="/bk/zxqyglykj/20246.html" class="date">2024年6期</a></li><li><a href="/bk/xdsp/20244.html" class="title">《现代食品》</a><a href="/bk/xdsp/20244.html" class="date">2024年4期</a></li><li><a href="/bk/wszyjy/202410.html" class="title">《卫生职业教育》</a><a href="/bk/wszyjy/202410.html" class="date">2024年10期</a></li><li><a href="/bk/zjlcyx/20243.html" class="title">《浙江临床医学》</a><a href="/bk/zjlcyx/20243.html" class="date">2024年3期</a></li></ul> </div><div class="bk_part"> <div class="bk_im_b"><a href="/bk/ylsfxyxb/20155.html"><img src="https://img.fx361.cc/images/2023/0215/8b37e781cc9594f40a8349cf364abb12f6b4d844_mini.webp" alt=""></a></div> <div class="dbk_title"><a href="/bk/ylsfxyxb/" target="_blank">玉林师范学院学报</a></div> <div class="dbk_date"><a href="/bk/ylsfxyxb/20155.html" target="_blank">2015年5期</a></div> </div><div class="others"> <h3><a href="/bk/ylsfxyxb/" target="_blank">玉林师范学院学报</a>的其它文章</h3> <ul><li><a href="/news/2015/0528/17255466.html" title="内容管理系统的文章关键词提取组件分析与优化">内容管理系统的文章关键词提取组件分析与优化</a></li><li><a href="/news/2015/0222/17254711.html" title="基于物理防控害虫的单种群模型研究">基于物理防控害虫的单种群模型研究</a></li><li><a href="/news/2015/0222/17255286.html" title="一个充分下降的杂交共轭梯度法">一个充分下降的杂交共轭梯度法</a></li><li><a href="/news/2015/0222/17254669.html" title="岜盘白头叶猴种群的参数估计及数量动态预测">岜盘白头叶猴种群的参数估计及数量动态预测</a></li><li><a href="/news/2015/0222/17255299.html" title="PVP辅助合成Al2O3:Eu3+红色荧光粉及其发光性能">PVP辅助合成Al2O3:Eu3+红色荧光粉及其发光性能</a></li><li><a href="/news/2015/0222/17255890.html" title="卷首语">卷首语</a></li></ul></div></div> <div class="m_footer"></div> <script> if ('serviceWorker' in navigator) { window.onload = function () { navigator.serviceWorker.register('/sw.js'); }; } </script> <script type="text/javascript" src="https://s1.pstatp.com/cdn/expire-1-M/jquery/3.4.0/jquery.min.js"></script> <script type="text/javascript" src="https://s2.pstatp.com/cdn/expire-1-M/Swiper/4.5.0/js/swiper.min.js"></script> <script type="text/javascript" src="https://s1.pstatp.com/cdn/expire-1-M/jquery.lazyload/1.9.1/jquery.lazyload.js"></script> <script type="text/javascript"> document.write('<script src="https://img.fx361.cc/js/m.index_cc.js"><\/script>'); </script> </section> </body> </html>