1、下载CKEditor4.9.2,将ckeditor文件夹放进public/packages中
2、然后新建扩展文件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默认不开启image上传,在ckeditor/plugins/image/dialogs/image.js:
(1)搜索id:"Upload",然后把后面的hidden:!0 改为 hidden:0
(2)去掉预览的默认文字,在本js里有一段“Lorem ipsum dolor sit amet……”的火星文,把这段文字删掉,保留双引号,最终该片段变为(d.config.image_previewText||'')
5、设置ckeditor的图片上传服务器路径,在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、服务器处理图片上传方法:
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" => '上传出错!'
]
];
}
}catch(\Exception $e){
return [
"uploaded" => false,
"fileName" => '',
"url" => '',
"error" => [
"message" => '上传出错!'
]
];
}
}
7、在文件系统配置文件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里增加这个编辑器
//注册最新的ckeditor
Form::extend('editor_new_ck', \App\Admin\Extensions\Form\CKEditor::class);
至此,ckeditor就可以在laravel-admin中使用