组件管理

移除已有组件

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

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

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

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

扩展自定义组件

集成富文本编辑器wangEditor

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

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

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

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

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

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

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

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

调用:

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

集成富文本编辑器ckeditor

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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