解决百度UEditor富文本地图控件不支持https的问题

最新推荐文章于 2021-11-22 21:07:44 发布
最新推荐文章于 2021-11-22 21:07:44 发布
阅读量831 收藏
点赞数
分类专栏： 百度地图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011403174/article/details/103697731
版权

第一:

在map.html和show.html的head标签中添加:

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

第二:

修改1.1到2.0升级的部分api：
map.html:
改前:

Line 8 <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.1&services=true"></script>

改后:

Line 8 <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=百度地图秘钥&s=1"></script>

改前：

Line 57  marker.setPoint(point);

改后：

Line 57  marker.setPosition(point);

改前：

Line 109  var zoom = map.zoomLevel();

改后：

Line 109  var zoom = map.getZoom();

改前:

Line 113  var point = marker.getPoint();

改后:

Line 113  var point = marker.getPosition();

改前:

Line 126  var url = "http://api.map.baidu.com/staticimage?center=" + center.lng + ',' + center.lat +

改后:

Line 126  var url = "https://api.map.baidu.com/staticimage?s=1&center=" + center.lng + ',' + center.lat +

show.html:
改前：

Line 17  <script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>

改后：

Line 17  <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=百度地图秘钥&s=1"></script>

改前:

Line 109  marker = window.marker.getPoint();

改后:

Line 109  marker = window.marker.getPosition();

ok!

参考网址:

  1. https://blog.csdn.net/qq_41408081/article/details/89958598
  2. https://blog.csdn.net/stacy06/article/details/82626363

map.html 文件修改后的

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    <title></title>
    <script type="text/javascript" src="../internal.js"></script>
    <!--<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.1&services=true"></script> -->
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=百度地图秘钥&s=1"></script>
    <style type="text/css">
        .content{width:530px; height: 350px;margin: 10px auto;}
        .content table{width: 100%}
        .content table td{vertical-align: middle;}
        #city,#address{height:21px;background: #FFF;border:1px solid #d7d7d7; line-height: 21px;}
        #city{width:60px}
        #address{width:130px}
        #is_dynamic_label span{vertical-align:middle;margin: 3px 0px 3px 3px;}
        #is_dynamic_label input{vertical-align:middle;margin: 3px 3px 3px 50px;}
    </style>
</head>
<body>
<div class="content">
    <table>
        <tr>
            <td><var id="lang_city"></var>:</td>
            <td><input id="city" type="text" /></td>
            <td><var id="lang_address"></var>:</td>
            <td><input id="address" type="text" value="" /></td>
            <td><a href="javascript:doSearch()" class="button"><var id="lang_search"></var></a></td>
            <td><label id="is_dynamic_label" for="is_dynamic"><input id="is_dynamic" type="checkbox" name="is_dynamic" /><span><var id="lang_dynamicmap"></var></span></label></td>
        </tr>
    </table>
    <div style="width:100%;height:340px;margin:5px auto;border:1px solid gray" id="container"></div>

