Laravel-admin 中引入 Ace 代码编辑器

Ace作为远程代码编辑器也是非常友好的。Ace中提供各种语言的模板，主要在初始化Ace中配置使用的语言模式即可。

先下载前端库文件AceEditor，解压到目录public/vendor/AceEditor。(这个目录可以随便放看个人喜好)

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

<?php

namespace App\Admin\Extensions;

use Encore\Admin\Form\Field;

class AceEditor extends Field
{
    protected $view = 'admin.ace-editor';

    protected static $js = [
//        'https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.0/ace.js'
       '/vendor/ace/ace.js',
    ];

    public function render()
    {
        $this->script = <<<EOT

        var editor = ace.edit("{$this->id}");
        editor.setOption("minLines", 5);
        editor.setOption("maxLines", 20);
        editor.setFontSize(16);
        editor.setOption("wrap", "free");
        editor.setTheme("ace/theme/chrome");
        editor.session.setMode("ace/mode/javascript");
        editor.getSession().on('change', function(e) {
            document.getElementById('ace-input-{$this->id}').value = editor.getValue();

        });

EOT;

        return parent::render();

    }
}

新建视图文件resources/views/admin/ace-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="{{$viewClass['field']}}">

        @include('admin::form.error')

        <div id="{{$id}}" style="width: 100%; height: 100%;">
            <p>{!! old($column, $value) !!}</p>
        </div>

        <input type="hidden" name="{{$name}}" value="{{ old($column, $value) }}" />

    </div>
</div>

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

use App\Admin\Extensions\AceEditor;
use Encore\Admin\Form;
Form::extend('ace', AceEditor::class);

调用的时候直接直接使用：

$form->editor('body');

引入的css js文件 : https://download.csdn.net/download/chen529... 测试没有问题的
实例:

本作品采用《CC 协议》，转载必须注明作者和本文链接