七牛与 Ueditor 的那些事儿

前言

ueditor是我个人在目前国内发现最完善的富文本编辑器，也有相当多的同行都在使用它进行开发。但是，在开发过程中，我们需要配合七牛和php环境，以及达到我们自身需要的功能点，就需要我们付出很多心血来融合和改进一些内容了。

最开始，七牛服务器配置

第一步，拥有七牛账号

通过账号登录七牛，创建存储空间，这里我创建的空间名称为“gdxxx",因为客户在广东，所以选择在华南。这个名称对应下面laravel的七牛配置名称”bucket“（很多网络文章没有说明这一点，对于新手来说就非常头疼，需要到七牛中寻找各种可能匹配的地方。）

gdxxx右侧有个测试域名，这个对应下面配置中的domain：

oq94vqxxx.xxx.clouddn.com

说明：测试域名最好只用于开发阶段，进入生产环境时，改为正式域名，防止某个时间突然无法访问。

再点击页面右上角“个人面板”=》“秘钥管理”
可以看到2个秘钥：

AK：对应下面的 access_key
SK：对应下面的 secret_key

第二步，安装安正超七牛插件包：

https://github.com/overtrue/laravel-filesy...
安装完后，检查是否同时安装的七牛SDK7.2版本，如果是，将会出现下面这种情况：

将会出这样的现象：配置，上传都是ok，就是在最后一步显示有问题。“上传错误”，“本地保存成功”。

就这个问题前前后后发现，调试，到解决花了将近3个小时，希望后面可以节约大家的时间。

单步调试情况，第24472行报的错：

Uncaught SyntaxError: Unexpected identifier
at new Function ()

所以，在composer.json中修改sdk的版本为：

"qiniu/php-sdk": "7.1",

如果发现前面有“^“，必须把7.1前面的"^"去掉就可以正常上传和显示，也就是目前超兄的ueditor七牛插件包只支持7.1版本的。
7.2版本的在24471行的result返回的值前面有“ query from “字样（这个是7.2中 vendor/qiniu/php-sdk/src/Qiniu/Config.php的getZone() 在返回结果时自动加上的），正是这个导致ueditor前端无法正常解析和显示图片。
【此问题已跟安兄反馈，相信近期可解决】

config/app.php中配置:

Overtrue\LaravelFilesystem\Qiniu\QiniuStorageServiceProvider::class,

修改config/filesystems.php,添加：

'qiniu' => [
'driver' => 'qiniu',
'domain' => env('QINIU_DOMAIN', 'xxx.clouddn.com'), //你的七牛域名
'access_key'=> env('QINIU_ACCESS_KEY', ''), //AccessKey
'secret_key'=> env('QINIU_SECRET_KEY', ''), //SecretKey
'bucket' => env('QINIU_BUCKET', 'test'), //Bucket名字
],

注意：有的七牛插件包这里是用的domains，里面再包含缩小元素，比如default就是缺省域名。但是使用其他七牛插件包来配合ueditor时，就格外需要注意这个域名在这里的书写形式了。

修改.env,添加：

QINIU_DOMAIN=oq94vxxxx.xxx.clouddn.com
QINIU_BUCKET=gdxxx
QINIU_ACCESS_KEY=2_g1KWxxxxxy_GI8Vm38iNt9YtoLxxxxxx
QINIU_SECRET_KEY=5Wxxxxxr8PTlpS8pZtuyW9O8xxxxxxx

第三步，安装安正超Ueditor插件包：

https://github.com/overtrue/laravel-uedito...

$ composer require "overtrue/laravel-ueditor:~1.0"

config/app.php 中 providers 部分：

Overtrue\LaravelUEditor\UEditorServiceProvider::class,

$ php artisan vendor:publish

在需要Ueditor的页面添加：

@include('vendor.ueditor.assets')

同时在该页面加上script用来产生ueditor实例，同时绑定文本框。下面同时配置了用ueditor上传单文件（封面），和图文编辑功能。
（注：1，如果将以下内容直接放到单独的js文件，再引入，会报token异常；2，下面的_token必须在html的head中添加meta）：

<script type="text/javascript">
    var _editor = UE.getEditor('upload_ue', {
        isShow: false
    });
    //弹出图片上传的对话框
    function upImage() {
        var myImage = _editor.getDialog("insertimage");
        myImage.open();
    }
    $(document).ready(function () {
        var ue = UE.getEditor('content');
        _editor.ready(function () {
            _editor.execCommand('serverparam', '_token', '{{ csrf_token() }}'); // 设置封面上传 CSRF token.
            _editor.addListener('beforeInsertImage', function (t, arg) {
                $("#cover").attr("value", arg[0].src);
                $("#preview").attr("src", arg[0].src);
            })
            ue.execCommand('serverparam', '_token', '{{ csrf_token() }}'); // 设置内容图片上传 CSRF token.
        });
    });
</script>

第四部，参照插件包中的说明

在 config/ueditor.php 配置 disk 为 'public' 情况下，上传路径在：public/uploads/ 下，确认该目录存在并可写。
如果要修改上传路径，请在 config/ueditor.php 里各种类型的上传路径，但是都在 public 下。
请在 .env 中正确配置 APP_URL 为你的当前域名，否则可能上传成功了，但是无法正确显示。

