GoogleMap + CkEditor自订ToolBar

After connecting the previous "CKEditor Custom ToolBar Button"

Today GoogleMap combined to write a useful tool now!

Ckeditor basic settings and custom ToolBar preparations

I will not go into details, please refer to not read CKEditor Custom ToolBar button Hello!

Then he began to talk about the topic, first of all in the first set button config.js and custom plugin file name, as follows

CKEDITOR.editorConfig = function (config) {
    config.toolbar_Full =
    [
    ['Source', 'Code', 'GoogleMap']
    ];
    config.extraPlugins = 'CodePlugin,GoogleMapPlugin';
};

GoogleMap added a button, as well as custom Plugin name is called "GoogleMapPlugin"

Then in the plugin folder under a new "GoogleMapPlugin" folder of the same name,

And add a profile on its lower plugin.js. Then write content:

CKEDITOR.plugins.add('GoogleMapPlugin',
{
    init: function (editor) {
        // Add the link and unlink buttons.
        editor.addCommand('GoogleMapPlugin', new CKEDITOR.dialogCommand('GoogleMapPlugin')); //定义dialog，也就是下面的code
        editor.ui.addButton('GoogleMap',     //定义button的名称及图片,以及按下后弹出的dialog
       {                               //这里将button名字取叫'GoogleMap'，因此刚刚上方的toolbar也是加入名为GoogleMap的按钮
       label: '自订插入GoogleMap工具',
       icon: '/images/map.png',
       command: 'GoogleMapPlugin'
   });
        
   CKEDITOR.dialog.add('GoogleMapPlugin', function (editor) {
            //以下开始定义dialog的属性及事件          
            return {                        //定义简单的title及宽高
                title: '插入GoogleMap地图',
                minWidth: 200,
                minHeight: 200,
                contents: [
                   {
                       id: 'GoogleMapControl',
                       label: '自订插入GoogleMap工具',
                       title: '自订插入GoogleMap工具',
                       elements:              //elements是定义dialog内部的组件
                           [                  //这边新增四个text分别输入宽高及经纬度
                           {
                               id: 'lng',
                               type: 'text',
                               label: '请输入经度',
                               style: 'width:150px;height:30px',
                               'default': ''
                           },
                           {
                               id: 'lat',
                               type: 'text',
                               label: '请输入纬度',
                               style: 'width:150px;height:30px',
                              'default': ''
                           }
                           ,
                           {
                               id: 'width',
                               type: 'text',
                               label: '请输入地图宽度',
                               style: 'width:150px;height:30px',
                               'default': '425'
                           }
                           ,
                           {
                               id: 'height',
                               type: 'text',
                               label: '请输入地图高度',
                               style: 'width:150px;height:30px',
                               'default': '350'
                           }
                           ]
                   }
                   ],
                onOk: function () {
                    //抓出textbox内的值
                    lng = this.getValueOf('GoogleMapControl', 'lng');
                    lat = this.getValueOf('GoogleMapControl', 'lat');
                    width = this.getValueOf('GoogleMapControl', 'width');
                    height = this.getValueOf('GoogleMapControl', 'height');
                    
                    //editor.insertHtml(""+lng+lat+"");这边不用这种方法，原因等等说明
                    
  //辛苦的将字符串组进去   
 var mapString =
 ""+
  "";

                    var iframeNode = CKEDITOR.dom.element.createFromHtml(mapString, editor.document);

                    var newFakeImage = editor.createFakeElement(iframeNode, 'cke_iframe', 'iframe', true);

                    editor.insertElement(newFakeImage);
                }
            };
        });
    }
})

A long Code, but is actually very simple, only a few key part of it.

19 to 58 is out of the line of dialog to have those controls, the rest is there to do some naming of action when you press the OK

Compare Note that, if the insert mode line 66, as ckeditor should default on some of the more sensitive tag

Do preclude action, and therefore can not be inserted. So to switch to a similar manner createElement inserted iframe

The operation of the line 82, is pretending iframe tag into a gear ckeditor not to insert the content

Once complete, you can see the button, and after the effect of pressing him

Then simply enter the latitude and longitude, with the width and height map, it will insert the iframe will.

Latitude and longitude of the part, I have written the address input with C # way grab latitude and longitude, come back another day to share it.

Currently, to test first to see directly with latitude and longitude GoogleMap

A simpler way is to first find the location you want to use the address googlemap, and then paste in the address bar

"javascript:void(prompt('',gApplication.getMap().getCenter()));"

Latitude and longitude will pop up a window.

Then enter just do their own plugin, press OK

(After pressing OK may not immediately come out, you can double-click the source code, there will be a map)

A simple plugin just fine.

Reference data:

My Coding road - Custom ToolBar button

Original: Big Box GoogleMap + CkEditor custom ToolBar

GoogleMap + CkEditor自订ToolBar

Guess you like