使用百度编辑器几个小技巧

浏览:3008 发布日期:2016/10/19 分类:ThinkPHP5专区 关键字: thinkphp 5.01 百度编辑器
百度编辑器很强大,不过也有让人烦恼的地方,下面分享几个小技巧:
一、使用变量自定义上传路径和文件名:
文件位置:ueditor/php/Uploader.class.php 和 config.json;
新的百度编辑器可以在config.json文件里自定义各种文件上传的路径,但是我们经常要在不同地方使用不同的上传路径和不同的文件名。
方法如下:百度编辑器提供了一个参数传递的方法,可以让我们简单实现使用变量来控制上传路径和自定义文件名
1、在引入编辑器的html页JS代码里加入:ue.ready(function() {  //ue是实例编辑器时取得名字
    var op_time = document.getElementById("token").value;
    ue.execCommand('serverparam', {
        'picdir':'news',//向后台Uploader.class.php传递的参数,可以根据自己情况使用,比如文件夹名称或文件名之类,路径也行;
        'op_time':op_time,
    });
})
2、Uploader.class.php文件里第284行的getFullName()函数里使用$_get['']获取这些参数;$picdir = $_GET['picdir'];
$op_time = $_GET['op_time'];
并按照编辑器的设置方法配置变量$format = str_replace("{op_time}", $op_time, $format);
$format = str_replace("{picdir}", $picdir, $format);
3、在config.json文件把你自定义的参数添加进去:"imagePathFormat": "/uploads/image/{picdir}/{op_time}_{time}", /* 上传保存路径,可以自定义保存路径和文件名格式 */这样设置好了以后,就可以只使用一个编辑器,处理不同的需求了;

二、多余的图片/文件处理:
百度编辑器对于输入框里的文件和图片都是先上传服务器再获取回来,这样就会导致很多无效文件存放在服务器里占用资源,有两个方法可以解决这个问题。
1、备份文件名方法,这个比较简单,我们在提交表单到后台的时候,把内容content里的图片名或文件名取出来,然把文件名保存到数据库或文件里,需要清理的时候把这些取出来做对比,删掉多余的就可以了;
新上传的文件或图片在内容content里都带有title属性,用于存放文件名;
比如这样:$data = $request->param();
$path = "uploads/image/news";//新闻图片路径
$content = $data['content'];
preg_match_all('/title=".*?jpg|jpeg|gif|png/', $content, $img);//获得实际使用的图片
$imgs  = $img[0];//$img是一个多维数组,我们只需要第一个;
$news = new News;
foreach ($imgs as $value){
    $img_name = substr_replace($value,"",0,7);//干净的文件名称
    $i_fs[] = $path."/".$img_name;//带路径的图片数组,用于删除多余图片做对比;
    $news->img_name = $img_name; $news->save();
}
2、实时的删掉多余的文件或图片,稍微复杂一点点,方法如下:
第一步:在表单页加入一个即时参数,可以是自定义的,比如time(),也可以使用TP5的token数据,并把这个参数用上面使用编辑器的传递参数方法传到后台用于构造文件名,比如我的构造是{op_time}_{time}
第二步:照上面的方法取出实际使用的图片名或文件名数组;
第三步:取出保存图片文件夹里所有具有{op_time}前缀的文件;$f_url  = glob("$path/$op_time*.*");//本次已上传的所有图片第四步:对比两个数组,删掉多余的;$diff = array_diff($i_fs,$f_url);
if(!empty($diff)){
    foreach($diff as $f){
       unlink($f);
       echo "已删除:".$f."<br>";
   }
}
这个方法还有不完善的地方,比如保存了图片后页面刷新和关闭浏览器,因为各浏览器的差异,处理这个嫌麻烦,就没有去完善了,配合第一个方法使用,用来减少服务器压力;

三、编辑器为空的判断
经常会有误点提交按钮导致编辑器为空提交的情况,因为无法获得编辑器的实际ID,前端验证可以使用一个折中的办法:
1、建一个诸如信息提示的DOM,比如:<p class="help-block" id="myeditormsg" align="right"></p>;
2、在引入编辑器的JS代码里用以下代码验证编辑器是否为空:var msg = $("#myeditormsg"); //信息提示DOM的ID;
this.onblur=function(){ //this指的是编辑器输入框对象;
    if(ue.getContent() === ""){ //getContent()是百度编辑器内置的获取内容的方法
     msg.text("*不能为空");
    }
    else{
        msg.text("ok");
}
3、根据各自实际情况,只需要验证msg的状态,就可以在提交时验证编辑器是否为空了;
最佳答案
评论( 相关
后面还有条评论,点击查看>>