百度编辑器 UEditor

应用场景：
使用UEditor上传图片，文件等到七牛云服务器，
结果：编辑器图片链接为七牛云链接

sdk资源准备

七牛云 phpSDK 重命名为qiniuyun
UEditor [1.4.3.3 php] utf-8版重命名为ueditor

集成到thinkphp3.2.3

因为UEditor已经帮我们写好了php代码，但后缀是.php的，这意味着在thinkphp中，这些文件属于外来的。那么这里就按照外来的文件对待。
直接将UEditorsdk和七牛云sdk一起复制到thinkphp3.2.3中的Public目录下面。

想放在别的目录也可以，但是这里不适合再用thinkphp的方法，请将思维转回到传统php来。所以，我才选择放在Pulick目录下面

目录结构如下图:

Public
- qiniuyun
- ueditor

改造UEditor

这时的UEditor处理图片的方法是将图片上传到网址根目录下面。具体配置在ueditor/php/config.json文件中。

下面将以上传图片为例：

修改ueditor/php/config.json配置如下：

1
2

"imageUrlPrefix": "http://o7atl50ri.bkt.clouddn.com/", /* 图片访问路径前缀，七牛云域名 */
"imagePathFormat": "{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式，七牛云图片名称 */

这里的配置会返回七牛云链接http://o7atl50ri.bkt.clouddn.com/文件名，并插入到UEditor内容中去。

修改ueditor/php/Uploader.class.php如下:

在Uploader类开始处引入七牛云SDK

1	require_once 'qiniuyun/autoload.php';

增加七牛云上传方法uploadQiniu:

/**
     * 上传七牛云
     * @param $key 七牛云文件名
     * @param $filePath $_FILE[]['tmp_name']
     * @return mixed
     * @throws Exception
     */
    private function uploadQiniu($key, $filePath){
        $auth = new \Qiniu\Auth('RYyqdPimpYxIUJl4KVcJ6APplN90d5CEpU1kZ-a6','mOQ5hXi3OVLMA4uy346lYq3cDvSCdKNeGLDwv8UE');
        // 要上传的空间
        $bucket = 'gymfile'; 
        // 生成上传 Token
        $token = $auth->uploadToken($bucket);
        // 初始化 UploadManager 对象并进行文件的上传
        $uploadMgr = new \Qiniu\Storage\UploadManager();
        // 调用 UploadManager 的 putFile 方法进行文件的上传
        list($ret, $err) = $uploadMgr->putFile($token, $key, $filePath);
        if ($err !== null) {
            return false;
        } else {
            return true;
        }
    }

修改Uploader类中文件上传方法,最后几行如下:

原来方法是上传到网址根目录，这里修改成直接上传到七牛云。

//移动文件,上传到七牛云
$res = $this->uploadQiniu($this->fullName, $file["tmp_name"]); //此处修改
if (!($res)) { //移动失败 此处修改
    $this->stateInfo = $this->getStateInfo("ERROR_FILE_MOVE");
} else { //移动成功
    $this->stateInfo = $this->stateMap[0];
}

到这里改造结束。如果在form表单提交到后台时，还想提取编辑器传过来内容中的图片链接，请往下看

提取编辑器中所有图片链接

1
2
3

$content = I('post.editorValue');
preg_match_all('<img.*?src="(.*?)">',ltgt($content),$match); //ltgt()方法是将`<`,`>`等再转换回来
$files = $match[1];

$match[1]中即为编辑器中所有图片链接

提取$match[1]中，所有七牛云文件名:

$urlKey = array();
foreach($files as $k=>$v){
   $urlKey[$k] = substr(strrchr($v, '/'),1);
}

$urlKey和$match[1]中的数据一一对应，文件名:文件地址

UEditor常用配置

,charset:"utf-8"  //针对getAllHtml方法，会在对应的head标签中增加该编码设置。
,initialFrameHeight:500  //初始化编辑器高度,默认320
,textarea:'editorValue' // 提交表单时，服务器获取编辑器提交内容的所用的参数，多实例时可以给容器name属性，会将name给定的值最为每个实例的键值，不用每次实例化的时候都设置这个值
,initialContent:'欢迎使用ueditor!'    //初始化编辑器的内容,也可以通过textarea/script给值，看官网例子

ltgt()方法

//&lt;转成<,&rt;转成>,&quot;转成"
function ltgt($str){
    $lt = str_replace('&lt;','<',$str);
    $gt = str_replace('&gt;','>',$lt);
    $quot = str_replace('&quot;','"',$gt);
    return $quot;
}