GoogleMap + CkEditor自订ToolBar

接续著上一篇"CKEditor 自订ToolBar按钮"后

今天结合GoogleMap来写一个实用的小工具吧!

基本的Ckeditor设定以及自订ToolBar的准备工作

我就不再赘述了，没有看过的请参考CKEditor 自订ToolBar按钮啰!

接着开始讲正题，首先要先在config.js档内设定按钮及自订plugin名称，如下

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

新增了一个GoogleMap的按钮，以及自订Plugin名称叫做"GoogleMapPlugin"

接着就在plugin数据夹底下新增一个"GoogleMapPlugin"同名数据夹，

然后在其下新增一个plugin.js档。接着撰写内容：

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);
                }
            };
        });
    }
})

很长的一段Code，但是其实很简单，只有几个重点部分而已。

19~58行就是跳出的dialog内要有那些控件，剩下就是一些命名还有按下OK时要做的动作

比较需要注意的是，如果用第66行的插入方式，因为ckeditor应该有默认对一些比较敏感的tag

做排除的动作，因此会没办法插入。所以要改用类似createElement的方式插入iframe

第82行的动作，是将iframe假装成一个ckeditor不会档的tag，以便插入内容中

完成之后，就可以看到按钮，以及按下他之后的效果