</div>
<script type="text/javascript">
    var map = new BMap.Map("container"),marker,point,styleStr;
    map.enableScrollWheelZoom();
    map.enableContinuousZoom();
    function doSearch(){
        if (!document.getElementById('city').value) {
            alert(lang.cityMsg);
            return;
        }
        var search = new BMap.LocalSearch(document.getElementById('city').value, {
            onSearchComplete: function (results){
                if (results && results.getNumPois()) {
                    var points = [];
                    for (var i=0; i<results.getCurrentNumPois(); i++) {
                        points.push(results.getPoi(i).point);
                    }
                    if (points.length > 1) {
                        map.setViewport(points);
                    } else {
                        map.centerAndZoom(points[0], 13);
                    }
                    point = map.getCenter();
                    //marker.setPoint(point);
                    marker.setPosition(point);
                } else {
                    alert(lang.errorMsg);
                }
            }
        });
        search.search(document.getElementById('address').value || document.getElementById('city').value);
    }
    //获得参数
    function getPars(str,par){
        var reg = new RegExp(par+"=((\\d+|[.,])*)","g");
        return reg.exec(str)[1];
    }
    function init(){
        var mapNode = editor.selection.getRange().getClosedNode(),
            isMapImg = mapNode && /api[.]map[.]baidu[.]com/ig.test(mapNode.getAttribute("src")),
            isMapIframe = mapNode && domUtils.hasClass(mapNode, 'ueditor_baidumap');
        if(isMapImg || isMapIframe){
            var url, centerPos, markerPos;
            if(isMapIframe) {
                url = decodeURIComponent(mapNode.getAttribute("src"));
                $G('is_dynamic').checked = true;
                styleStr = mapNode.style.cssText;
            } else {
                url = mapNode.getAttribute("src");
                styleStr = mapNode.style.cssText;
            }

            centerPos = getPars(url,"center").split(",");
            markerPos = getPars(url, "markers").split(",");
            point = new BMap.Point(Number(centerPos[0]),Number(centerPos[1]));
            marker = new BMap.Marker(new BMap.Point(Number(markerPos[0]), Number(markerPos[1])));
            map.addControl(new BMap.NavigationControl());
            map.centerAndZoom(point, Number(getPars(url,"zoom")));
        }else{
            point = new BMap.Point(116.404, 39.915);    // 创建点坐标
            marker = new BMap.Marker(point);
            map.addControl(new BMap.NavigationControl());
            map.centerAndZoom(point, 10);                     // 初始化地图,设置中心点坐标和地图级别。
        }
        marker.enableDragging();
        map.addOverlay(marker);
    }
    init();
    document.getElementById('address').onkeydown = function (evt){
        evt = evt || event;
        if (evt.keyCode == 13) {
            doSearch();
        }
    };
    dialog.onok = function (){
        var center = map.getCenter();
        var zoom = map.getZoom();
       // var zoom = map.zoomLevel;
        var size = map.getSize();
        var mapWidth = size.width;
        var mapHeight = size.height;
        //var point = marker.getPoint();
        var point = marker.getPosition();

        if($G('is_dynamic').checked) {
            var URL = editor.options.UEDITOR_HOME_URL,
                url = [URL + (/\/$/.test(URL) ? '':'/') + "dialogs/map/show.html" +
                    '#center=' + center.lng + ',' + center.lat,
                    '&zoom=' + zoom,
                    '&width=' + mapWidth,
                    '&height=' + mapHeight,
                    '&markers=' + point.lng + ',' + point.lat,
                    '&markerStyles=' + 'l,A'].join('');
            editor.execCommand('inserthtml', '<iframe class="ueditor_baidumap" src="' + url + '"' + (styleStr ? ' style="' + styleStr + '"' :'') + ' frameborder="0" width="' + (mapWidth+4) + '" height="' + (mapHeight+4) + '"></iframe>');
        } else {
           // var url = "http://api.map.baidu.com/staticimage?center=" + center.lng + ',' + center.lat +
              var url = "https://api.map.baidu.com/staticimage?s=1&center=" + center.lng + ',' + center.lat +
                    "&zoom=" + zoom + "&width=" + size.width + '&height=' + size.height + "&markers=" + point.lng + ',' + point.lat;
            editor.execCommand('inserthtml', '<img width="'+ size.width +'"height="'+ size.height +'" src="' + url + '"' + (styleStr ? ' style="' + styleStr + '"' :'') + '/>');
        }
    };
    document.getElementById("address").focus();
</script>


</body>
</html>

show.html文件修改后:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具"/>
    <meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图"/>
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    <title>百度地图API自定义地图</title>
    <!--引用百度地图API-->
    <style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
    <!-- <script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script> -->
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=百度地图秘钥&s=1"></script>
</head>

