laravel-admin5.3使用CKEditor4.9.2

一：下载CKEditor4.9.2（https://ckeditor.com/ckeditor-4/download/#ckfinder），将解压后的ckeditor文件夹放进public/vendor中，下载页面如下：

二：新建扩展文件：app/Admin/Extensions/CKEditor.php，内容如下：

<?php
namespace App\Admin\Extensions;

use Encore\Admin\Form\Field;

class CKEditor extends Field
{
    public static $js = [
        '/vendor/ckeditor/ckeditor.js',
        '/vendor/ckeditor/adapters/jquery.js',
    ];

    protected $view = 'admin.ckeditor';

    public function render()
    {
        $this->script = "$('textarea.{$this->getElementClassString()}').ckeditor();";

        return parent::render();
    }
}

三：新建编辑器试图文件：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>

四：ckeditor默认是不开启图片上传功能的，此时需要在public/vendor/ckeditor/plugins/image/dialogs/image.js中进行如下设置：
（1）搜索 【id:"Upload"】，然后把后面的h【idden:!0】 改为 【hidden:0】

（2）去掉预览的默认文字，在本js里有一段“Lorem ipsum dolor sit amet……”的火星文，把这段文字删掉，保留双引号，最终该片段变为【d.config.image_previewText||''】

五：在public/vendor/ckeditor/config.js中，设置ckeditor的图片上传服务器路径以及编辑器的显示设置，内容如下：

/**
 * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see https://ckeditor.com/legal/ckeditor-oss-license
 */

CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here.
	// For complete reference see:
	// http://docs.ckeditor.com/#!/api/CKEDITOR.config

	/*将编辑器的语言设置为中文*/
	config.language = 'zh-cn';
	/*去掉图片预览框的文字*/
	config.image_previewText = ' ';
	/*设置编辑器默认显示高度，不含工具栏*/
	config.height = '500px';
	/*开启工具栏“图像”中文件上传功能，后面的url为图片上传要指向的的action或servlet*/
    config.filebrowserImageUploadUrl= "/ckeditor_upload_img";

	// The toolbar groups arrangement, optimized for two toolbar rows.
	config.toolbarGroups = [
		{ name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
		{ name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
		{ name: 'links' },
		{ name: 'insert' },
		{ name: 'forms' },
		{ name: 'tools' },
		{ name: 'document',	   groups: [ 'mode', 'document', 'doctools' ] },
		{ name: 'others' },
		// '/',
		{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
		{ name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
		{ name: 'styles' },
		{ name: 'colors' },
		{ name: 'about' }
	];

	// Remove some buttons provided by the standard plugins, which are
	// not needed in the Standard(s) toolbar.
	config.removeButtons = 'Underline,Subscript,Superscript';

	// Set the most common block elements.
	config.format_tags = 'p;h1;h2;h3;pre';

	// Simplify the dialog windows.
	config.removeDialogTabs = 'image:advanced;link:advanced';

};

六：服务器处理图片上传方法，内容如下：

（1）：根据上一步骤config.js中配置的上传路径配置路由文件（可根据实际需要修改）

Route::post('/ckeditor_upload_img', 'UploadsController@ckeditor_upload_img');

（2）：新建路由文件对应的控制器和方法

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class UploadsController extends Controller
{
    public function ckeditor_upload_img(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('uploads/'.$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" => '上传出错！'
                ]
            ];
        }
    }
}

七：在文件系统配置文件config/filesystem.php中disks模块添加编辑器的磁盘，内容如下：

'disks' => [
        .
        .
        .

        'admin_desc' => [
            'driver' => 'local',
            'root' => public_path('uploads'),
            'url' => env('APP_URL').'/uploads',
            'visibility' => 'public',
        ]

    ],

八：laravel-admin的app/Admin/bootstrap.php里增加ckeditor的继承，内容如下：

<?php

use App\Admin\Extensions\CKEditor;
use Encore\Admin\Form;
Form::forget(['map', 'editor']);
//注册最新的ckeditor
Form::extend('ckeditor', CKEditor::class);

九：使用代码如下：

$form->ckeditor('body','内容');

十：页面效果如下：