xheditor与ckeditor使用笔记

最近因为工作需要，调研了两种常用的富文本编辑器的使用，在这里简单记几笔。

xheditor

xheditor是一个界面清楚简单的富文本编辑器，使用起来很简单，引入类库文件，然后

$('#detail').xheditor({ upImgUrl: "/user/cf/ajaximgup", upImgExt: "jpg,jpeg,gif,png" });

就可以了。detail是textarea的id。upImgUrl是图片上传的地址。
这里主要关注图片上传。我在使用的时候遇到一个坑，就是使用图片上传的时候，上传行为有，但是后台的php程序没有接到数据。
我去查了一下，在xheditor源码里发现文件上传是通过

var d = doctument.getElementById('fileid').files[0];
xhr = new XmlHttpRequest();
xhr.open('POST',upImgUrl,true);
xhr.send(d);

来实现上传操作的。
结果我在后台通过xdebug查看请求上下文，发现没有$_FILES这个变量。
开始以为是xhr会根据一个条件判断是否执行

xhr.sendBinary(d);

于是强行把sendBinary()给跳过了，强制执行send();可以还是不行。
这时发现直接send一个文件对象的做法比较奇怪，于是加了几句：

var f = new FormData();
f.append('upload', d);
xhr.send(f);

还是不行。查了一下英文社区，有人建议说，不要给

xhr.setRequestHeader('Content-Type', 'application/octet-stream');

使用默认的content-type即可。
将上面这行注释掉之后，后台就正常接收到$_FILES变量了。
另外就是要注意，后台返给前端的数据格式是{‘err’:’xxx’, ‘msg’:’image_url’}这种。

ckeditor

这个以前用过。界面不如xheditor那么简洁。不过上传功能没遇到那么多坑。很多设置可以通过config.js来设置。