laravel-admin中使用自定义ueditor编辑器刷新的问题

Question

我已经在laravel-admin中定义好了组件，可以用，但是每次使用都要刷新才行
当我点击编辑进去的时候是这样，只有当我刷新的时候才会变成第二张图的样子

我想知道怎样才能不刷新就直接变成第二章图的样子。。。。

组件是这样写的，参照的官方文档

<?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

组件代码如下写，可以解决这个问题：
(采用了楼上的解决方案，声望不够，不能给他：yangzuwei 点赞)

<?php
namespace App\Admin\Extensions;
use Encore\Admin\Form\Field;
/**
 * 百度编辑器
 * Class uEditor
 * @package App\Admin\Extensions
 */
class uEditor extends Field
{
    // 定义视图
    protected $view = 'admin.uEditor';

    // css资源
    protected static $css = [];

    // js资源
    protected static $js = [
        '/laravel-u-editor/ueditor.config.js',
        '/laravel-u-editor/ueditor.all.min.js',
        '/laravel-u-editor/lang/zh-cn/zh-cn.js'
    ];

    public function render()
    {
        $this->script = <<<EOT
        UE.delEditor('ueditor');
        var ue = UE.getEditor('ueditor'); // 默认id是ueditor
        ue.ready(function () {
            ue.execCommand('serverparam', '_token', '{{ csrf_token() }}');
        });
EOT;
        return parent::render();
    }
}

Answer 2

初始化之前先销毁 UE.delEditor('XXX');
https://my.oschina.net/tianyu...

Answer 3

应该是用了vue吧，要把ueditor写成组件

<template>
  <div ref="editor"></div>
</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>

Answer 4

你好！请问解决了这个问题了吗？我也遇到了！楼主怎么解决的？

Answer 5

我想知道 上传你们是怎么处理的？