laravel-admin5.3使用CKEditor4.9.2

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:

@include('admin::form.error') @include('admin::form.help-block')

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中使用

你可能感兴趣的:(laravel-admin5.3使用CKEditor4.9.2)