美文网首页iOS开发记录
ios 编辑器3-基于wkwebview编辑器插入网络图片不显示

ios 编辑器3-基于wkwebview编辑器插入网络图片不显示

作者: DaZenD | 来源:发表于2020-09-02 10:33 被阅读0次

    ios 编辑器3-WKWebview插入网络图片不显示问题

    这个知识点,没有太多话语权,因为并没有找到根本原因,这个问题查了很多资料,然而并没有查到,所以,下面多留点关键词,希望有这类问题的小伙伴能搜到这种实现方式:

    WKWebview加载网络图片失败

    ios端html插入网络图片失败

    WKWebview网络图片的bug

    WKWebview中js注入网络图片失败

    问题

    组件化的实话,插入一个file,形如下面这种,app端是非常常用的ui组合,如果图片是一个网络图片的话,就不显示,很奇怪

    file.png

    nnhubbard/ZSSRichTextEditor 这个库,实测js动态注入网络图片也是不显示的

    gcdwebserver方案

    上篇说过了,加载时候本地服务器模拟server资源加载

    dom重新渲染

    zss_editor.insertFile = function(url,title, message, thumbnailUrl) {
        zss_editor.restorerange();
        var html = '&nbsp;<div class="file" data-file-url="'+url+'"  onclick="FileClick(this)"><img id="imageSpan" src="'+thumbnailUrl+'" align="left" height="100" width="100" /><h3>'+title+'</h3><p>'+message+'</p></div>&nbsp;<br>';;
        zss_editor.insertHTML(html);
    }
    
    zss_editor.replaceImageInFile = function(url, alt) {
        var img = document.createElement('img');
        img.setAttribute('src',url);
        img.setAttribute('alt',alt);
        img.setAttribute('align',"left");
        img.setAttribute('height', 100);
        img.setAttribute('width', 100);
        document.getElementById('imageSpan').replaceWith(img);
    }
    
    zss_editor.insertHTML = function(html) {
        document.execCommand('insertHTML', false, html);
    }
    

    app端的file类型:

    网络图片不加载,并不是加载失败,而是不加载。ios就延迟加载,先插入dom,延迟后再添加或替换img标签,触发dom重新渲染,这样就ok了

    ios 编辑器1-基于WKWebview的编辑器技术方案
    ios 编辑器2-基于wkwebview编辑器加载本地html资源
    ios 编辑器4-基于wkwebview编辑器插入视频文件封面问题

    相关文章

      网友评论

        本文标题:ios 编辑器3-基于wkwebview编辑器插入网络图片不显示

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