前天我提到了 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));
- }
已测试通过, 如果还有不明白的地方,欢迎探讨。