七牛與 Ueditor 的那些事兒

storefee發表於2017-08-25

前言

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>

結束語

寫在這裡面的很多內容,都是耗費了時間研究和處理的,然後一點一點終結出來。不為別的,只為大家能節約時間。
後面如有其它相關問題和解決方案,會隨時更新的。

努力是不會騙人的!

相關文章