vue项目UEditor富文本编辑器升级（从1.4.3升级到1.5.0）

万物皆可卷

已于 2023-08-25 15:11:42 修改

阅读量2.7k

点赞数 1

文章标签： vue.js 前端 javascript

于 2023-08-25 15:06:01 首次发布

本文链接：https://blog.csdn.net/dipper_dubhe/article/details/132495693

版权

前提:原本就已经使用了UEditor，现在根据需求将UEditor升级到最新版本1.5.0

1.下载UEditor1.5.0版本

https://gitee.com/mirrors/ueditor
下载dev_1.5.0分支代码
根据官网文档进行编辑器的打包:(参考官网文档的使用grunt打包源代码）
注意：由于项目原本使用的UEditor，就是用这种方式打包之后，引入的，无需做过多的改动。
官网地址：http://fex.baidu.com/ueditor/#dev-bale_width_grunt
根据文档的使用方法，一步步执行代码

注意打包的版本
如果后端是使用java语言的，且前端是使用utf8编码的，
执行命令：

grunt --encode=utf8 --server=jsp

支持两种编码指定：–encode参数
utf8 (默认编码)
gbk
提供四种后台语言支持：–server参数

php (默认语言)
jsp
net (代表.net后台)
asp

2.替换原项目文件

执行完了之后，在dist文件夹里面会看到一个由编码和后台语言组合命名的文件，将这个文件夹内的所有文件，除了ueditor.config.js之外的所有文件替换（ueditor.config.js为配置文件，更新版本之后可以沿用旧的配置文件）
特别说明：根据上一个版本的情况，选择性保留（ueditor.all.js或者ueditor.all.min.js）和（ueditor.parse.js或者ueditor.parse.min.js），删除index.html。看项目引入的是哪个文件，保留引入的文件，删除另一个。

将项目运行起来之后，打开编辑器，查看是否调了获取配置信息的接口。

报错及处理

1.没有调用获取配置信息的接口。

请检查编辑器初始化时，传入参数的名称是否和ueditor.all.js的一致

引入编辑器的vue文件

data(){
	return{
	meditor:null,//编辑器
	randomId:"",//编辑器id,随机的数据
	editorConfig:{//编辑器配置
		serverUrl:"",//资源上传地址
		UEDITOR_HOME_URL:"",//静态地址基本路径
		}
	}
},
created(){
	this.editorConfig.UEDITOR_HOME_URL = /muditor/,//环境文件路径，根据实际情况配置（此为说明用）
	this.editorConfig.editorConfigUrl = api+'config',//配置接口
	this.editorConfig.uploadImageUrl = api+'uploadImage',//上传图片接口
}，

mounted(){
	setTimeout(()=>{
	this.$nextTick(()=>{
		this.meditor = UE.getEditor(thid.randomId,this.editorConfig),
		//绑定事件，当编辑器初始化完成后，将编辑器实例通过自定义的ready事件交出去
		this.meditor.addListener('ready',()=>{
			this.ready = true
			this.$emit('ready',this.meditor)
			}
		})
	})	
}

ueditor.all.js
找到（core/loadconfig.js）

//core/loadconfig.js
//var configUrl = me.getActionUrl('config')，
//替换成
var configUrl = me.getActionUrl('editorConfigUrl')
//跟你引入编辑器vue文件命名的配置接口一致
//将 jsJsonp = utils.isCrossDomainUrl(configUrl),替换成 
var jsJsonp = utils.isCrossDomainUrl(configUrl);
jsJsonp = false;

2.调用了请求配置信息的接口，出现跨域的报错

ueditor.all.js
找到（core/loadconfig.js），确定你的ajax请求的method是post还是get请求

//core/loadconfig.js
……
       /* 发出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"));
      }

3.上传图片成功，无法回显

dialogs/image/image.js

找到uploadSuccess,修改上传成功显示的状态
找到imageUrlPrefix,修改图片地址插入list

           uploader.on('uploadSuccess', function (file, ret) {
                var $file = $('#' + file.id);
                try {
                    var responseText = (ret._raw || ret),
                        json = utils.str2json(responseText);
                    if (json.state == 'SUCCESS') {
                    //根据实际请求修改返回的状态
                        _this.imageList.push(json);
                        $file.append('<span class="success"></span>');
                    } else {
                        $file.find('.error').text(json.state).show();
                    }
                } catch (e) {
                    $file.find('.error').text(lang.errorServerUpload).show();
                }
            });


        getInsertList: function () {
            var i, data, list = [],
                align = getAlign(),
                prefix = editor.getOpt('imageUrlPrefix');
            for (i = 0; i < this.imageList.length; i++) {
                data = this.imageList[i];
                list.push({
                //根据请求返回参数修改图片地址
                    src: prefix + data.url,
                    _src: prefix + data.url,
                    alt: data.original,
                    floatStyle: align
                });
            }
            return list;
        }

4.如果出现i报错

如果出现i报错，有可能是某个i没有声明就直接使用了，根据报错直接定位即可。

5.在vue中使用ueditor，ueditor报错 Uncaught TypeError: ‘caller’, ‘callee’, and ‘arguments’ properties may not

原因是因为webpack打包后出现的，是因为webpack使用的是严格模式打包。
定位：//提供getDialog方法

      //将editor.addListener("ready", function() {修改为
      editor.addListener("ready", function ED() {
        //提供getDialog方法
        editor.getDialog = function(name) {
          return editor.ui._dialogs[name + "Dialog"];
        };
        domUtils.on(editor.window, "scroll", function(evt) {
          baidu.editor.ui.Popup.postHide(evt);
        });
        //提供编辑器实时宽高(全屏时宽高不变化)
        editor.ui._actualFrameWidth = editor.options.initialFrameWidth;

        UE.browser.ie &&
          UE.browser.version === 6 &&
          editor.container.ownerDocument.execCommand(
            "BackgroundImageCache",
            false,
            true
          );

        //display bottom-bar label based on config
        if (editor.options.elementPathEnabled) {
          editor.ui.getDom("elementpath").innerHTML =
            '<div class="edui-editor-breadcrumb">' +
            editor.getLang("elementPathTip") +
            ":</div>";
        }
        if (editor.options.wordCount) {
          function countFn() {
            setCount(editor, me);
            //将domUtils.un(editor.document, "click", arguments.callee);修改为
            domUtils.un(editor.document, "click", ED);
          }
          domUtils.on(editor.document, "click", countFn);
          editor.ui.getDom("wordcount").innerHTML = editor.getLang(
            "wordCountTip"
          );
        }
        editor.ui._scale();
        if (editor.options.scaleEnabled) {
          if (editor.autoHeightEnabled) {
            editor.disableAutoHeight();
          }
          me.enableScale();
        } else {
          me.disableScale();
        }
        if (
          !editor.options.elementPathEnabled &&
          !editor.options.wordCount &&
          !editor.options.scaleEnabled
        ) {
          editor.ui.getDom("elementpath").style.display = "none";
          editor.ui.getDom("wordcount").style.display = "none";
          editor.ui.getDom("scale").style.display = "none";
        }

        if (!editor.selection.isFocus()) return;
        editor.fireEvent("selectionchange", false, true);
      });