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

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

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

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

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

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

1. /*if (rect[dir][2] != 0) {
2. tmp = dom.clientWidth + rect[dir][2] * offset.x;
3. dom.style.width = me._validScaledProp('width', tmp) + 'px';
4. }
5. if (rect[dir][3] != 0) {
6. tmp = dom.clientHeight + rect[dir][3] * offset.y;
7. dom.style.height = me._validScaledProp('height', tmp) + 'px';
8. }*/
9. //等比缩放图片
10. if (rect[dir][2] != 0) {
11. tmp = dom.clientWidth + rect[dir][2] * offset.x;
12. var tmpwh = parseInt(dom.style.width)/parseInt(dom.style.height);
13. dom.style.width = me._validScaledProp('width', tmp) + 'px';
14. dom.style.height = me._validScaledProp('height', tmp/tmpwh) + 'px';
15. }
16. if (rect[dir][3] != 0) {
17. tmp = dom.clientHeight + rect[dir][3] * offset.y;
18. var tmpwh = parseInt(dom.style.width)/parseInt(dom.style.height);
19. dom.style.height = me._validScaledProp('height', tmp) + 'px';
20. dom.style.width = me._validScaledProp('width', tmp*tmpwh) + 'px';
21. }

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

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

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

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

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

1. <script>
2. //新增在线管理删除图片
3. function uedel(path, id){
4. if(confirm('您确定要删除它吗？删除后不可恢复！')){
5. var url = editor.getOpt('imageDelUrl');
6. $.get(url,{'path':path},function(data){
7. if (data.state == 'success') {
8. alert(data.message);
9. $("#"+id).parent("li").remove();
10. }else{
11. alert(data.message);
12. }
13. },'json');
14. }
15. }
16.  
17. script>

   大家可以看到 我用了一句

1. editor.getOpt('imageDelUrl');

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

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

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

  

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

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

1. /* 新增在线管理删除图片样式*/
2. #online li a.del {
3. width: auto;
4. position: absolute;
5. top: 0;
6. right: 0;
7. color:#F00;
8. background-color:#DDDDDD;
9. opacity:0.8;
10. filter:alpha(80);
11. border: 0;
12. z-index:3;
13. text-align:right;
14. text-decoration:none;
15. }

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

1. /**
2. * 直接删除路径文件
3. *
4. */
5. public function actionAjaxDel(){
6. $file = $this->_request->getParam('path');
7. $firstchar = substr($file,0,1);
8. if(in_array($firstchar, array('/','\\'))){
9. $file = substr($file,1);
10. }
12. try {
13. if($file && file_exists($file)){
14. unlink($file);
15. $var['state'] = 'success';
16. $var['message'] = '删除完成';
17. } else{
18. $var['state'] = 'error';
19. $var['message'] = '删除失败，未找到'.$file;
20. }
22. } catch (Exception $e){
23. $var['state'] = 'error';
24. $var['message'] = '删除失败：'.$e->getMessage();
25. }
26. exit(CJSON::encode($var));
27. }

   

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