Use ueditor in vue+springboot, enter ueditor after route jump, ueditor cannot be loaded out

Problem description: already on the title

Solution:

     1: Delete the ueditor instance when the page is destroyed, and create the instance when mounted. The purpose of this is to reload the ueditor when it comes in again

mounted() {
     // 自定义上传路径
      const baseUrl='http://localhost:8080/investment';
      UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
      UE.Editor.prototype.getActionUrl = function(action) {
        // 对应的是后台upload那个方法
        if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'listimage'||action=='uploadvideo') {
          return baseUrl+'/fileUpload/uploadForUeditor';
        } else {
          return this._bkGetActionUrl.call(this, action);
        }
      }
      this.editor = UE.getEditor('editor', this.config); // 初始化UE

      // //初始化UE
      // const _this = this;
      // this.editor = UE.delEditor("editor");
      // this.editor = UE.getEditor('editor',this.config);

    },

    beforeDestroy(){
      UE.delEditor('editor');
    },

2: Normally, the problem should be solved here, but the config.json of my ueditor is loaded from the backend. After adding the above code, the page can be displayed normally, but the function of uploading pictures is charged. It is said that http cannot load normally. I judged that it is because the back-end configuration is not loaded normally (because at this time, if I force a refresh, CTRL+R is fine), so you need to find a way to reload the configuration items from the backend when you enter the page again. . . . .

At this time, you need to change the source code, as follows:

File: ueditor.all.js. See my comments for the specific modified code

    UE.Editor.prototype.loadServerConfig = function(){
        var me = this;
        setTimeout(function(){
            try{
                // me.options.imageUrl && me.setOpt('serverUrl', me.options.imageUrl.replace(/^(.*[\/]).+([\.].+)$/, '$1controller$2'));
                // var configUrl = me.getActionUrl('config'),
                    //isJsonp = utils.isCrossDomainUrl(configUrl);
                //杨子栋：为了解决ueditor二次加载不能显示的问题，需要改这里的源码，我注释了8080和8081行，8082原本就是注释的，增加了8083行 
                var configUrl='http://localhost:8080/investment/ueditor/exec?action=config',
                isJsonp = false;
                /* 发出ajax请求 */
                me._serverConfigLoaded = false;
                configUrl && UE.ajax.request(configUrl,{
                    'method': 'GET',
                    'dataType': isJsonp ? 'jsonp':'',
                    'onsuccess':function(r){
                        try {
                            var config = isJsonp ? r:eval("("+r.responseText+")");
                            utils.extend(me.options, config);
                            me.fireEvent('serverConfigLoaded');
                            me._serverConfigLoaded = true;
                        } catch (e) {
                            showErrorMsg(me.getLang('loadconfigFormatError'));
                        }
                    },
                    'onerror':function(){
                        showErrorMsg(me.getLang('loadconfigHttpError'));
                    }
                });
            } catch(e){
                showErrorMsg(me.getLang('loadconfigError'));
            }
        });

This question has taken me more than an hour, and I am sad, and hereby record it!