问题:
最近在使用微擎添加公众号平台文章时,上传图片可以显示,但是点击 html(编辑器的按钮,可以显示html代码) 时出现图片不显示问题。
我是用的135编辑器挑选的图文模板,我替换完模板中的图片后,图片的链接失效,图片不显示。
原因:
查看了源代码后发现图片的src链接不带域名,直接显示images/
,但是在微擎下图片的根目录是\attachment
,图片缺少根路径导致了图片不能显示。
解决:
既然是路径问题,那我开始没有点击html时图片能够正常显示的,那就说明,图片一开始路径是没有问题的,但是当我点击了html后出现路径不对,那问题应该就是在点击html时触发了什么事件。
看了ueditor的api发现在触发html事件是,会执行一个getContent()
方法,这个方法会过滤html,会把img
标签下的_src
属性赋值到src
,而_src
的路径在微擎里面是获取的imgs[0]['attachemnt']
,这个路径不会包含http
和attachment
所以,我们修改微擎的代码把'_src' : imgs[0]['attachment'],
修改为'_src' : imgs[0]['url'],
就可以解决问题了。
代码:
文件路径
\web\common\tpl.func.php
大概在 1013行左右
UE.registerUI('myinsertimage',function(editor,uiName){
editor.registerCommand(uiName, {
execCommand:function(){
require(['fileUploader'], function(uploader){
uploader.show(function(imgs){
console.log(imgs)
if (imgs.length == 0) {
return;
} else if (imgs.length == 1) {
editor.execCommand('insertimage', {
'src' : imgs[0]['url'],
'_src' : imgs[0]['url'],
'width' : '100%',
'alt' : imgs[0].filename
});
} else {
var imglist = [];
for (i in imgs) {
imglist.push({
'src' : imgs[i]['url'],
'_src' : imgs[i]['url'],
'width' : '100%',
'alt' : imgs[i].filename
});
}
editor.execCommand('insertimage', imglist);
}
}, opts);
});
}
});
网友评论