Problem with refreshing the custom ueditor editor in laravel-admin

Question

I have defined the component in laravel-admin, it can be used, but it needs to be refreshed every time I use it.
When I click edit to enter, it will look like this, and it will only change when I refresh it. What the second picture looks like

I want to know how to change it directly to the picture in Chapter 2 without refreshing. . . .

The component is written like this, refer to the official document

<?php
namespace App\Admin\Extensions;

use Encore\Admin\Form\Field;

class UEditor extends Field
{
    protected $view = 'admin::form.editor';
    protected static $css = [

    ];

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

    public function render()
    {
        $cs=csrf_token();
        $config=config('ueditor.route.name');
        $this->script = <<<EOT
          window.UEDITOR_CONFIG.serverUrl = '$config'
 var ue = UE.getEditor('{$this->id}');
    ue.ready(function() {
        ue.execCommand('serverparam', '_token', '$cs'); // 设置 CSRF token.
    });
  
EOT;
        return parent::render();

    }
}

Answer 1

You should use vue, you should write ueditor as a component

<template>
  <p ref="editor"></p>
</template>

<script>

  import './ueditor.config';
  import './ueditor.all';
  import './lang/zh-cn/zh-cn';


  export default {
    data() {
      return {
        id: parseInt(Math.random()*1000)+'ueditorId',
      };
    },
    props: {
      value: {
        type: String,
        default: null,
      }
    },
    watch: {
      // value: function value(val, oldVal) {
      //   this.editor = UE.getEditor(this.id);
      //   if (val !== null) {
      //     this.editor.setContent(val);
      //   }
      // },
    },
    mounted() {

      var _this = this;
      this.$nextTick(function f1() {
        // 保证 this.$el 已经插入文档

        this.$refs.editor.id = this.id;
        this.editor = UE.getEditor(this.id, this.config);

        this.editor.ready(function f2() {
          this.editor.setContent(this.value==null?'<p></p>':this.value);
          this.editor.addListener("contentChange afterExecCommand", function () {
            const wordCount = _this.editor.getContentLength(true);
            const content = _this.editor.getContent();
            const plainTxt = _this.editor.getPlainTxt();
            _this.$emit('input', { wordCount: wordCount, content: content, plainTxt: plainTxt });
          }.bind(this));

          // this.$emit('ready', this.editor);
        }.bind(this));
      });
    },
  };
</script>