Ueditor 自定义图片上传+文本编辑

阅读更多

刚来公司那会，要我将text改为富文本编辑器，这个过程真是一波三折。话不多说，直接进入主题。

开始的时候用的是ueditor自带的图片上传。在这里简单的说下ueditor文件配置，到ueditort官网去下载文件，地址：http://ueditor.baidu.com/website/  下载下来后主要引入这个

 

 我这边引入的是这个四个文件。在jsp页面中写如下两个script将插件引入

 上图中的第一个script的id 是调用下面的id， UE.getEditor是初始化这个插件，里面有一些参数配置，如: autoClearinitialContent:false,  这个参数是鼠标点击这个编辑器内容的时候，不会清空里面的内容，设置成true，在页面加载这个插件的时候d点击这个编辑器会将编辑器里默认的内容清除掉。参数也可以在uedotor.config.js里面配置。

 

1：采用ueditor自带的图片上传，配置如下：

上面的配置是要有的，在ueditor加载的时候会全部进入jsp/controller.jsp这文件里

 window.UEDITOR_HOME_URL = "/zhaiqq/ueditor/";  这个配置的是ueditor在项目中的位置，我是直接将ueditor文件放到webroot下面了，写错了这个路径，就会找不到，就不能加载这个插件。下面的imgUrl啊之类的参数大家可以去看看官网的描述，官网写的还是比较清楚的。打开jsp文件下的config.json，这里才是关键，

 我删除了下面很多的配置文件，因为那些都是涂鸦图片上传，截图上传，视频上传，对我来说没有用，我就全部删了，"imageActionName": "uploadimage",这个是调用的是插件自带的action，这里的值不能修改，否则在点击图片上传的时候会报“无效的Action”。

 这两个参数一定要注意：第一个是访问图片的路径前缀，下面的拖上传路径你可以自己修改，没有这个文件夹，系统会自动帮你创建。如果第一个参数写错，你会访问不到（编辑器看不到）图片，如果你看不到图片，请F12看下这图片路径就知道是什么原因了，肯定是你第一个参数没有配置对。只要这些配置好了，插件自带的图片上传就可以搞定了。

 

2：自定义图片上传，正如我上面第三张图片显示的那样，假如我们不想使用插件自带图片上传，想要我们自己写的一个action进行图片上传。参考第三张说明如下：

这个方法是重写插件自带的图片上传的方法，在if里判断是进行什么类型的上传,图片上传？涂鸦上传？视频上传？如果是这当中的某一个上传就调用某一个指定的后台上传action，return 后面调用的就是这个action路径。我这边用的是spring mvc注解，如下

 图片的上传方法可以根据我前一篇的博客文章做参考，这里我就省掉了图片上传，ftp上传的方法实现，但是不管你是想将图片上传到哪里，这个后台方法结束后一定要返回json格式给前台。具体的格式请看：http://fex.baidu.com/ueditor/#dev-request_specification 

 我这边返回的是这个，就一个url参数我是写对的，其他都是写错了，，勿喷。。我主要想用的是url，这个json格式数据返回到前台，插件会自动识别这个url，根据这个url查找图片路径显示在这个编辑器里。同样的，如果你这块显示不出图片，后台上传是没有问题的，你可以F12看下图片路径。如果是调用的是本地的图片，要么你返回的时候就把调用图片的前缀写好+图片的相对路径，或者你只返回相对路径，在配置文件conf.json里面，的imageUrlPrefix 参数配置你想访问图片的所在项目名。

 

问题：图片上传没有问题，但是我这边有一个修改的功能，是可以修改这个业务的，这个业务下面有一个字段就是这个编辑器，所以我们在将编辑器插入的时候，用UE.getEditor('eduit').getContent(); 这个方法获取到编辑器内容，我之前用的是getAllHtml()这个方法，这个方法是获取编辑器的整个html内容，但是取到之后发现里面有一些不是自己添加的图片文字等，而是百度自定义的一些html标签，我刚开始的时候用的是getAllHtml()  ，出了这个问题后我就网上查询了一些资料，ueditor为了一些安全性的问题过滤了html，我也改了编辑器js源码,结果发现还是不能正常显示，每次都是插入数据库的时候自动添加这个百度的自定义标签，一番折腾之后我换用了getContent()，虽然获取的是编辑器内容，但是将编辑器内容插入数据库，再在修改业务的页面进行修改，样式什么的都不会变，这个已经满足了我的需求，这个走了很多的弯路。最后觉定用getContent，一切都ok了。

• 
• 大小: 14.9 KB

• 
• 大小: 20.5 KB

• 
• 大小: 28.5 KB

• 
• 大小: 44.2 KB

• 
• 大小: 41.8 KB

• 
• 大小: 20 KB

• 
• 大小: 10.1 KB

• 
• 大小: 15.4 KB

• 
• 大小: 11.4 KB

• 查看图片附件