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