七牛與 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，（火狐或谷歌支援ＨＴＭＬ標籤的）

<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>

結束語

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

努力是不會騙人的！

相關文章