<body onload="initMap();">
<!--百度地图容器-->
<div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div>
</body>
<script type="text/javascript">
    function getParam(name) {
        return location.href.match(new RegExp('[?#&]' + name + '=([^?#&]+)', 'i')) ? RegExp.$1 : '';
    }
    var map, marker;
    var centerParam = getParam('center');
    var zoomParam = getParam('zoom');
    var widthParam = getParam('width');
    var heightParam = getParam('height');
    var markersParam = getParam('markers');
    var markerStylesParam = getParam('markerStyles');

    //创建和初始化地图函数：
    function initMap() {
        // [FF]切换模式后报错
        if (!window.BMap) {
            return;
        }
        var dituContent = document.getElementById('dituContent');
        dituContent.style.width = widthParam + 'px';
        dituContent.style.height = heightParam + 'px';

        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件

        // 创建标注
        var markersArr = markersParam.split(',');
        var point = new BMap.Point(markersArr[0], markersArr[1]);
        marker = new BMap.Marker(point);
        marker.enableDragging();
        map.addOverlay(marker); // 将标注添加到地图中

        if(parent.editor && parent.document.body.contentEditable=="true") { //在编辑状态下
            setMapListener();//地图改变修改外层的iframe标签src属性
        }
    }

    //创建地图函数：
    function createMap() {
        map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
        var centerArr = centerParam.split(',');
        var point = new BMap.Point(parseFloat(centerArr[0]), parseFloat(centerArr[1]));//定义一个中心点坐标
        map.centerAndZoom(point, parseInt(zoomParam));//设定地图的中心点和坐标并将地图显示在地图容器中
    }

    //地图事件设置函数：
    function setMapEvent() {
        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图
    }

    //地图控件添加函数：
    function addMapControl() {
        //向地图中添加缩放控件
        var ctrl_nav = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE});
        map.addControl(ctrl_nav);
        //向地图中添加缩略图控件
        var ctrl_ove = new BMap.OverviewMapControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1});
        map.addControl(ctrl_ove);
        //向地图中添加比例尺控件
        var ctrl_sca = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});
        map.addControl(ctrl_sca);
    }

    function setMapListener() {
        var editor = parent.editor, containerIframe,
            iframes = parent.document.getElementsByTagName('iframe');
        for (var key in iframes) {
            if (iframes[key].contentWindow == window) {
                containerIframe = iframes[key];
                break;
            }
        }
        if (containerIframe) {
            map.addEventListener('moveend', mapListenerHandler);
            map.addEventListener('zoomend', mapListenerHandler);
            marker.addEventListener('dragend', mapListenerHandler);
        }

        function mapListenerHandler() {
            var zoom = map.getZoom(),
                center = map.getCenter(),
                //marker = window.marker.getPoint();
            marker = window.marker.getPosition();
            containerIframe.src = containerIframe.src.
                replace(new RegExp('([?#&])center=([^?#&]+)', 'i'), '$1center=' + center.lng + ',' + center.lat).
                replace(new RegExp('([?#&])markers=([^?#&]+)', 'i'), '$1markers=' + marker.lng + ',' + marker.lat).
                replace(new RegExp('([?#&])zoom=([^?#&]+)', 'i'), '$1zoom=' + zoom);
            editor.fireEvent('saveScene');
        }
    }
</script>
</html>

注意将以上两个文件中的 【百度地图秘钥】修改为 【在百度地图中申请的key】

申请百度地图秘钥

网址: http://lbs.baidu.com/apiconsole/key
点击创建应用,填写应用名称,应用类型选择浏览器端,填写Referer白名单,填写方法详见文本框下方
在这里插入图片描述

