<?php

use Encore\Admin\Facades\Admin;
use Encore\Admin\Layout\Content;
use App\Http\Controllers\Controller;
use Encore\Admin\Widgets\Alert;
use Encore\Admin\Widgets\Callout;

class ExampleController extends Controller
{
    public function editors()
    {
        return Admin::content(function (Content $content) {
            $content->header('Editors');

            $form1 = new Form();
            $form1->action('example');
            $form1->editor('text1', 'Text')->default('<img src="/packages/admin/AdminLTE/dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">');

            $form2 = new Form();
            $form2->action('example');
            $form2->php('text3', 'PHP')->default(file_get_contents(public_path('index.php')));

            $form3 = new Form();
            $form3->action('example');
            $form3->markdown('text4', 'Markdown')->default(file_get_contents(base_path('readme.md')));

            $tab = new Tab();
            $tab->add('Form',
                (new Box('WangEditor', $form1)) .
                (new Box('PHP Editor', $form2)) .
                (new Box('Markdown Editor', $form3)));

            $tab->add('Code', $this->wrapperCode($this->editorsCode()));
            $tab->add('Extensions', $this->extensionCode());

            $content->body($tab);
        });
    }
}

app/Admin/Extensions/MarkdownEditor.php

<?php

namespace App\Admin\Extensions;

use Encore\Admin\Form\Field;

class MarkdownEditor extends Field
{
    protected $view = 'admin::form.editor';

    protected static $css = [
        '/packages/bootstrap-markdown-editor/dist/css/bootstrap-markdown-editor.css',
    ];

    protected static $js = [
        '//cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js',
        '//cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js',
        '/packages/bootstrap-markdown-editor/dist/js/bootstrap-markdown-editor.js',
    ];

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

$('#$this->id').markdownEditor({
    preview: true,
    onPreview: function (content, callback) {
        callback( marked(content) );
    }
});

EOT;

        return parent::render();
    }
}

app/Admin/Extensions/PHPEditor.php

<?php

namespace App\Admin\Extensions;

use Encore\Admin\Form\Field;

class PHPEditor extends Field
{
    protected $view = 'admin::form.editor';

    protected static $js = [
        '/packages/codemirror-5.20.0/lib/codemirror.js',
        '/packages/codemirror-5.20.0/addon/edit/matchbrackets.js',
        '/packages/codemirror-5.20.0/mode/htmlmixed/htmlmixed.js',
        '/packages/codemirror-5.20.0/mode/xml/xml.js',
        '/packages/codemirror-5.20.0/mode/javascript/javascript.js',
        '/packages/codemirror-5.20.0/mode/css/css.js',
        '/packages/codemirror-5.20.0/mode/clike/clike.js',
        '/packages/codemirror-5.20.0/mode/php/php.js',
    ];

    protected static $css = [
        '/packages/codemirror-5.20.0/lib/codemirror.css',
    ];

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

CodeMirror.fromTextArea(document.getElementById("{$this->id}"), {
    lineNumbers: true,
    mode: "text/x-php",
    extraKeys: {
        "Tab": function(cm){
            cm.replaceSelection("    " , "end");
        }
     }
});

EOT;
        return parent::render();

    }
}

app/Admin/Extensions/WangEditor.php

<?php

namespace App\Admin\Extensions;

use Encore\Admin\Form\Field;

class WangEditor extends Field
{
    protected $view = 'admin.wang-editor';

    protected static $css = [
        '/packages/wangEditor/dist/css/wangEditor.min.css',
    ];

    protected static $js = [
        '/packages/wangEditor/dist/js/wangEditor.min.js',
    ];

    public function render()
    {
        $token = csrf_token();

        $this->script = <<<EOT

var editor = new wangEditor('{$this->id}');

editor.config.uploadImgFileName = 'image';
editor.config.uploadImgUrl = '/admin/api/images';
editor.config.uploadParams = {
    _token: '$token'
};
editor.create();

EOT;
        return parent::render();
    }
}