微擎 Ueditor 百度编辑器 替换图片不显示问题

问题:

最近在使用微擎添加公众号平台文章时,上传图片可以显示,但是点击 html(编辑器的按钮,可以显示html代码) 时出现图片不显示问题。
我是用的135编辑器挑选的图文模板,我替换完模板中的图片后,图片的链接失效,图片不显示。

原因:

查看了源代码后发现图片的src链接不带域名,直接显示images/,但是在微擎下图片的根目录是\attachment,图片缺少根路径导致了图片不能显示。

解决:

既然是路径问题,那我开始没有点击html时图片能够正常显示的,那就说明,图片一开始路径是没有问题的,但是当我点击了html后出现路径不对,那问题应该就是在点击html时触发了什么事件。
看了ueditor的api发现在触发html事件是,会执行一个getContent()方法,这个方法会过滤html,会把img标签下的_src属性赋值到src,而_src的路径在微擎里面是获取的imgs[0]['attachemnt'],这个路径不会包含httpattachment
所以,我们修改微擎的代码把'_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);
                        });
                    }
                });

你可能感兴趣的:(微擎 Ueditor 百度编辑器 替换图片不显示问题)