UEditor-前端使用心得（前后端分离实践）

记得差不多就是去年的这个时候，我从原来的单位辞职。原因很简单，二十三四岁，正式一个该奋斗的年纪。虽然家里的条件可以允许自己不必太努力，但是唯有自己拥有赚更多钱的能力，才会让自己觉得心安。思来想去，选择了继续深钻大学的专业，至此我的前端之路也正式开始了。

这一年，从学习到工作，发生了很多的事情。其实自己是一个比较不愿意写东西的人，写博客这个念头也不是一天俩天了，但就是怎么也开展不了。直到前几天，公司的一个项目需求，要用百度的编辑器UEditor替换掉原来的富文本编辑器。一个小小的编辑器，做起来却是一个坑接一个坑，多亏网上的好心的人把自己的经验留下来，才能顺利走下来。感受到这个互联网的共享性和无私性，我也决定成为大家的其中一员，为大家贡献出自己踩每一个坑时的心路历程，希望可以帮助大家，同大家一起共同学习。

话就不多说了，走进正题。UEditor的使用心得。

首先将一下我们的项目架构。本来整个项目是.NET跑的，因为一些原因要转到JAVA上来，所以目前的项目暂定为.NET来跑前端，接口方面由JAVA来提供。因此在使用UEdior时也是一样的。

前期还是比较顺利的，照着官方文档来做。



下载的时候，有点小懵逼，本以为就是一个前端小插件，怎么还分这来多版本，闹啥这是。因为时.net跑的前端，我就下载了.net版

下载的资源包里有demo，还是比较好理解的



简单的来说就是 1.引俩JS  2.body里加一个script标签 3.用getEditor方式创建

跑一下。



  贴上我.net项目中的代码 更直观一些。

这是用在一个新闻审核时的编辑器。所以一开始编辑器就会带有默认值。这里解释下 我为什么没有直接直接将数据放在编辑器的script标签中，如果直接读那么在编辑器中会显示一堆字符串而不是转译后的html，此外有时还会出现内容展示在编辑器外的bug。

如果通过一个textarea先存放数据再用官方文档中的setContent（）方法设置编辑器的内容，就完美解决了。看下效果，完美。



注:大家在实际使用的时候会遇见双引号和单引号无法转译的问题。这块我就附个链接http://blog.csdn.net/wanghao3616/article/details/25816747 照这样就可以完美解决了

好了效果实现，重点来了。图片上传。我们具体来分析下代码的流程是怎样的。

UEdior.all.js这个主文件我们先不看，先看uedior.config.js这个配置的文件



这个红框的地方就是后台请求的统一接口。官方文档已经说了，1.4*版本以后已经把所有的后台请求接口合并成一个了，也就是说无论上传还是涂鸦上传都是使用这个接口只是参数action不一样。当然我在实际项目的时候还是任性的把这个接口拆开了。



这样比较直观。其实比较有用的接口就是前俩个。在调试项目的时候发现，编辑器最先会发这个action='config'的请求。这个是设定图片访问规则的一些配置。在写这个接口的时候出现了一些问题，后端返回的数据老是存在问题，所以我就直接用了项目中基于.net的原始接口调用前端这边的config.json文件。其实我觉得这个配置文件放在后端调用返回给前端来最好，因为后端最清楚这些请求地址该怎么写。



因为后端接口没实现，我就把配置文件放在了前端，之后我把配置中的路径都设置为空，这一直接凭后端返回的url就可以直接访问了 不需要再拼了（其实这样一来，配置没啥个用了，存粹走个流程。。）

配置读取完就该上传图片了。因为我们的项目是俩个服务器构成的所以呢就涉及到了跨域的问题。。。这里面是有个坑的。那就是单图和多图的处理是不一样的。

多图比较简单

只要设置好请求头之类普通的跨域常见问题，再调刚才设置的图片上传接口就OK了

单图的话就比较蛋疼了。单文件上传是form提交到iframe，然后iframe里面的内容返回。官方也说了。单文件比较难搞

解决方案就是让后端先将数据反回给.net服务器的一个中转页面，再通过这个中转页面返回来显示，这样就完美解决了单文件的跨域问题。

单文件的请求接口位置 直接修改all.js

1.修改action就是接口



2.干掉这行默认的url



搞完这个就大功告成了。累累累。。。。。

置于后端代码。我这个前端er就不贴了 如果有需要的朋友有需要可以留言和我说。

说实在的纯手写这么多，也不知道又没人会看。第一次，以后也会把质量提起来。自己也会坚持写下去的。加油各位！！！！！！