Laravel-admin 集成 UEditor

安装 ueditor

https://github.com/overtrue/laravel-ueditor

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

配置

  1. 添加下面一行到 config/app.phpproviders 部分:
Overtrue\LaravelUEditor\UEditorServiceProvider::class,
  1. 发布配置文件与资源
$ php artisan vendor:publish

增加 Laravel-admin 扩展文件

新建扩展文件 app/Admin/Extensions/UEditor.php

<?php
namespace App\Admin\Extensions;

use Encore\Admin\Form\Field;

class UEditor extends Field
{
    // 定义视图
    protected $view = 'admin.form.ueditor';

    protected static $css = [];

    protected static $js = [
        '/vendor/ueditor/ueditor.config.js',
        '/vendor/ueditor/ueditor.all.min.js',
        '/vendor/ueditor/lang/zh-cn/zh-cn.js',
    ];

    public function render()
    {
        $this->script = <<<EOT
        window.UEDITOR_CONFIG.serverUrl = '/ueditor/server';
        UE.delEditor("{$this->id}");
        var ue = UE.getEditor('{$this->id}', {
            // 自定义工具栏
            toolbars: [
                ['bold', 'italic', 'underline', 'strikethrough', 'blockquote', 'insertunorderedlist', 'insertorderedlist', 'justifyleft', 'justifycenter', 'justifyright', 'link', 'insertimage', 'source', 'fullscreen']
            ],
            elementPathEnabled: false,
            enableContextMenu: false,
            autoClearEmptyNode: false,
            wordCount: false,
            imagePopup: false,
            autotypeset: {indent: true, imageBlockLine: 'center'}
        });
        ue.ready(function () {
            ue.execCommand('serverparam', '_token', '{{ csrf_token() }}');
        });
EOT;
        return parent::render();
    }
}

增加视图文件

resources/views/admin/form/ueditor.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 type='text/plain' id="{{$id}}" name="{{$name}}" placeholder="{{ $placeholder }}" {!! $attributes !!}  class='ueditor'>{!! old($column, $value) !!}</textarea>
        @include('admin::form.help-block')
    </div>
</div>

注册进 Laravel-admin

app/Admin/bootstrap.php 中添加以下代码:

use App\Admin\Extensions\UEditor;
use Encore\Admin\Form;

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

调用

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

556 total views, 2 views today

Revisions

No comments yet.

发表评论