美文网首页
微擎 Ueditor 百度编辑器 替换图片不显示问题

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

作者: 懒得代码 | 来源:发表于2019-08-16 21:25 被阅读0次

    问题:

    最近在使用微擎添加公众号平台文章时,上传图片可以显示,但是点击 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 百度编辑器 替换图片不显示问题

          本文链接:https://www.haomeiwen.com/subject/ozyqsctx.html