七牛与 Ueditor 的那些事儿
8

前言

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

最开始,七牛服务器配置

第一步,拥有七牛账号

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

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

oq94vqxxx.xxx.clouddn.com

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

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

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

第二步,安装安正超七牛插件包:

https://github.com/overtrue/laravel-filesystem-qiniu
安装完后,检查是否同时安装的七牛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-ueditor

$ 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,(火狐或谷歌支持HTML标签的)

<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.1&services=true'. 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>

结束语

写在这里面的很多内容,都是耗费了时间研究和处理的,然后一点一点终结出来。不为别的,只为大家能节约时间。
后面如有其它相关问题和解决方案,会随时更新的。

努力是不会骗人的!

《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
讨论数量: 2
bestony

可以考虑直接提交PR来更新源库

1年前

文章的整体逻辑还不够清晰具体、没有突出重点,建议你把开发流程、遇到的问题和你的解决方案分开写,以及重点概要注意什么,还有待提高,加油!

1年前

  • 请注意单词拼写,以及中英文排版,参考此页
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`, 更多语法请见这里 Markdown 语法
  • 支持表情,使用方法请见 Emoji 自动补全来咯,可用的 Emoji 请见 :metal: :point_right: Emoji 列表 :star: :sparkles:
  • 上传图片, 支持拖拽和剪切板黏贴上传, 格式限制 - jpg, png, gif
  • 发布框支持本地存储功能,会在内容变更时保存,「提交」按钮点击时清空
  请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!