Php网站嵌入ace编辑器,Laravel-admin 中引入 Ace 代码编辑器

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

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

然后新建组件类app/Admin/Extensions/AceEditor.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 = <<

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：

{{$label}}

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

{!! old($column, $value) !!}

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

use App\Admin\Extensions\AceEditor;

use Encore\Admin\Form;

Form::extend('ace', AceEditor::class);

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

$form->editor('body');

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