Laraveladmin配置wangEditor3富文本编辑器图片七牛云上传

第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 文件添加以下代码引入下载的资源。

第4步

注释 app/Admin/Extensions/WangEditor.php 文件中的 render 方法。同时注意修改 $css, $js 路径中的版本号（修改为您下载的 wangEditor3 资源对应版本）。

第5步

复制以下代码至 resources/views/admin/wang-editor.blade.php 文件末尾。

第6步

后端实现 uptoken_url 接口。



首先需要安装七牛 PHP SDK：

composer require qiniu/php-sdk

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 图片七牛云上传功能。如有问题和发现文章错误，欢迎评论区指出和讨论。