以下内容为开发中碰到的各种疑难杂症，大家可以根据自身情况对症下药。

如果在使用过程中发现无法正常使用，可以考虑
！！！先将插件包升级！！！
目前我所知的是下面这个插件包中存在一些小问题，

"overtrue/laravel-filesystem-qiniu": "^0.0.1",

可更换为：

composer require "overtrue/flysystem-qiniu" -vvv

目前来看，都需要更新为0.02版：

"overtrue/laravel-filesystem-qiniu": "^0.02",
“overtrue/flysystem-qiniu”： "^0.02",

如果你在开发过程中碰到上传问题，可以着手研究这个三个类：

QiniuStorageServiceProvider
StorageManager
QiniuAdapter

上传视频时出现问题：

ueditor::upload.UPLOAD_ERR_NO_FILE
php.ini 里边 post_max_size 、 upload_max_filesize 这两个参数改一下就好了

另外，上传失败的原因有很多，上传大小限制，php执行时间限制，内存限制，post上传最大时间限制。比如我们可以对这些参数进行设置：

post_max_size=100M，
upload_max_filesize=100M；
max_execution_time=1200，
memory_limit=256M，
max_input_time=1200。

html页面上传大文件超过500M时，可能会出现后台无法获取文件的情况： UPLOAD_ERR_NO_FILE
当然，有时候可能100多M时也会出现这种情况。大文件还是不建议直接html传，万一中间断片了，又得重头来过了。

net::ERR_CONNECTION_RESET

经过多方查找，原来是因为我使用了nginx反响代理的原因。nginx在做反向代理时，默认的可以上传的附件大小是1M，可以通过设置nginx.conf中的client_max_body_size进行更改：

client_max_body_size 35m;

在生产环境中仅设置上面的参数时好时坏，不知道啥原因，又增加了下面的设置后没出现过问题，记录一下：

client_body_temp_path /home/www/nginx_temp;

视频无法播放：

参考资料： http://www.bkjia.com/webzh/893101.html
后台插入视频时，将播放器替换为：

'<video class="edui-upload-video  vjs-default-skin  video-js" controls="" preload="none"' +
    ' src="' + conUrl + '"' +
    ' width="' + 420  + '"' +
    ' height="' + 280  + '"' +
    ' data-setup="{}">' +
'<source src="' + conUrl + '"' + 'type="video/mp4"/></video>';

<video class="edui-upload-video  vjs-default-skin       video-js" controls="" preload="none" width="420" height="280" src="http://oq94xxxxx.xxx.clouddn.com/uploads/video/2017/05/26/626034_1. xxx.mp4" data-setup="{}">
        <source src="http://oq94xxxxx.xxx.clouddn.com/uploads/video/2017/05/26/626034_1. xxx.mp4" type="video/mp4"/>
    </video>

在前台播放的时候，需要引入两个js，（火狐或谷歌支持ＨＴＭＬ标签的）

<link type="text/css" rel="stylesheet" href="/ueditor/third-party/video-js/video-js.css"/>
<script language="javascript" type="text/javascript" src="/ueditor/third-party/video-js/video.js"></script>

多图上传中，超过20张图，后面无法显示

虽然后台提供了分页功能，但是在编辑器中下拉没有反应，也没有相应的下一页和上一页按钮。
分析源代码后，已经发现问题。是UEditor在
/vendor/ueditor/dialogs/image/image.js的第874行逻辑判断有问题。
将 if(_this.listIndex>= json.total) { 修改为if(_this.listSize > json.total) {即可。

map从http转向https问题：

but requested an insecure script 'http://api.map.baidu.com/api?key=&v=1....'. This request has been blocked; the content must be served over HTTPS.

修改ueditor/dialogs/map/show.html文件中第17行代码

<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
为
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=http://api.map.baidu.com/api?v=2.0&ak=C3610691ad8cd2eab4cxxxxxxxxxxx"></script>

其中，ak 也就是你的开发账号中对应的开发key了。
前端map中的代码：

<p style="text-align: center;">
    <span style="color: rgb(102, 102, 102); font-family: " pingfang="" font-size:=""><br/></span>
</p>
<p style="text-align: center;">
    <span style="font-size: 18px;"><strong><span style="color: rgb(102, 102, 102);" pingfang="" font-size:="">联系我们</span></strong></span><br/>
</p>
<p>
    <br/>
</p><script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="main" src="https://api.map.baidu.com/getscript?type=quick&file=feature&ak=o9B4Ol99j9xxxxxxTR7uI&t=20140109092002"></script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="main" src="https://api.map.baidu.com/getscript?type=quick&file=api&ak=C3610691ad8cd2eab4c1349dxxxxxx&t=20140109092002"></script>
<p style="text-align: center;">
    <iframe class="ueditor_baidumap" src="https://xxxx.cn/vendor/ueditor/dialogs/map/show.html#center=113.360449,23.184564&zoom=18&width=530&height=340&markers=113.360984,23.188431&markerStyles=l,A" frameborder="0" width="534" height="344"></iframe>
</p>
<p>
    <br/>
</p>
<p>
    <br/>
</p>