Baidu rich text editor ueditor cannot normally insert dynamic maps under the https protocol

Under the HTTPS protocol of the browser, Baidu rich text editor ueditor may not be able to insert the dynamic map normally. The so-called "Dynamic Map" is to check the "Dynamic Map" selection box in the upper right corner when inserting the map:

 

 

As shown in the figure above, when the map is inserted, it may display a blank, or it may display an incomplete or severely offset map.

The main reason for this situation is that ueditor only supports the http protocol by default, and now more and more browsers are more mandatory to support the https protocol, more and more web applications will run Under the https protocol, therefore, the map plug-in needs to be modified.

1. Modify the js configuration

In the ueditor directory, find the following files:

 

Open the file and find the following:

Check whether the following two configurations exist in this "whitList":

a:      ['target', 'href', 'title', 'class', 'style']

iframe: ['src', 'class', 'height', 'width', 'max-width', 'max-height', 'align', 'frameborder', 'allowfullscreen','border','marginwidth','marginheight','id']

Note the comma "," at the end of the configuration item

If the configuration item is at the last item of whitList, it does not need to end with a comma.

2. Modify the map.html file

In the directory of ueditor, find the following files:

/ueditor/dialogs/map/map.html

 

Open the file and find the following code at the top of the file:

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

Change it to:

<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=YOUR_AK&s=1"></script>

Note that "YOUR_AK" in the above code needs to be applied on the Baidu Maps development platform, and there is no fee.

Then, in that file, find the following code snippet:

dialog.onok = function (){
    ...
}

In the implementation logic of this code, modify it according to the following comment positions:

dialog.onok = function (){
    var center = map.getCenter();
    //var zoom = map.zoomLevel;	//http协议
    var zoom = map.getZoom();	//https协议
    var size = map.getSize();
    var mapWidth = size.width;
    var mapHeight = size.height;
    //var point = marker.getPoint();	//http协议
    var point = marker.getPosition();	//https协议

    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 {
      	//http协议
        //var url = "http://api.map.baidu.com/staticimage?center=" + center.lng + ',' + center.lat +
        //        "&zoom=" + zoom + "&width=" + size.width + '&height=' + size.height + "&markers=" + point.lng + ',' + point.lat;
            
        //https协议
        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 + '"' :'') + '/>');
    }
};

3. Modify the show.html file

In the directory of ueditor, find the following files:

/ueditor/dialogs/map/show.html

Open the file and find the following code at the top of the file:

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

Change it to:

<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=YOUR_AK&s=1"></script>

Note that "YOUR_AK" in the above code needs to be applied on the Baidu map development platform, and there is no fee. The modification here is the same as that in the previous map.html file.

So far, all modifications have been completed.