技术标签: 前端 vue.js javascript
前提:原本就已经使用了UEditor,现在根据需求将UEditor升级到最新版本1.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
执行完了之后,在dist文件夹里面会看到一个由编码和后台语言组合命名的文件,将这个文件夹内的所有文件,除了ueditor.config.js之外的所有文件替换(ueditor.config.js为配置文件,更新版本之后可以沿用旧的配置文件)
特别说明:根据上一个版本的情况,选择性保留(ueditor.all.js或者ueditor.all.min.js)和(ueditor.parse.js或者ueditor.parse.min.js),删除index.html。看项目引入的是哪个文件,保留引入的文件,删除另一个。
将项目运行起来之后,打开编辑器,查看是否调了获取配置信息的接口。
请检查编辑器初始化时,传入参数的名称是否和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;
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"));
}
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;
}
如果出现i报错,有可能是某个i没有声明就直接使用了,根据报错直接定位即可。
原因是因为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);
});
文章浏览阅读2.6k次。基本信息书名:数字图像处理——使用MATLAB分析与实现(高等学校电子信息类专业定价:69.05元。注 定价是图书封底的标价,售价是顾客支付的价格。作者:蔡利梅,王利娟出版社:清华大学出版社出版日期:注 出版时间受保存的自然因素,未使用的还是新书。ISBN:9787302518228字数:563000页码:356版次:1装帧:平装开本:16开商品标识:[bianma]编辑推荐本书是在作者总结多年从..._数字图像处理蔡利梅课后答案
文章浏览阅读779次。python机器学习——决策树_python实现连续型变量的回归预测
文章浏览阅读1.4k次。我的秋招经验分享(内附笔面试干货)本文出自公众号:程序员江湖。满满干货,关注就送。时间过得很快,已经到了九月中旬,从16年读研到现在将近两年的时间里,从一个Java初...
文章浏览阅读232次。如果我是C罗原文ORACLE PL/SQL 中序列(sequence)的简易使用方法介绍sequence在ORACLE中应用十分广泛,就是序列号的意思,会自动增加指定变数,如逐次增加1或者2或者其他.1.创建序列 Create Sequence你首先要有CREATE SEQUENCE或者CREATE ANY SEQUENCE 权限C..._pl/sql body 怎样使用序列
文章浏览阅读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!
文章浏览阅读1.7k次。/*福尔摩斯到某古堡探险,看到门上写着一个奇怪的算式: ABCDE * ? = EDCBA 他对华生说:“ABCDE应该代表不同的数字,问号也代表某个数字!” 华生:“我猜也是!” 于是,两人沉默了好久,还是没有算出合适的结果来。 请你利用计算机的优势,找到破解的答案。 把 ABCDE 所代表的数字写出来。*/ #includ_abcde * ?
文章浏览阅读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两栏图片
文章浏览阅读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("\..._列表 单引号
文章浏览阅读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开始,每次从这个圆圈里删除
文章浏览阅读1.8w次。Android采取了一种有别于Linux的进程管理策略,有别于Linux的在进程活动停止后就结束该进程,Android把这些进程都保留在内存中, 直到系统需要更多内存为止。这些保留在内存中的进程通常情况下不会影响整体系统的运行速度,并且当用户再次激活这些进程时,提升了进程的启动速度。那Android什么时候结束进程?结束哪个进程呢?Android是依据一个名为LRU(last recent_手机内存回收机制如何更改
文章浏览阅读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 面向对象
文章浏览阅读2.5k次,点赞2次,收藏15次。以上是我从最近的项目中学到的spring boot + mybatis-plus返回树形结构的方法。_数据库返回树形结构数据