Laravel-admin 中引入 Ace 程式碼編輯器

chenBJ發表於2018-11-07
Laravel

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... 測試沒有問題的
例項:
file

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章