第1步
按 Laravel-admin 官方文件擴充套件自定義元件整合 wangEditor3 編輯器。
連結：整合富文字編輯器wangEditor
第2步
到 wangEditor3 demo 下載 ./demo/js/plupload 資料夾及 qiniu.js 檔案。
下載 Git 檔案及資料夾推薦使用：DownGit
下載完成後解壓放至專案根目錄 public/js 目錄下。
第3步
編輯 resources/views/admin/wang-editor.blade.php 檔案新增以下程式碼引入下載的資源。
<script type="text/javascript" src="{{ URL::asset('/js/plupload/plupload.full.min.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('/js/plupload/i18n/zh_CN.js') }}"></script>
<script src="{{ URL::asset('js/qiniu.js') }}"></script>第4步
註釋 app/Admin/Extensions/WangEditor.php 檔案中的 render 方法。同時注意修改 $css, $js 路徑中的版本號（修改為您下載的 wangEditor3 資源對應版本）。
第5步
複製以下程式碼至 resources/views/admin/wang-editor.blade.php 檔案末尾。
<script>
$(function () {
const E = window.wangEditor
const editor = new E('#{{ $id }}');
editor.customConfig.zIndex = 0
editor.customConfig.uploadImgShowBase64 = true
editor.customConfig.onchange = function (html) {
$("input[name='{{ $name }}']").val(html);
}
editor.create()
// 初始化七牛上傳
uploadInit()
// 初始化七牛上傳的方法
function uploadInit() {
// 獲取相關 DOM 節點的 ID
var btnId = editor.imgMenuId;
var containerId = editor.toolbarElemId;
var textElemId = editor.textElemId;
// 建立上傳物件
var uploader = Qiniu.uploader({
runtimes: 'html5,flash,html4', //上傳模式,依次退化
browse_button: btnId, //上傳選擇的點選按鈕，**必需**
uptoken_url: '/api/uptoken',
//Ajax請求upToken的Url，**強烈建議設定**（服務端提供）
// uptoken : '<Your upload token>',
//若未指定uptoken_url,則必須指定 uptoken ,uptoken由其他程式生成
// unique_names: true,
// 預設 false，key為檔名。若開啟該選項，SDK會為每個檔案自動生成key（檔名）
// save_key: true,
// 預設 false。若在服務端生成uptoken的上傳策略中指定了 `sava_key`，則開啟，SDK在前端將不對key進行任何處理
domain: '',
//bucket 域名，下載資源時用到，**必需**
container: containerId, //上傳區域DOM ID，預設是browser_button的父元素，
max_file_size: '100mb', //最大檔案體積限制
flash_swf_url: "{{ URL::asset('/js/plupload/Moxie.swf') }}", //引入flash,相對路徑
filters: {
mime_types: [
//只允許上傳圖片檔案 （注意，extensions中，逗號後面不要加空格）
{ title: "圖片檔案", extensions: "jpg,gif,png,bmp" }
]
},
max_retries: 3, //上傳失敗最大重試次數
dragdrop: true, //開啟可拖曳上傳
drop_element: textElemId, //拖曳上傳區域元素的ID，拖曳檔案或資料夾後可觸發上傳
chunk_size: '4mb', //分塊上傳時，每片的體積
auto_start: true, //選擇檔案後自動上傳，若關閉需要自己繫結事件觸發上傳
init: {
'FilesAdded': function(up, files) {
plupload.each(files, function(file) {
// 檔案新增進佇列後,處理相關的事情
printLog('on FilesAdded');
});
},
'BeforeUpload': function(up, file) {
// 每個檔案上傳前,處理相關的事情
printLog('on BeforeUpload');
},
'UploadProgress': function(up, file) {
// 顯示進度
printLog('進度 ' + file.percent)
},
'FileUploaded': function(up, file, info) {
// 每個檔案上傳成功後,處理相關的事情
// 其中 info 是檔案上傳成功後，服務端返回的json，形式如
// {
// "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
// "key": "gogopher.jpg"
// }
printLog(info);
// 參考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html
var domain = up.getOption('domain');
var res = $.parseJSON(info);
var sourceLink = domain + res.key; //獲取上傳成功後的檔案的Url
printLog(sourceLink);
// 插入圖片到editor
editor.cmd.do('insertHtml', '<img src="' + sourceLink + '" style="max-width:100%;"/>')
},
'Error': function(up, err, errTip) {
//上傳出錯時,處理相關的事情
printLog('on Error', err);
},
'UploadComplete': function() {
//佇列檔案處理完畢後,處理相關的事情
printLog('on UploadComplete');
}
// Key 函式如果有需要自行配置，無特殊需要請註釋
//,
// 'Key': function(up, file) {
// // 若想在前端對每個檔案的key進行個性化處理，可以配置該函式
// // 該配置必須要在 unique_names: false , save_key: false 時才生效
// var key = "";
// // do something with key here
// return key
// }
}
// domain 為七牛空間（bucket)對應的域名，選擇某個空間後，可透過"空間設定->基本設定->域名設定"檢視獲取
});
}
// 封裝 console.log 函式
function printLog(title, info) {
window.console && console.log(title, info);
}
});
</script>第6步
後端實現 uptoken_url 介面。
首先需要安裝七牛 PHP SDK：
composer require qiniu/php-sdk<?php
namespace App\Http\Controllers\Api;
use Illuminate\Http\Request;
use Qiniu\Auth;
use Qiniu\Storage\UploadManager;
class QiniuController extends Controller
{
private $cfg = [
'access' => '',
'secret' => '',
'bucket' => '',
'domain' => ''
];
public function index()
{
$auth = new Auth($this->cfg['access'], $this->cfg['secret']);
$token = $auth->uploadToken($this->cfg['bucket'], null, 3600);
return response()->json(['uptoken' => $token]);
}
}最後一步
修改 public/js/qiniu.js 檔案。查詢 http://upload.qiniu.com/ 全部替換為您的儲存區域地址。
至此完成了 Laravel-admin 富文字編輯器 wangEditor3 圖片七牛雲上傳功能。如有問題和發現文章錯誤，歡迎評論區指出和討論。
本作品採用《CC 協議》，轉載必須註明作者和本文連結