组件管理

移除已有组件

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

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

  2. <?php
  4. use Encore\Admin\Form;
  6. Form::forget('map');
  7. Form::forget('editor');
  9. // or
  11. Form::forget(['map', 'editor']);

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

扩展自定义组件

集成富文本编辑器wangEditor

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

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

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

  2. <?php
  4. namespace App\Admin\Extensions;
  6. use Encore\Admin\Form\Field;
  8. class WangEditor extends Field
  9. {
  10.     protected $view = 'admin.wang-editor';
  12.     protected static $css = [
  13.         '/vendor/wangEditor-3.0.9/release/wangEditor.min.css',
  14.     ];
  16.     protected static $js = [
  17.         '/vendor/wangEditor-3.0.9/release/wangEditor.min.js',
  18.     ];
  20.     public function render()
  21.     {
  22.         $name = $this->formatName($this->column);
  24.         $this->script = <<<EOT
  26. var E = window.wangEditor
  27. var editor = new E('#{$this->id}');
  28. editor.customConfig.zIndex = 0
  29. editor.customConfig.uploadImgShowBase64 = true
  30. editor.customConfig.onchange = function (html) {
  31.     $('input[name=\'$name\']').val(html);
  32. }
  33. editor.create()
  35. EOT;
  36.         return parent::render();
  37.     }
  38. }

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

  1. <div class="form-group {!! !$errors->has($label) ?: 'has-error' !!}">
  3.     <label for="{{$id}}" class="col-sm-2 control-label">{{$label}}</label>
  5.     <div class="{{$viewClass['field']}}">
  7.         @include('admin::form.error')
  9.         <div id="{{$id}}" style="width: 100%; height: 100%;">
  10.             <p>{!! old($column, $value) !!}</p>
  11.         </div>
  13.         <input type="hidden" name="{{$name}}" value="{{ old($column, $value) }}" />
  15.     </div>
  16. </div>

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

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

调用:

  2. $form->editor('body');

集成富文本编辑器ckeditor

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

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

  1. <?php
  3. namespace App\Admin\Extensions\Form;
  5. use Encore\Admin\Form\Field;
  7. class CKEditor extends Field
  8. {
  9.     public static $js = [
  10.         '/packages/ckeditor/ckeditor.js',
  11.         '/packages/ckeditor/adapters/jquery.js',
  12.     ];
  14.     protected $view = 'admin.ckeditor';
  16.     public function render()
  17.     {
  18.         $this->script = "$('textarea.{$this->getElementClassString()}').ckeditor();";
  20.         return parent::render();
  21.     }
  22. }

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

  1. <div class="form-group {!! !$errors->has($errorKey) ?: 'has-error' !!}">
  3.     <label for="{{$id}}" class="col-sm-2 control-label">{{$label}}</label>
  5.     <div class="col-sm-6">
  7.         @include('admin::form.error')
  9.         <textarea class="form-control {{ $class }}" name="{{$name}}" placeholder="{{ $placeholder }}" {!! $attributes !!} >{{ old($column, $value) }}</textarea>
  11.         @include('admin::form.help-block')
  13.     </div>
  14. </div>

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

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

然后就能在form中使用了:

  1. $form->ckeditor('content');

集成PHP editor

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

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

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

  1. <?php
  3. namespace App\Admin\Extensions;
  5. use Encore\Admin\Form\Field;
  7. class PHPEditor extends Field
  8. {
  9.     protected $view = 'admin.php-editor';
  11.     protected static $css = [
  12.         '/packages/codemirror-5.20.2/lib/codemirror.css',
  13.     ];
  15.     protected static $js = [
  16.         '/packages/codemirror-5.20.2/lib/codemirror.js',
  17.         '/packages/codemirror-5.20.2/addon/edit/matchbrackets.js',
  18.         '/packages/codemirror-5.20.2/mode/htmlmixed/htmlmixed.js',
  19.         '/packages/codemirror-5.20.2/mode/xml/xml.js',
  20.         '/packages/codemirror-5.20.2/mode/javascript/javascript.js',
  21.         '/packages/codemirror-5.20.2/mode/css/css.js',
  22.         '/packages/codemirror-5.20.2/mode/clike/clike.js',
  23.         '/packages/codemirror-5.20.2/mode/php/php.js',
  24.     ];
  26.     public function render()
  27.     {
  28.         $this->script = <<<EOT
  30. CodeMirror.fromTextArea(document.getElementById("{$this->id}"), {
  31.     lineNumbers: true,
  32.     mode: "text/x-php",
  33.     extraKeys: {
  34.         "Tab": function(cm){
  35.             cm.replaceSelection("    " , "end");
  36.         }
  37.      }
  38. });
  40. EOT;
  41.         return parent::render();
  43.     }
  44. }

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

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

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

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

  1. <?php
  3. use App\Admin\Extensions\PHPEditor;
  4. use Encore\Admin\Form;
  6. Form::extend('php', PHPEditor::class);

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

  1. $form->php('code');

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