laravel-admin集成ueditor百度編輯器

什么是ueditor

ueditor是百度開源的一款編輯器，其中它的源代碼模式真的是非常實用的，能讓你更大限度的定制你的內容。

什么是laravle-admin

Laravle-admin是基於laravle的一個后台管理包，但其默認編輯器是ckeditor,個人不太喜歡，所以就把它換成ueditor

安裝步驟

1. 執行命令如下命令下載安裝插件

composer require "overtrue/laravel-ueditor:~1.0"

2. 發布配置

php artisan vendor:publish --provider='Overtrue\LaravelUEditor\UEditorServiceProvider'

3. 增加laravel-admin組件文件

增加組件文件：app/Admin/Extensions/Form/uEditor.php:

<?php

 

namespace App\Admin\Extensions\Form;

use Encore\Admin\Form\Field;

 

/**

 * 百度編輯器

 * Class uEditor

 * @package App\Admin\Extensions\Form

 */

class uEditor extends Field

{

    // 定義視圖

    protected $view = 'admin.uEditor';

 

    // css資源

    protected static $css = [];

 

    // js資源

    protected static $js = [];

 

    public function render()

    {

        $this->script = <<<EOT

        //解決第二次進入加載不出來的問題

        UE.delEditor("ueditor");

        // 默認id是ueditor

        var ue = UE.getEditor('ueditor', {

            // 自定義工具欄

            toolbars: [

                ['bold', 'italic', 'underline', 'strikethrough', 'blockquote', 'insertunorderedlist', 'insertorderedlist', 'justifyleft', 'justifycenter', 'justifyright', 'link', 'insertimage', 'source', 'fullscreen']

            ],

            elementPathEnabled: false,

            enableContextMenu: false,

            autoClearEmptyNode: true,

            wordCount: false,

            imagePopup: false,

            autotypeset: {indent: true, imageBlockLine: 'center'}

        });

        ue.ready(function () {

            ue.execCommand('serverparam', '_token', '{{ csrf_token() }}');

        });

 

EOT;

        return parent::render();

    }

}

4. 增加視圖文件： resources/views/admin/uEditor.blade.php

@include('vendor.ueditor.assets')

<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')

        {{-- 這個style可以限制他的高度，不會隨着內容變長 --}}

        <textarea type='text/plain' style="height:400px;" id='ueditor' id="{{$id}}" name="{{$name}}" placeholder="{{ $placeholder }}" {!! $attributes !!}  class='ueditor'>

            {!! old($column, $value) !!}

        </textarea>

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

    </div>

</div>

5. 然后注冊進laravel-admin,在app/Admin/bootstrap.php中添加以下代碼

use App\Admin\Extensions\Form\uEditor;

use Encore\Admin\Form;

Form::extend('ueditor', uEditor::class);

6. 調用

$form->ueditor('content', '內容')->rules('required');;