天天看點

百度編輯器UEditor實作自動儲存

<?php

namespace App\Admin\Extensions;

use Encore\Admin\Form\Field;

class NEditor extends Field
{
    protected $view = 'admin.neditor';

    protected static $css = [
        '/neditor/themes/notadd/css/neditor.css',
    ];

    protected static $js = [
        '/neditor/neditor.config.js',
        '/neditor/neditor.all.js'
    ];

    public function render()
    {


        $this->script = <<<EOT
        UE.delEditor("{$this->id}");

        var ue = UE.getEditor('{$this->id}',{
            initialFrameWidth:null,
            initialFrameHeight:400,
            autoHeight: false,
            elementPathEnabled: false,
            enableContextMenu: true,
            autoClearEmptyNode: true,
            wordCount: true,
            imagePopup: false,
            autotypeset: {indent: true, imageBlockLine: 'center'},
            allowDivTransTop: false,
            enterTag: 'br',
            autoHeightEnabled:false,
            enableAutoSave: true, //啟用自動儲存
            saveInterval: 500 //自動儲存間隔時間, 機關ms
        });
        ue.ready(function () {
             ue.setHeight(400);
             ue.execCommand('serverparam', '_token', '{{ csrf_token() }}');
             
             //擷取草稿内容
             var html = ue.getContent();
             if (html == '' || html == 'undefined') {
                 console.log('editor is null');
                 ue.execCommand('drafts');
             } else {
                 console.log('editor not null');
             }
        });

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