1、下載CKEditor4.9.2,將ckeditor文件夾放進(jìn)public/packages中
2、然后新建擴(kuò)展文件app/Admin/Extensions/Form/CKEditor.php :
namespace App\Admin\Extensions\Form;
use Encore\Admin\Form\Field;
class CKEditor extends Field
{
public static $js = [
'/packages/ckeditor/ckeditor.js',
'/packages/ckeditor/adapters/jquery.js',
];
protected $view = 'admin.ckeditor';
public function render()
{
$this->script = "$('textarea.{$this->getElementClassString()}').ckeditor();";
return parent::render();
}
}
3、新建view:resources/views/admin/ckeditor.blade.php:
<div class="form-group {!! !$errors->has($errorKey) ?: 'has-error' !!}">
<label for="{{$id}}" class="col-sm-2 control-label">{{$label}}</label>
<div class="col-sm-8">
@include('admin::form.error')
<textarea class="form-control {{ $class }}" name="{{$name}}" placeholder="{{ $placeholder }}" {!! $attributes !!} >{{ old($column, $value) }}</textarea>
@include('admin::form.help-block')
</div>
</div>
4、ckeditor默認(rèn)不開(kāi)啟image上傳,在ckeditor/plugins/image/dialogs/image.js:
(1)搜索id:"Upload",然后把后面的hidden:!0 改為 hidden:0
(2)去掉預(yù)覽的默認(rèn)文字,在本js里有一段“Lorem ipsum dolor sit amet……”的火星文,把這段文字刪掉,保留雙引號(hào),最終該片段變?yōu)?d.config.image_previewText||'')
5、設(shè)置ckeditor的圖片上傳服務(wù)器路徑,在ckeditor/config.js
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.filebrowserImageUploadUrl = "/admin/editor/upload_img";
};
6、服務(wù)器處理圖片上傳方法:
public function upload_img_for_ckeditor4(Request $request)
{
ini_set('display_errors', 1);
try{
$file_key = key($request->file());
if ($request->file($file_key)->isValid()){
$file_extension = $request->$file_key->extension();
$file_name = md5(uniqid(rand())).".".$file_extension;
$path = $request->$file_key->storeAs('images/'.date('Y-m-d'), $file_name, 'admin_desc');
//$path = $request->$file_key->store('images/'.date('Y-m-d'),'admin_desc');
$previewname = asset('upload/admin/'.$path);
return [
"uploaded" => true,
"fileName" => $file_name,
"url" => $previewname,
"error" => [
"message" => ''
]
];
}else{
return [
"uploaded" => false,
"fileName" => '',
"url" => '',
"error" => [
"message" => '上傳出錯(cuò)!'
]
];
}
}catch(\Exception $e){
return [
"uploaded" => false,
"fileName" => '',
"url" => '',
"error" => [
"message" => '上傳出錯(cuò)!'
]
];
}
}
7、在文件系統(tǒng)配置文件filesystem.php添加編輯器的磁盤
'admin_desc' => [
'driver' => 'local',
'root' => public_path('upload/admin/'),
//'url' => $_SERVER["REQUEST_SCHEME"]."://".$_SERVER["HTTP_HOST"].'/upload/admin/',
'url' => '/upload/admin/',
'visibility' => 'public',
],
8、laravel-admin的bootstrap里增加這個(gè)編輯器
//注冊(cè)最新的ckeditor
Form::extend('editor_new_ck', \App\Admin\Extensions\Form\CKEditor::class);
至此,ckeditor就可以在laravel-admin中使用