组件管理

移除已有组件

form表单内置的map和editor组件通过cdn的方式引用了前端文件，如果网络方面有问题，可以通过下面的方式将它们移除

找到文件app/Admin/bootstrap.php,如果文件不存在，请更新laravel-admin，然后新建该文件

<?php

use Encore\Admin\Form;

Form::forget('map');
Form::forget('editor');

// or

Form::forget(['map', 'editor']);

这样就去掉了这两个组件，可以通过该方式去掉其它组件。

自定义组件

用下面的两个例子来说明如何扩展组件

集成wangEditor

wangEditor是一个优秀的国产的轻量级富文本编辑器， 通过下面的步骤集成到form表单中：

然后新建组件类app/Admin/Extensions/WangEditor.php。

<?php

namespace App\Admin\Extensions;

use Encore\Admin\Form\Field;

class WangEditor extends Field
{
    protected $view = 'admin.wang-editor';
}

新建视图文件resources/views/admin/wang-editor.blade.php：

<div {!! admin_attrs($group_attrs) !!}>
    <label for="{{ $id }}" class="{{ $viewClass['label'] }} control-label">{{ $label }}</label>
    <div class="{{ $viewClass['field'] }}">
        <div class="{{ $class }}">
            <p>{!! $value !!}</p>
        </div>
        <textarea name="{{ $name }}" class="d-none" rows="{{ $rows }}" placeholder="{{ $placeholder }}">{!! $value !!}</textarea>
        @include('admin::form.error')
        @include('admin::form.help-block')
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/wangeditor@3.1.1/release/wangEditor.min.js"></script>

<script @script>
    var E = window.wangEditor;
    var $editor = new E(this);
    var $textarea = $(this).parent().find('textarea');
    $editor.customConfig.onchange = function (html) {
        $textarea.val(html);
    }
    $editor.customConfig.zIndex = 100;
    $editor.create();
</script>

然后注在app/Admin/bootstrap.php中添加以下代码进行注册：

<?php

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

Form::extend('editor', WangEditor::class);

在表单中使用:

$form->editor('content');

集成ckeditor

然后新建扩展文件app/Admin/Extensions/Form/CKEditor.php:

<?php

namespace App\Admin\Extensions;

use Encore\Admin\Form\Field\Textarea;

class CKEditor extends Textarea
{
    protected $view = 'admin.ckeditor';
}

新建view resources/views/admin/ckeditor.blade.php:

<div {!! admin_attrs($group_attrs) !!}>
    <label for="{{$id}}" class="{{$viewClass['label']}} control-label">{{$label}}</label>
    <div class="{{$viewClass['field']}}">
        <textarea name="{{$name}}" class="form-control {{$class}}" rows="{{ $rows }}" placeholder="{{ $placeholder }}" {!! $attributes !!} >{!! $value !!}</textarea>
        @include('admin::form.error')
        @include('admin::form.help-block')
    </div>
</div>

<script src="https://cdn.ckeditor.com/4.14.1/standard/ckeditor.js"></script>

<script @script>
    CKEDITOR.replace('{{ $name }}');
</script>

然后在app/Admin/bootstrap.php中注册扩展：

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

Form::extend('ckeditor', CKEditor::class);

然后就能在form中使用了:

$form->ckeditor('content');

集成PHP editor

通过下面的步骤来扩展一个基于codemirror的PHP代码编辑器，效果参考PHP mode。

新建组件类app/Admin/Extensions/PHPEditor.php:

<?php

namespace App\Admin\Extensions;

use Encore\Admin\Form\Field\Textarea;

class PHPEditor extends Textarea
{
    protected $view = 'admin.php-editor';
}

创建视图resources/views/admin/php-editor.blade.php:

<div {!! admin_attrs($group_attrs) !!}>
    <label for="{{ $id }}" class="{{ $viewClass['label'] }} control-label">{{ $label }}</label>
    <div class="{{ $viewClass['field'] }}">
        <textarea name="{{ $name }}" class="{{ $class }}" rows="{{ $rows }}" placeholder="{{ $placeholder }}" {!! $attributes !!} >{{ $value }}</textarea>
        @include('admin::form.error')
        @include('admin::form.help-block')
    </div>
</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror@5.57.0/lib/codemirror.css">

<script dep src="https://cdn.jsdelivr.net/npm/codemirror@5.57.0/lib/codemirror.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/codemirror@5.57.0/addon/edit/matchbrackets.js"></script>
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.57.0/mode/htmlmixed/htmlmixed.js"></script>
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.57.0/mode/xml/xml.js"></script>
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.57.0/mode/javascript/javascript.js"></script>
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.57.0/mode/css/css.js"></script>
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.57.0/mode/clike/clike.js"></script>
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.57.0/mode/php/php.js"></script>

<script @script>
    var textarea = this;
    setTimeout(function () {
        var editor = CodeMirror.fromTextArea(textarea, {
            lineNumbers: true,
            matchBrackets: true,
            mode: "application/x-httpd-php",
            indentUnit: 4,
            indentWithTabs: true
        });
    }, 10)
</script>

<style>
    .CodeMirror {
        border: 1px solid #cccccc;
    }
</style>

然后在app/Admin/bootstrap.php中注册扩展：

<?php

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

Form::extend('php', PHPEditor::class);

然后就能在form中使用了:

$form->php('code');

通过这种方式，可以添加任意你想要添加的form组件。