给编辑器CKEditor3.5.2增加图片上传的功能

CKEditor是一款很适合PHP后台系统使用的HTML编辑器,功能强大,配置方便。唯独不足是缺少对图片上传的支持。CKFinder虽然是个解决方案,但是太过复杂,CKEditor的版本已经发展到3.5.2,网上很多解决办法还没更上,3.5.2的解决办法不太好找。考虑到ckeditor的复杂性,觉得用valums的ajax upload来配合最合适。

首先在ckeditor的pluginsimagedialodsimage.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号。