增加Ueditor在线管理图片删除功能

前天我提到了 yii下安装并使用ueditor 在使用过程中 遇到了一些问题 虽然不大 但对于追求完美的人来说 还是欲除之而后快。

下面我就两个问题说下解决方案：

1. 编辑器中图片拉伸的问题  

    其实可以修改成等比拉伸 这样可以避免误操作引起的图片不好看的问题 如果您不介意 那么可以不 用看：

    修改ueditor.all.js 大约16970行 (如果您用的是ueditor.all.min.js 那么你最好先更新下ueditor.all.js然后压缩成mini版，这里就不多说了)：

    
    
    
    

     
     
     
     
/*if (rect[dir][2] != 0) {
     
     
     
     
 tmp = dom.clientWidth + rect[dir][2] * offset.x;
     
     
     
     
 dom.style.width = me._validScaledProp('width', tmp) + 'px';
     
     
     
     
}
     
     
     
     
if (rect[dir][3] != 0) {
     
     
     
     
 tmp = dom.clientHeight + rect[dir][3] * offset.y;
     
     
     
     
 dom.style.height = me._validScaledProp('height', tmp) + 'px';
     
     
     
     
}*/
     
     
     
     
//等比缩放图片
     
     
     
     
if (rect[dir][2] != 0) {
     
     
     
     
 tmp = dom.clientWidth + rect[dir][2] * offset.x;
     
     
     
     
 var tmpwh = parseInt(dom.style.width)/parseInt(dom.style.height);
     
     
     
     
 dom.style.width = me._validScaledProp('width', tmp) + 'px';
     
     
     
     
 dom.style.height = me._validScaledProp('height', tmp/tmpwh) + 'px';
     
     
     
     
}
     
     
     
     
if (rect[dir][3] != 0) {
     
     
     
     
 tmp = dom.clientHeight + rect[dir][3] * offset.y;
     
     
     
     
 var tmpwh = parseInt(dom.style.width)/parseInt(dom.style.height);
     
     
     
     
 dom.style.height = me._validScaledProp('height', tmp) + 'px';
     
     
     
     
 dom.style.width = me._validScaledProp('width', tmp*tmpwh) + 'px';
     
     
     
     
}
    
    
    
    

2.  就是本文要说的在线管理图片没有删除功能的问题 

    我的原理是 检索出图片之后 增加一个删除的按钮或者链接 然后请求服务端删除 接收返回结果 提示是否成功删除：

   第一步： 需要增加一个后端请求删除的url  这样可以在config.json里面增加一项即可  我这里在控制器层初始化了$CONFIG：

    
    
    
    

     
     
     
     
'imageDelUrl' => $this->createUrl('uploadify/ajaxDel'), //在线图片管理删除操作请求url
    
    
    
    

   第二步：增加js删除方法，放到ueditor/dialogs/image/image.html里面 ：

    
    
    
    

     
     
     
     
<script>
     
     
     
     
 //新增在线管理删除图片
     
     
     
     
 function uedel(path, id){
     
     
     
     
 if(confirm('您确定要删除它吗？删除后不可恢复！')){ 
     
     
     
     
 var url = editor.getOpt('imageDelUrl'); 
     
     
     
     
 $.get(url,{'path':path},function(data){
     
     
     
     
 if (data.state == 'success') {
     
     
     
     
 alert(data.message);
     
     
     
     
 $("#"+id).parent("li").remove(); 
     
     
     
     
 }else{
     
     
     
     
 alert(data.message);
     
     
     
     
 }
     
     
     
     
 },'json'); 
     
     
     
     
 } 
     
     
     
     
 }
     
     
     
     
 
     
     
     
     
 </script>
    
    
    
    

   大家可以看到 我用了一句

    
    
    
    

     
     
     
     
editor.getOpt('imageDelUrl');
    
    
    
    

   这是自带的方法 可以自定义url  由于已经加载了jquery 所以我也就直接ajax请求了

   第三步： 修改ueditor/dialogs/image/image.js文件（大约902行）

    
    
    
    

     
     
     
     
 del = document.createElement('a'); 
     
     
     
     
 del.innerHTML = '删除';
     
     
     
     
 domUtils.addClass(del, 'del');
     
     
     
     
 var delid='imagelist_'+i;
     
     
     
     
 del.setAttribute('id',delid);
     
     
     
     
 del.setAttribute('href','javascript:;');
     
     
     
     
 del.setAttribute('onclick','uedel("'+list[i].url+'","'+delid+'")');
    
    
    
    

  

    924行 增加一句：item.appendChild(del); 为了把a标签加载进去

    到这里 我们可以看到 已经有了“删除”链接了  具体样式修改 ueditor/dialogs/image/image.css 我是直接在末尾添加：

    
    
    
    

     
     
     
     
/* 新增在线管理删除图片样式*/
     
     
     
     
#online li a.del { 
     
     
     
     
 width: auto; 
     
     
     
     
 position: absolute;
     
     
     
     
 top: 0;
     
     
     
     
 right: 0;
     
     
     
     
 color:#F00;
     
     
     
     
 background-color:#DDDDDD;
     
     
     
     
 opacity:0.8;
     
     
     
     
 filter:alpha(80);
     
     
     
     
 border: 0; 
     
     
     
     
 z-index:3;
     
     
     
     
 text-align:right;
     
     
     
     
 text-decoration:none; 
     
     
     
     
}
    
    
    
    

   第四步：实现删除图片的服务端方法(放到您的控制器里面即可,我的是UploadifyController 和第一步的$this->createUrl('uploadify/ajaxDel');相对应 )：

    
    
    
    

     
     
     
     
/**
     
     
     
     
 * 直接删除路径文件
     
     
     
     
 * 
     
     
     
     
 */
     
     
     
     
 public function actionAjaxDel(){
     
     
     
     
 $file = $this->_request->getParam('path');
     
     
     
     
 $firstchar = substr($file,0,1);
     
     
     
     
 if(in_array($firstchar, array('/','\\'))){
     
     
     
     
 $file = substr($file,1);
     
     
     
     
 } 
     
     
     
     
 
     
     
     
     
 try {
     
     
     
     
 if($file && file_exists($file)){
     
     
     
     
 unlink($file);
     
     
     
     
 $var['state'] = 'success';
     
     
     
     
 $var['message'] = '删除完成'; 
     
     
     
     
 } else{
     
     
     
     
 $var['state'] = 'error';
     
     
     
     
 $var['message'] = '删除失败，未找到'.$file;
     
     
     
     
 }
     
     
     
     
 
     
     
     
     
 } catch (Exception $e){ 
     
     
     
     
 $var['state'] = 'error';
     
     
     
     
 $var['message'] = '删除失败：'.$e->getMessage();
     
     
     
     
 } 
     
     
     
     
 exit(CJSON::encode($var));
     
     
     
     
 }
    
    
    
    

   

已测试通过， 如果还有不明白的地方，欢迎探讨。