summernote入门－自定义上传－删除垃圾文件

1. summernote是什么?

summernote 是在bootstrap基础上的一款开源富文本编辑器.

2.如何使用?

在网页首部引入bootstrap和summernote的css文件

<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="summernote/summernote.css">

在网页底部引入jQuery文件(1.8以上版本1.9. 1.10都可以)

<script type="text/javascript" src="jquery-1.10.1.js"></script>

在网页底部引入bootstrap和summernote的js文件

<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="summernote/summernote.min.js"></script>

初始化一个textarea

<textarea name="test" id="input-textarea" cols="30" rows="10" class="form-control"></textarea>

在网页底部新建一个script标签

<script type="text/javascript">
    $(function(){
        $('#input-textarea').summernote({height:300});
    });
</script>

刷新页面就可以看到效果

3.图片base64编码?

在编辑器中插入一张图片, 发现图片是以base64编码存在的.
且不说base64编码存到数据库有没有长度问题, 光看着一大堆字符串也闹心..
于是我们需要自定义上传图片.自己处理上传的图片

summernote有很多配置项可用 其中有一个 callbacks配置项
源码里有这么多

    callbacks: {
        onInit: null,
        onFocus: null,
        onBlur: null,
        onEnter: null,
        onKeyup: null,
        onKeydown: null,
        onImageUpload: null,
        onImageUploadError: null
      }

只要英语不是太差. 这些东西自然都能看懂..
那么我们定义onImageUpload 方法

callbacks: {
            onImageUpload:  function(files){
                var formData = new FormData();
                formData.append('file', files[0]);
                $.ajax({
                    url: "upload.php",
                    type: "post",
                    data: formData,
                    dataType: "json",
                    processData : false,
                    contentType : false,
                    success: function(res){
                        $('#input-textarea').summernote('insertImage', res.path, 'img');
                    }
                });
            }
        }

传递进来一个文件数组, 就一个成员. 所以直接files[0]就可以了
新建一个formData对象, 使用append方法添加文件
再用ajax上传到服务器就可以了, 服务器需要返回处理之后的图片路径
上传成功的时候调用insertImage, 将路径传进去

success: function(res){
    $('#input-textarea').summernote('insertImage', res.path, 'img');
}

这样我们就完成了浏览器端的自定义上传文件工作

服务器端:
服务器端的主要工作就是, 接受上传的图片,并返回文件路径, 以供编辑器回显

我们主要需要调用 move_uploaded_file 来移动上传的文件到制定的 –临时路径–

上传完成后返回临时文件路径, 上传文件的工作就已经完成了.

这时我们完成了自定义图片上传…

<?php
        header("content-type: application/json");

        /*
            省略 文件验证...大小...类型
        */

        $realPath = pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION);
        $filePath = 'uploads/'.date("Ymd")."tmp/";
        $fileName = uniqid().'.'.$realPath;

        if(!file_exists($filePath)){
            mkdir($filePath);
        }
        //移动文件到当天tmp目录
        move_uploaded_file($_FILES['file']['tmp_name'], $filePath.$fileName);

        //返回临时文件路径
        echo json_encode(['path'=>$filePath.$fileName]);

4. 在编辑时. 删除图片会在服务器端产生垃圾图片怎么处理?

现象:
在我们使用编辑器正常编辑时, 一定会出现选错图片, 删除图片, 重新上传新图片的过程. 那么这时在我们的服务器端就会产生非常多的垃圾文件. 这些文件用户永远访问不到.
如果不管, 占用的资源就越来越多

处理办法:
上传文件时上传到临时目录. 等编辑完毕提交到服务器, 取出文本中的临时文件地址. 移动到非临时目录 替换文本中的临时地址为新的地址. 插入数据库
遇到的问题:
　1. 如何取到文本中的临时文件地址?
　　利用正则匹配文本中的img标签. 取到src值
　2. 在什么时候删除临时文件?
　　在每天第一次提交表单的时候
　3. 如何判断文件是垃圾文件?
　　上传时会分目录(时间段, date(‘Ymd’).’/tmp’)保存上传的临时图片 如果目录名不是今天 并且 带有tmp字符串那么这个文件夹下所有的图片都是垃圾图片直接删除文件夹即可
　　
代码:

<?php 

if(empty($_POST)){
    return false;
}
//获取post测试数据
$str = $_POST['test'];

/*
判断有没有当天上传的文件夹
如果没有删除当天以前的所有tmp文件夹 并且创建当天的文件夹
*/
if( !is_dir('uploads/'.date('Ymd')) ){
    file_walk('uploads', function($file){

        if(is_dir($file) && strpos( $file,'tmp' )!==false && strpos($file, 'uploads/'.date('Ymd')) === false){
            _rmdir($file);
        }
    }, false);

    mkdir('uploads/'.date('Ymd'));
}

/*
    匹配到<img>中的图片地址
    对图片文件进行移动
    替换新的路径
    返回替换后的文本
*/
$str = preg_replace_callback('#<img.*?src="(.*?)"#', function($imgs){
    if(isset($imgs[1])){

        $dpath = str_replace('tmp', '', $imgs[1]);
        $path = realpath($imgs[1]);

        if($path){
            rename($path, $dpath);
        }

        return str_replace('tmp','', $imgs[0]);
    }
}, $str);

echo "<pre>";

var_dump($str);
/*
    得到字符串
    存到数据库....
*/

/*文件夹遍历:*/
function file_walk($dir, $callback, $digui=true){

    $hanld = dir($dir);

    while(($file = $hanld->read())!==false){
        if($file == '.' || $file == '..'){
            continue;
        }
        $file_name = $dir.'/'.$file;
        if($digui){
            if(is_dir($file_name)){
                file_walk($file_name, $callback);
            }
        }
        call_user_func_array($callback, array($file_name));
    }
    $hanld->close();
}

/*
    传入文件夹名递归删除文件, 包括传入的文件夹
*/
function _rmdir($dir){
    if(is_dir($dir)){
        file_walk($dir, function($file){
            if(is_file($file)){
                unlink($file);
            }else{
                rmdir($file);
            }
        });
    }
    rmdir($dir);
}