七牛与 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,(火狐或谷歌支持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....'. 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>
结束语
写在这里面的很多内容,都是耗费了时间研究和处理的,然后一点一点终结出来。不为别的,只为大家能节约时间。
后面如有其它相关问题和解决方案,会随时更新的。
本作品采用《CC 协议》,转载必须注明作者和本文链接
可以考虑直接提交PR来更新源库
文章的整体逻辑还不够清晰具体、没有突出重点,建议你把开发流程、遇到的问题和你的解决方案分开写,以及重点概要注意什么,还有待提高,加油!