小动物不困了
关注
专栏目录
来自百度的71款开源项目
科技D人生
11-15 2064
百度，一家让人既爱又恨的企业，血友吧贴吧被卖，魏则西事件的持续发酵，一时间将百度推到了舆论的风口浪尖上。是非对错，我们在这里也不多做评判，本文呢为大家整理了百度开源的70+项目，看看有没有感兴趣的。本文内容综合整理自oschina、github。 1. JavaScript图表库 ECharts ECharts开源来自百度商业前端数据可视化团队，基于html5 Canvas，是一个纯J
开源巨献：来自百度的71款开源项目
m0_68850571的博客
04-25 629
百度，一家让人既爱又恨的企业，血友吧贴吧被卖，魏则西事件的持续发酵，一时间将百度推到了舆论的风口浪尖上。是非对错，我们在这里也不多做评判，本文呢为大家整理了百度开源的70+项目，看看有没有感兴趣的。本文内容综合整理自oschina、github。 1.JavaScript图表库 ECharts ECharts开源来自百度商业前端数据可视化团队，基于html5 Canvas，是一个纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特.
neditor:基于 ueditor的更现代化的富文本编辑器，支持HTTPS
05-11
新版发布 2.1 发布，此次版本移除了后端相关代码，纯 ajax 提交，请配置 neditor.config.js neditor.service.js，支持各种后端或者云存储。 捐赠 该项目需要您的支持， 以支持此项目的发展。 第一步：下载编辑器 方式一：完整安装包 （推荐） 方式二： npm安装 npm i @notadd/neditor -S 方式三：编译安装 git clone https://github.com/notadd/neditor.git npm install npm run build 第二步：在浏览器打开 index.html 进入到目录 dist , 使用浏览器打开文件 index.html 。 如果看到了下面这样的编辑器，恭喜你，初次部署成功！ 相关版本 【第三方维护】 【第三方维护】 技术支持 该项目基于 MIT 协议开源，任何组织/企业以
百度UEditor控件中的map组件不支持https使用的问题解决
stacy06的专栏
09-11 2707
最近项目部署到了https环境下，使用的UEditor富文本编辑器中的map组件出现了问题，控制台报了一堆错误，主要是mixed content.. ，就连百度的官网上也同样是有这些问题，汗。。 没有办法，只能四处搜索解决问题的答案。。。 第一点收获： https是安全传输协议，在这个协议下传输的网页不允许包含http协议这类不安全的内容。 HTTPS页面里动态的引入HTTP资源，比如...
ueditor富文本编辑器使用百度地图自定义动态地图组件及兼容https及http协议
weixin_33957648的博客
01-11 474
ueditor富文本编辑器默认支持百度地图组件，但是如果导入动态地图后会加很多默认的地图组件在上面。如果需要自定义动态地图的组件则需要修改ueditor特定的html。 ueditor百度地图组件所在目录 show.html文件中定义了地图的控件，有自定义需要的时候可以在这个文件中自己编辑 如果自己所在的环境中是https协议的话，那ueditor是不支持的，因为这两个文件中...
百度富文本编辑器ueditor在https协议下无法正常插入动态地图
女儿控老徐的专栏
11-25 2117
在浏览器https协议下，百度富文本编辑器ueditor有可能会无法正常插入动态地图。所谓“动态地图”，就是在插入地图的时候，勾选右上角的“动态地图”选择框： 如上图所示，有可能在插入地图的时候，显示的是一片空白，也有可能显示的是残缺或者严重偏移的地图。 导致这种情形的主要原因，还是因为ueditor在默认状态下仅支持http协议，而在现在越来越多的浏览器对https协议的更强制的支持之下，越来越多的web应用都会运行在https协议下，因此，需要对该地图插件进行改造。 一、修改j..
解决百度ueditor插入动态地图空白 支持iframe方法
weixin_30788731的博客
07-28 141
新下载的ueditor 增加了xss 安全过虑，把iframe过滤了，导致本身的地图动态功能也限制了。 说明：新版本ueditor要修改 xss过滤白名单 修改配置文件ueditor.config.js 搜索: whitList 增加下面第二行即可 ,whitList:{ iframe: ['frameborder','border','marginwidth','mar...
Ueditor自定义开发地图功能
夜之寐 的技术博客
12-19 6934
Ueditor自定义开发地图功能由于最近需要对地图功能进行修改，所以基于Uedior做了二次开发，根据百度地图官方提供的api和例子，完成了以下功能： 即：显示圆形区域内的定点范围的周边设施！地图文件的作用 地图插件中包含的文件有 map.html ## 地图选择文件 show.html ## 地图最终显示效果文件 en.js
后台需要南阳帮忙改的1
08-08
原框架的编辑器可能不支持HTML代码编辑，这时可以选用更强大的富文本编辑器，如百度的UEditor。但要注意，UEditor可能需要自定义配置以实现自适应布局。 7. **搜索框布局调整**： 搜索框的布局调整涉及到CSS的...
java 后台框架 支持APP接口调用 APP后台 手机后台框架java springmvc mybaits mysql oracle html5 后台框架
haidao889的博客
02-06 3813
获取【下载地址】    A 调用摄像头拍照，自定义裁剪编辑头像 【新录针对本系统的视频教程，手把手教开发一个模块，快速掌握本系统】 B 集成代码生成器 [正反双向](单表、主表、明细表、树形表，开发利器)+快速构建表单;  技术：313596790 freemaker模版技术 ，0个代码不用写，生成完整的一个模块，带页面、建表sql脚本，处理类，service等完整模块 C
百度富文本编辑器（ueditor）自定义上传接口（路径）
11-07
百度ueditor编辑器将图片上传到非项目根路径(保存在磁盘上)或独立服务器解决方案 教程：https://blog.csdn.net/qq_16220645/article/details/78860497 源码已经修改好了，直接buildpath到项目里就OJBK
UEditor 富文本web编辑器
mingyqf的博客
11-22 1005
大神论坛 UEditor 富文本web编辑器最新漏洞版XML文件上传导致存储型XSS https://www.cnblogs.com/dslt/p/14903092.html 一、Ueditor最新版XML文件上传导致存储型XSS 测试版本：php版 v1.4.3.3 下载地址：https://github.com/fex-team/ueditor 复现步骤： 上传一个图片文件 然后buprsuit抓包拦截 3.将uploadimage类型改为uploadfile，并修改文件后缀名为xml,最后
ueditor使用小结
weixin_34233618的博客
12-24 383
一、简介 ueditor是百度编辑器，官网地址：http://ueditor.baidu.com/website/ 完整的功能演示，可以参考：http://ueditor.baidu.com/website/onlinedemo.html 为了方便开发学习，我们下载它的完整版和.net版。 ueditor_release_ueditor1_4_3_1-src.zip ueditor...
百度编辑器UEditor插入表格和百度地图不显示的问题
傻丫头的博客
02-03 4480
一、百度编辑器ueditor（本人下载的JSP版本）插入表格不显示边框的解决方法 百度编辑器ueditor插入一个表格后，在编辑过程中有表格，但是保存后，在前台网页中没有边框 1. 打开编辑器根目录下面的ueditor.all.js文件，找到： for (var c = 0; c     html.push('' + (browser.ie ? domUtils.fillCha
ueditor中遇到的坑
qq_34652478的博客
01-15 5594
ueditor中遇到的坑 最近进入一个go开发项目组，我一个java开发的第一个任务就是研究ueditor组件的使用，嗨，来来回回花了5天多吧，特意写下这篇文章，记住在ueditor中踩过的坑。 1.不晓得前端下的ueditor是哪个版本，就是和百度上面的主流不一样，搞的我想弄死他。打开ueditor的富文本编辑器，点击图片也好视频也好，就是报上面后台配置错误，最后我在ueditor.config...
ueditor富文本编辑器爬坑指南
Dawn的博客
06-22 288
直接在其所在页面上加如下标签即可 <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> 意思是自动将http的不安全请求升级为https
非常综合的地图网站-17ditu.com
maxma的博客
08-30 2896
之前有一个网站，可以非常方便的切换地图，尤其是方便快速访问谷歌地图，但是该网站现在有不能访问谷歌地图了。不着急，发现了一个更好的替换网站，一起地图（https://www.17ditu.com/） https://www.17ditu.com/ ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值