开启防盗链后UEditor编辑器图片不显示问题

时间：2023年05月19日阅读：792

以下内容仅是站长或网友个人学习笔记、总结和研究收藏。不保证正确性，因使用而带来的风险与本站无关！

在cdn开启防盗链功能后发现后台文章编辑器不显示图片了。猜想就是因为开启了referer 验证，导致图片访问不了

我们会发现百度编辑器的文本编辑区其实是通过 iframe 嵌入的，而 iframe 的 src 是一串 js 代码。动态创建的iframe 所以 src 没有主域名。导致cdn 验证不通过。

解决方案

创建一个html "iframe.html"

内容为

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' class='view'>
<head>
    <style type='text/css'>
        .view {
            padding: 0;
            word-wrap: break-word;
            cursor: text;
            height: 90%;
        }

        body {
            margin: 8px;
            font-family: sans-serif;
            font-size: 16px;
        }

        p {
            margin: 5px 0;
        }
    </style>
    <link rel='stylesheet' type='text/css' href='/zb_users/plugin/ueditor_plus/ueditor-plus/themes/iframe.css?20220503' />
</head>

<body class='view'></body>
<script type='text/javascript' id='_initialScript'>
    /* 用途: 接收地址栏参数*/
    var urlinfo = window.location.href; //获取当前页面的url
    var len = urlinfo.length;//获取url的长度
    var offset = urlinfo.indexOf("?");//设置参数字符串开始的位置
    var newsidinfo = urlinfo.substr(offset, len)//取出参数字符串 这里会获得类似“id=1”这样的字符串
    newsids = newsidinfo.split("=");//对获得的参数字符串按照“=”进行分割
    newsid = newsids[1];//得到参数值
    newsname = newsids[0];

    setTimeout(function () {
        editor = window.parent.UE.instants['ueditorInstant'+ newsid];
        editor._setup(document);
    }, 0);
    var _tmpScript = document.getElementById('_initialScript');
    _tmpScript.parentNode.removeChild(_tmpScript);
</script>
</html>

ueditor.all.js 中修改以下位置修改只修改src即可

a.appendChild(
domUtils.createElement(document,"iframe",{
    id:"ueditor_"+b.uid,
    width:"100%",
    height:"100%",
    frameborder:"0",
    src:'/zb_users/plugin/ueditor_plus/ueditor-plus/iframe.html?uid='+b.uid
}))

注意：修改后发现在编辑中复制文本会出现 sougou 的一些信息。比较垃圾，应该是QQ浏览器引起的用谷歌浏览器没问题

开启防盗链后UEditor编辑器图片不显示问题 - MOMO教程

打赏

本文地址：https://www.momojc.cn/web/kaiqifangd.html

开启防盗链后UEditor编辑器图片不显示问题

微信关注