ueditor 文件上传

傷城~ 2022-09-19 00:16 274阅读 0赞

ueditor是开源的 可以直接下载 下载地址：

文档api：[http://ueditor.baidu.com/website/document.html][http_ueditor.baidu.com_website_document.html]

我自己做了一个简单的文件上传：[ueditro 上传图片][ueditro]   文件上传可以模仿自己写。

我自己配置的图片上传和下面说的不太一样，我是在ueditor.all.js 这个js里面添加： （就在最后一个大括号前添加就OK）

UE.commands\['uploadimage'\] = \{  
execCommand : function()\{  
var temp=document.getElementById("ID").value; //这里只是我自己测试写的一个参数，也就是 富文本编辑器所在的当前页面的一个参数  
var value = showModalDialog("ueditor/uploadfile.action?ID="+temp,window,"dialogWidth:808px;dialogHeight:494px;status:no;scroll:no"); //这里是自己的action 也就是当你点击富文本编辑器上面的图片按钮的时候 要弹出来的框。  
var ue = UE.getEditor("editor"); // 吧得到的东西放到 富文本编辑器  
ue.execCommand('insertHtml',value);  
\}

讲不太明白 我写好的代码可以下载。

以下是别人总结的内容：拿过来给大家分享一下

来自 http://blog.csdn.net/dongzhouzhou/article/details/8446782

项目中使用了ueditor编辑器，刚开始的时候真的是一头雾水，不过后来总算是能够将ueditor整合到项目中了，现在把自己的配置过程记录一下：

**一、首先得让编辑器能够在页面上显示出来，这个在官方文档写的非常的详细，可直接按照官方文档的说明即可成功配置，我按如下步骤配置：**

（1）我下载的是jsp版本的，解压后放在项目中自己的某个位置即可，我放在如下：

![1356667166_6621.png][]

（2）导入所需的文件，注意文件在项目中的路径

![1356667625_2165.png][]

（3）创建编辑器实例及其DOM容器（使用script而不用textarea的好处在官方文档上有说明）

![1356667819_5796.png][]

（4）在editor\_config.js中查找URL变量配置编辑器在项目中的路径

![1356667977_1890.png][]

经过以上步骤，编辑器即可在页面上显示。如果大小不合适，可在editor\_config.js中进行配置：

![1356668428_9458.png][]

**二、然后就需要将在编辑器中所输入的数据在后台进行接收，即前后端交互，按如下步骤：**

（1）如果是要将已有的数据在页面上进行显示，只需将需要显示的内容写在<script></script>标签之间即可,如：

![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中的图片上传部分：

![1356687237_3303.png][]

其中，然后在imageUp.jsp中导入所需要的Uploader类：

**\[html\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  <%@ page import="cn.edu.hpu.filter.Uploader" %>

<%@ page import="cn.edu.hpu.filter.Uploader" %>

经过以上配置，即完成了图片的上传配置，能够成功的上传图片到指定的文件夹。但是这里也存在一个问题就是：我们所上传的图片是放在tomcat的webapps下的项目中的一个文件夹，如果tomcat重新启动的话，这些文件是不会消失的，但如果是重新部署的话那所上传的所有的文件都会消失，原本想尝试用虚拟路径试试，上传图片后能够自动的传到本地磁盘上的不是tomcat下的某个文件夹，保证图片不会因为项目的重新部署而消失，但是没有成功，不知某位大牛知道解决方法？恳请赐教，感激不尽哪！

**四、附件的上传配置，其实和图片的上传配置是一个道理，只需要在fileUp.jsp页面中导入所需的Uploader类即可。**

这样就解决了ueditor的基本使用问题，当然还有很多可以定制的内容，这个等以后在实践中用到了再继续补充。

[http_ueditor.baidu.com_website_document.html]: http://ueditor.baidu.com/website/document.html
[ueditro]: http://download.csdn.net/detail/linlinv3/6668907
[1356667166_6621.png]: https://img-my.csdn.net/uploads/201212/28/1356667166_6621.png
[1356667625_2165.png]: https://img-my.csdn.net/uploads/201212/28/1356667625_2165.png
[1356667819_5796.png]: https://img-my.csdn.net/uploads/201212/28/1356667819_5796.png
[1356667977_1890.png]: https://img-my.csdn.net/uploads/201212/28/1356667977_1890.png
[1356668428_9458.png]: https://img-my.csdn.net/uploads/201212/28/1356668428_9458.png
[1356668677_3680.png]: https://img-my.csdn.net/uploads/201212/28/1356668677_3680.png
[1356687237_3303.png]: https://img-my.csdn.net/uploads/201212/28/1356687237_3303.png
[view plain]: http://blog.csdn.net/dongzhouzhou/article/details/8446782#