组件管理

移除已有组件

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

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

扩展自定义组件

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

先将codemirror库下载并解压到前端资源目录下，比如放在public/packages/codemirror-5.20.2目录下。

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

<?php
namespace App\Admin\Extensions;
use Encore\Admin\Form\Field;
class PHPEditor extends Field
{
    protected $view = 'admin.php-editor';
    protected static $css = [
        '/packages/codemirror-5.20.2/lib/codemirror.css',
    ];
    protected static $js = [
        '/packages/codemirror-5.20.2/lib/codemirror.js',
        '/packages/codemirror-5.20.2/addon/edit/matchbrackets.js',
        '/packages/codemirror-5.20.2/mode/htmlmixed/htmlmixed.js',
        '/packages/codemirror-5.20.2/mode/xml/xml.js',
        '/packages/codemirror-5.20.2/mode/javascript/javascript.js',
        '/packages/codemirror-5.20.2/mode/css/css.js',
        '/packages/codemirror-5.20.2/mode/clike/clike.js',
        '/packages/codemirror-5.20.2/mode/php/php.js',
    ];
    public function render()
    {
        $this->script = <<<EOT
CodeMirror.fromTextArea(document.getElementById("{$this->id}"), {
    lineNumbers: true,
    mode: "text/x-php",
    extraKeys: {
        "Tab": function(cm){
            cm.replaceSelection("    " , "end");
        }
     }
});
EOT;
        return parent::render();
    }
}

类中的静态资源也同样可以从外部引入，参考Editor.php

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

<div class="form-group {!! !$errors->has($label) ?: 'has-error' !!}">
    <label for="{{$id}}" class="col-sm-2 control-label">{{$label}}</label>
    <div class="col-sm-6">
        @include('admin::form.error')
        <textarea class="form-control" id="{{$id}}" name="{{$name}}" placeholder="{{ trans('admin::lang.input') }} {{$label}}" {!! $attributes !!} >{{ old($column, $value) }}</textarea>
    </div>
</div>

最后找到文件app/Admin/bootstrap.php,如果文件不存在，请更新laravel-admin，然后新建该文件,添加下面代码：

<?php
use App\Admin\Extensions\PHPEditor;
use Encore\Admin\Form;
Form::extend('php', PHPEditor::class);

这样就能在model-form中使用PHP编辑器了：

$form->php('code');

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

集成富文本编辑器wangEditor

wangEditor是一个优秀的国产的轻量级富文本编辑器，如果laravel-admin自带的基于ckeditor的编辑器组件使用上有问题，可以通过下面的步骤可以集成它，并覆盖掉ckeditor：

先下载前端库文件wangEditor，解压到目录public/packages/wangEditor-2.1.22。

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

<?php
namespace App\Admin\Extensions;
use Encore\Admin\Form\Field;
class WangEditor extends Field
{
    protected $view = 'admin::form.editor';
    protected static $css = [
        '/packages/wangEditor-2.1.22/dist/css/wangEditor.min.css',
    ];
    protected static $js = [
        '/packages/wangEditor-2.1.22/dist/js/wangEditor.min.js',
    ];
    public function render()
    {
        $this->script = <<<EOT
var editor = new wangEditor('{$this->id}');
    editor.create();
EOT;
        return parent::render();
    }
}

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

<?php
use App\Admin\Extensions\WangEditor;
use Encore\Admin\Form;
Form::extend('editor', WangEditor::class);

调用:

$form->editor('content');

组件类中指定了admin::form.editor作为视图文件，视图文件路径在vendor/encore/laravel-admin/views/form/editor.blade.php，如果需要修改视图文件，可以将上述视图文件拷贝到resources/views目录下自行修改，然后在组件类app/Admin/Extensions/WangEditor.php的$view属性指定刚才修改的view即可。

集成富文本编辑器ckeditor

先下载ckeditor 并解压到/public目录，比如放在/public/packages/目录下。

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

<?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();
    }
}

新建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-6">
        @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>

然后在app/Admin/bootstrap.php中引入扩展：

use App\Admin\Extensions\Form\CKEditor;
use Encore\Admin\Form;
Form::extend('ckeditor', CKEditor::class);

然后就能在form中使用了:

$form->ckeditor('content');