jsp项目中使用UEditor富文本编辑器

    为保证安全,本站点已取消所有百度云分享链接,如有下载需要,请在评论里留下邮箱。

需求

  • 新闻中心模块需要实现新闻浏览功能.
  • 管理员能在后台编辑新闻、发布新闻.
  • 能够实现图文混排.

解决方案

        使用在线HTML编辑器实现傻瓜式编辑,编辑完成后存储html代码到数据库,动态读取数据库实现前台展示.HTML编辑器选用Ueditor【官网】

UEditor简介

  • Ueditor是百度前端团队研发富文本编辑器,可以像编辑word一样编辑html实现所见即所得的效果.
  • 基于MIT开源协议,功能强大,允许自由使用和修改。

安装配置

1、下载UEditor【1.4.3 JSP版本】.下载地址:【UEditor下载

2、导入ueditor到项目中。

3、拷贝ueditor1_4_3/jsp/lib下的库文件到WEN-INF/lib文件夹下.

4、单击WebContent/ueditor1_4_3/index.html,右键->Run As->Run On Server.可以看到完整版demo实例.

5、编辑一篇新闻:

6、点击编辑框左上角的”HTML”图标,查看编辑内容的HTML源码

7、点击”获得内容”按钮,js会输出编辑框内的html代码:

说明编辑的内容会自动转换为HTML,而且HTML代码片段是可以输出的,那么如何获取编辑内容?
1.在WebContent目录下新建news.jsp.
2.将index.html改成index.jsp并打开,找到下面这几行代码:
3.增加表单,action=”news.jsp”
4.在index.jsp的编辑框中随便输入一串字符,提交.
5.查看浏览器地址栏变化,可以看到编辑表单的name为editorValue
6.将form表单传输数据方法改为post.删去暂时用不到的JS方法和button,在news.jsp中使用getParameter方法接收editorVaule值,并用jsp代码片段展示新闻编辑内容.
index.jsp

news.jsp


7.编辑新闻:

8.点击编辑完成,转至news.jsp,效果如下.

至此可见ueditor配置使用非常简单,对编辑内容进行处理只需要接收editorVaule值即可进行进行下一步处理.

配置图片上传路径

  要实现图文混排需要对配置文件进行修改.
 1.打开/uetest/WebContent/ueditor1_4_3/jsp/config.json,imageUrlPrefix值为”/工程名”,注意要加上 / 。imagePathFormat路径要和工程目录配置一致.
2.打开ueditor.config.js,修改window.UEDITOR_HOME_URL为符合项目访问的路径。
3.config.json文件中有提交的图片图片表单名称设置,”imageFieldName”: “upfile”, /* 提交的图片表单名称 */,上传图片的表单属性中加入一行name=”upfile”,测试:

Struts框架下图片上传配置

    在struts框架下按照上面的配置图片上传仍然不成功,原因是配置struts时默认拦截器把所有请求都做了处理。
解决方法就是自定义拦截器,步骤
1.创建拦截器类

2.修改web.xml,把默认拦截器修改为自定义拦截器

总结

  •   UE功能强大,配置比较简单
  •   图片上传要注意配置文件中的路径,最终上传到服务器的图片文件默认是以时间戳命名文件夹保存图片的.
  •  在struts中配置UE需要自定义拦截器
支付宝打赏 微信打赏

如果文章对您有帮助,欢迎打赏本站

未经允许不得转载:晚风深巷酒 » jsp项目中使用UEditor富文本编辑器

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址