富文本编辑ueditor在jsp里使用配置总结
2013-12-09 11:58
190 查看
项目中使用了ueditor编辑器,刚开始的时候真的是一头雾水,不过后来总算是能够将ueditor整合到项目中了,现在把自己的配置过程记录一下:
一、首先得让编辑器能够在页面上显示出来,这个在官方文档写的非常的详细,可直接按照官方文档的说明即可成功配置,我按如下步骤配置:
(1)我下载的是jsp版本的,解压后放在项目中自己的某个位置即可,我放在如下:
![](http://img.my.csdn.net/uploads/201212/28/1356667166_6621.png)
(2)导入所需的文件,注意文件在项目中的路径
![](http://img.my.csdn.net/uploads/201212/28/1356667625_2165.png)
(3)创建编辑器实例及其DOM容器(使用script而不用textarea的好处在官方文档上有说明)
![](http://img.my.csdn.net/uploads/201212/28/1356667819_5796.png)
(4)在editor_config.js中查找URL变量配置编辑器在项目中的路径
![](http://img.my.csdn.net/uploads/201212/28/1356667977_1890.png)
经过以上步骤,编辑器即可在页面上显示。如果大小不合适,可在editor_config.js中进行配置:
![](http://img.my.csdn.net/uploads/201212/28/1356668428_9458.png)
二、然后就需要将在编辑器中所输入的数据在后台进行接收,即前后端交互,按如下步骤:
(1)如果是要将已有的数据在页面上进行显示,只需将需要显示的内容写在<script></script>标签之间即可,如:
![](http://img.my.csdn.net/uploads/201212/28/1356668677_3680.png)
(2)如果是新表单输入的内容,和(1)差不多,只不过不用写${editnews.content}即可,然后在action中以变量形式接收(struts2)或在servlet中使用
经过以上步骤,即可完成前后端的文字数据交互。
三、图片的上传配置处理:
(1)首先确认将ueditor源代码包下的jsp文件夹中的commons-fileupload-1.2.2.jar放入项目中的lib下,并将Uploader类放在src中的某个包中
(2)配置editor_config.js中的图片上传部分:
![](http://img.my.csdn.net/uploads/201212/28/1356687237_3303.png)
其中,然后在imageUp.jsp中导入所需要的Uploader类:
[html] view
plaincopy
<%@ page import="cn.edu.hpu.filter.Uploader" %>
经过以上配置,即完成了图片的上传配置,能够成功的上传图片到指定的文件夹。但是这里也存在一个问题就是:我们所上传的图片是放在tomcat的webapps下的项目中的一个文件夹,如果tomcat重新启动的话,这些文件是不会消失的,但如果是重新部署的话那所上传的所有的文件都会消失,原本想尝试用虚拟路径试试,上传图片后能够自动的传到本地磁盘上的不是tomcat下的某个文件夹,保证图片不会因为项目的重新部署而消失,但是没有成功,不知某位大牛知道解决方法?恳请赐教,感激不尽哪!
四、附件的上传配置,其实和图片的上传配置是一个道理,只需要在fileUp.jsp页面中导入所需的Uploader类即可。
这样就解决了ueditor的基本使用问题,当然还有很多可以定制的内容,这个等以后在实践中用到了再继续补充。
一、首先得让编辑器能够在页面上显示出来,这个在官方文档写的非常的详细,可直接按照官方文档的说明即可成功配置,我按如下步骤配置:
(1)我下载的是jsp版本的,解压后放在项目中自己的某个位置即可,我放在如下:
![](http://img.my.csdn.net/uploads/201212/28/1356667166_6621.png)
(2)导入所需的文件,注意文件在项目中的路径
![](http://img.my.csdn.net/uploads/201212/28/1356667625_2165.png)
(3)创建编辑器实例及其DOM容器(使用script而不用textarea的好处在官方文档上有说明)
![](http://img.my.csdn.net/uploads/201212/28/1356667819_5796.png)
(4)在editor_config.js中查找URL变量配置编辑器在项目中的路径
![](http://img.my.csdn.net/uploads/201212/28/1356667977_1890.png)
经过以上步骤,编辑器即可在页面上显示。如果大小不合适,可在editor_config.js中进行配置:
![](http://img.my.csdn.net/uploads/201212/28/1356668428_9458.png)
二、然后就需要将在编辑器中所输入的数据在后台进行接收,即前后端交互,按如下步骤:
(1)如果是要将已有的数据在页面上进行显示,只需将需要显示的内容写在<script></script>标签之间即可,如:
![](http://img.my.csdn.net/uploads/201212/28/1356668677_3680.png)
(2)如果是新表单输入的内容,和(1)差不多,只不过不用写${editnews.content}即可,然后在action中以变量形式接收(struts2)或在servlet中使用
request.getParameter(
""
);的形式进行接收。具体的可见:ueditor前后端交互说明
经过以上步骤,即可完成前后端的文字数据交互。
三、图片的上传配置处理:
(1)首先确认将ueditor源代码包下的jsp文件夹中的commons-fileupload-1.2.2.jar放入项目中的lib下,并将Uploader类放在src中的某个包中
(2)配置editor_config.js中的图片上传部分:
![](http://img.my.csdn.net/uploads/201212/28/1356687237_3303.png)
其中,然后在imageUp.jsp中导入所需要的Uploader类:
[html] view
plaincopy
<%@ page import="cn.edu.hpu.filter.Uploader" %>
经过以上配置,即完成了图片的上传配置,能够成功的上传图片到指定的文件夹。但是这里也存在一个问题就是:我们所上传的图片是放在tomcat的webapps下的项目中的一个文件夹,如果tomcat重新启动的话,这些文件是不会消失的,但如果是重新部署的话那所上传的所有的文件都会消失,原本想尝试用虚拟路径试试,上传图片后能够自动的传到本地磁盘上的不是tomcat下的某个文件夹,保证图片不会因为项目的重新部署而消失,但是没有成功,不知某位大牛知道解决方法?恳请赐教,感激不尽哪!
四、附件的上传配置,其实和图片的上传配置是一个道理,只需要在fileUp.jsp页面中导入所需的Uploader类即可。
这样就解决了ueditor的基本使用问题,当然还有很多可以定制的内容,这个等以后在实践中用到了再继续补充。
相关文章推荐
- 富文本编辑ueditor在jsp里使用配置总结
- JSP版(utf8编码)的Ueditor百度文章编辑器配置以及使用说明
- ueditor使用配置总结
- ueditor1_4_3-utf8-jsp版使用配置
- .NET中应用Ueditor(富文本编辑)的配置和使用
- UEditor(JSP版)使用总结
- jsp自定义标签的使用以及tld文件配置总结
- ueditor1_4_3-utf8-jsp版使用配置
- JSP版(utf8编码)的Ueditor百度文章编辑器配置以及使用说明
- jspwiki配置和使用总结
- ueditor使用配置总结
- 百度UEditor的简单使用,JSP页面的表单中的内容后台获取和前端配置-结合项目使用
- ueditor1_4_3-utf8-jsp 配置实现上传图片的功能遇到的问题,改变图片上传请求地址
- CRM 配置 ADFS后,使用自定义STS遇到的问题总结
- SSH使用总结(annotation配置方式)
- [Jasper使用总结]Jasper套件的简要介绍和安装配置(一)
- Git在Xcode中的配置与使用常见问题总结
- 使用Ueditor编辑器上传图片总结;
- JavaMail 使用总结 java/jsp发邮件 带附件
- Windows下Apache+Tomcat+MySQL+jsp+php的服务器整合配置经验总结