laravel -admin 整合wangEditor並實現上傳圖片
阿新 • • 發佈:2019-01-10
整合wangEditor
http://laravel-admin.org/docs/#/zh/model-form-field-management
wangEditor是一個優秀的國產的輕量級富文字編輯器,如果laravel-admin
自帶的基於ckeditor
的編輯器元件使用上有問題,可以通過下面的步驟可以整合它,並覆蓋掉ckeditor
:
先下載前端庫檔案wangEditor,解壓到目錄public/vendor/wangEditor-3.0.9
。
然後新建元件類app/Admin/Extensions/WangEditor.php
。
<?php
namespace App\Admin\Extensions;
use Encore\Admin\Form\Field;
class WangEditor extends Field
{
protected $view = 'admin.wang-editor';
protected static $css = [
'/vendor/wangEditor-3.0.9/release/wangEditor.min.css',
];
protected static $js = [
'/vendor/wangEditor-3.0.9/release/wangEditor.min.js',
];
public function render()
{
$name = $this->formatName($this->column);
$this->script = <<<EOT
var E = window.wangEditor
var editor = new E('#{$this->id}');
editor.customConfig.zIndex = 0
editor.customConfig.uploadImgShowBase64 = true
editor.customConfig.onchange = function (html) {
$('input[name=\'$name\']').val(html);
}
editor.create()
EOT;
return parent::render();
}
}
新建檢視檔案resources/views/admin/wang-editor.blade.php
:
<div class="form-group {!! !$errors->has($label) ?: 'has-error' !!}">
<label for="{{$id}}" class="col-sm-2 control-label">{{$label}}</label>
<div class="{{$viewClass['field']}}">
@include('admin::form.error')
<div id="{{$id}}" style="width: 100%; height: 100%;">
<p>{!! old($column, $value) !!}</p>
</div>
<input type="hidden" name="{{$name}}" value="{{ old($column, $value) }}" />
</div>
</div>
然後註冊進laravel-admin
,在app/Admin/bootstrap.php
中新增以下程式碼:
<?php
use App\Admin\Extensions\WangEditor;
use Encore\Admin\Form;
Form::extend('editor', WangEditor::class);
呼叫:
$form->editor('body');
上傳圖片
使用整合好的編輯器上傳圖片還需要配置幾個資訊
1: token,不配置token會報419錯誤
2: 上傳路徑,使用base64儲存會報長度過長錯誤,所以需要自行上傳到伺服器
3: 自定義上傳名稱,可選
4: 自定義上傳大小限制,可選
最終配置為
public function render()
{
$name = $this->formatName($this->column);
$this->script = <<<EOT
var E = window.wangEditor
var editor = new E('#{$this->id}');
editor.customConfig.zIndex = 0
editor.customConfig.uploadImgHeaders = {
'X-CSRF-TOKEN': $('input[name="_token"]').val()
}
editor.customConfig.uploadImgServer = '/api/upimage'
editor.customConfig.uploadFileName = 'wangpic[]'
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024
editor.customConfig.onchange = function (html) {
$('input[name=\'$name\']').val(html);
}
editor.create()
EOT;
return parent::render();
}
路由
$router->post('upimage', '[email protected]');
上傳
public function upimage(Request $request) {
$files = $request->file("wangpic");
$res = ['errno' => 1, 'errmsg' => '上傳圖片錯誤'];
$data = [];
foreach($files as $key => $file) {
$ext = strtolower($file->extension());
$exts = ['jpg', 'png', 'gif', 'jpeg'];
if(!in_array($ext, $exts)) {
$res = ['errno' => 1, 'errmsg' => '請上傳正確的圖片型別,支援jpg, png, gif, jpeg型別'];
return json_encode($res);
} else {
$filename = time() . str_random(6) . "." . $ext;
$filepath = 'uploads/images/' . date('Ym') . '/';
if (!file_exists($filepath)) {
@mkdir($filepath);
}
$savepath = config('app.url') . '/' . $filepath . $filename;
if ($file->move($filepath, $filename)) {
$data[] = $savepath;
}
}
}
$res = ['errno' => 0, 'data' => $data];
return json_encode($res);
}