给编辑器CKEditor3.5.2增加图片上传的功能
Posted in PHP on March 7th, 2011 by AdamCKEditor是一款很适合PHP后台系统使用的HTML编辑器，功能强大，配置方便。唯独不足是缺少对图片上传的支持。CKFinder虽然是个解决方案，但是太过复杂，CKEditor的版本已经发展到3.5.2，网上很多解决办法还没更上，3.5.2的解决办法不太好找。考虑到ckeditor的复杂性，觉得用valums的ajax upload来配合最合适。
首先在ckeditor的plugins\image\dialods\image.js里进行编辑，找到
children:[{id:’txtUrl’,type:’text’,label:b.lang.common.url
在后面增加内容变成：
b.lang.common.url+” <div id=\”file-uploader\” style=\”display:inline;\”>上传图片</div>”
然后在编辑器所在页面增加：
<script src=”fileuploader.js” type=”text/javascript”></script>
<link href=”fileuploader.css” rel=”stylesheet” type=”text/css” />
<script>
function createUploader(){
var uploader = new qq.FileUploader({
element: document.getElementById(‘file-uploader’),
action: ‘ajax_upload.php’,
debug: false
});
}
</script>
最后修改fileuploader.js，找到：
var item = this._getItemByFileId(id);
qq.remove(this._find(item, ‘cancel’));
qq.remove(this._find(item, ‘spinner’));
if (result.success){
将后面的内容替换成：
if (result.success){
if(document.getElementById(‘cke_109_textInput’)){
document.getElementById(‘cke_109_textInput’).value=result.img;
}
}
注意cke_109_textInput是源文件图片路径框的ID号。
