vue项目UEditor富文本编辑器升级(从1.4.3升级到1.5.0)_edui-editor-程序员宅基地

技术标签: 前端  vue.js  javascript  

前提:原本就已经使用了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);
      });
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Dipper_Dubhe/article/details/132495693

智能推荐

数字图像处理matlab蔡利梅,数字图像处理:使用MATLAB分析与实现:using MATLAB-程序员宅基地

文章浏览阅读2.6k次。基本信息书名:数字图像处理——使用MATLAB分析与实现(高等学校电子信息类专业定价:69.05元。注 定价是图书封底的标价,售价是顾客支付的价格。作者:蔡利梅,王利娟出版社:清华大学出版社出版日期:注 出版时间受保存的自然因素,未使用的还是新书。ISBN:9787302518228字数:563000页码:356版次:1装帧:平装开本:16开商品标识:[bianma]编辑推荐本书是在作者总结多年从..._数字图像处理蔡利梅课后答案

python机器学习——决策树_python实现连续型变量的回归预测-程序员宅基地

文章浏览阅读779次。python机器学习——决策树_python实现连续型变量的回归预测

我的秋招经验分享(内附校招交流群)-程序员宅基地

文章浏览阅读1.4k次。我的秋招经验分享(内附笔面试干货)本文出自公众号:程序员江湖。满满干货,关注就送。时间过得很快,已经到了九月中旬,从16年读研到现在将近两年的时间里,从一个Java初...

ORACLE PL/SQL 中序列(sequence)的简易使用方法介绍-程序员宅基地

文章浏览阅读232次。如果我是C罗原文ORACLE PL/SQL 中序列(sequence)的简易使用方法介绍sequence在ORACLE中应用十分广泛,就是序列号的意思,会自动增加指定变数,如逐次增加1或者2或者其他.1.创建序列 Create Sequence你首先要有CREATE SEQUENCE或者CREATE ANY SEQUENCE 权限C..._pl/sql body 怎样使用序列

VINS-Mono代码阅读笔记(二):feature_tracker代码阅读_image discontinue! reset the feature tracker!-程序员宅基地

文章浏览阅读3.8k次,点赞14次,收藏22次。1.入口main函数feature_tracker结点的入口函数为feature_tracker_node.cpp文件中的main函数。main函数代码如下:/** * feature_tracker_node的入口函数*/int main(int argc, char **argv){ ros::init(argc, argv, "feature_tracker");..._image discontinue! reset the feature tracker!

古堡算式ABCDE * ? = EDCBA-程序员宅基地

文章浏览阅读1.7k次。/*福尔摩斯到某古堡探险,看到门上写着一个奇怪的算式: ABCDE * ? = EDCBA 他对华生说:“ABCDE应该代表不同的数字,问号也代表某个数字!” 华生:“我猜也是!” 于是,两人沉默了好久,还是没有算出合适的结果来。 请你利用计算机的优势,找到破解的答案。 把 ABCDE 所代表的数字写出来。*/ #includ_abcde * ?

随便推点

【Latex】高级插入图片技巧: 双栏中如何正确插入图片 + 如何多图_latex两栏图片-程序员宅基地

文章浏览阅读4.8w次,点赞17次,收藏70次。【问题描述】貌似multicols环境中不能放图片,即\begin{multicols}{2}\begin{figure}\centering\includegraphics[width=0.309\textwidth]{fig0001.eps}\caption{图} \label{fig:1}\end{figure}\end{multicols} 是不允许的,图片_latex两栏图片

python去掉列表中的单引号_从Python中的列表中删除单引号-程序员宅基地

文章浏览阅读4.9k次。我有一个输入字符串:result = '"testing","0.8841","642000.0","80.014521","-60.940653","4522126666","1500854400","","1500842014000","name","80.014521","-60.996532","sampledevice","3","name"'data = result.split("\..._列表 单引号

面试题62 圆圈中最后剩下的数字(java)_c++问题即,1, 2, ..., n这n个数字排成一个圆圈,从数字1开始,每次从这个圆圈里删除-程序员宅基地

文章浏览阅读229次。0,1,,n-1这n个数字排成一个圆圈,从数字0开始,每次从这个圆圈里删除第m个数字。求出这个圆圈里剩下的最后一个数字。例如,0、1、2、3、4这5个数字组成一个圆圈,从数字0开始每次删除第3个数字,则删除的前4个数字依次是2、0、4、1,因此最后剩下的数字是3。 示例 1:输入: n = 5, m = 3输出: 3示例 2:输入: n = 10, m = 17输出: 2..._c++问题即,1, 2, ..., n这n个数字排成一个圆圈,从数字1开始,每次从这个圆圈里删除

Android内存阀值修改--内存回收机制配置_手机内存回收机制如何更改-程序员宅基地

文章浏览阅读1.8w次。Android采取了一种有别于Linux的进程管理策略,有别于Linux的在进程活动停止后就结束该进程,Android把这些进程都保留在内存中, 直到系统需要更多内存为止。这些保留在内存中的进程通常情况下不会影响整体系统的运行速度,并且当用户再次激活这些进程时,提升了进程的启动速度。那Android什么时候结束进程?结束哪个进程呢?Android是依据一个名为LRU(last recent_手机内存回收机制如何更改

HQL:使用面向对象的HQL查询语言_hql 面向对象-程序员宅基地

文章浏览阅读1.5k次。Query接口1.不可省略的formString hql="form Student";//创建Query实例Query query = Session.createQuery(hql);//执行HQL调用list(),返回List集合List studentList = query.list();2.select//别名的使用String hql="select s.nam_hql 面向对象

spring boot + mybatis-plus返回树形结构数据_数据库返回树形结构数据-程序员宅基地

文章浏览阅读2.5k次,点赞2次,收藏15次。以上是我从最近的项目中学到的spring boot + mybatis-plus返回树形结构的方法。_数据库返回树形结构数据

推荐文章

热门文章

相关标签