laravel-admin5.3使用CKEditor4.9.2

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容