CKEditor 4 插件開發入門：自訂按鈕為選取文字加入地圖連結圖示

需求：編輯器中選取文字，點擊自訂按鈕，自動在文字後插入帶超連結的地圖圖示，連結參數為選取文字。以下為完整開發步驟：

1. 建立插件目錄結構

ckeditor/
└── plugins/
    └── addmap/
        ├── plugin.js
        └── map.gif  (按鈕圖示，24x24 建議)

2. 撰寫 plugin.js 核心邏輯

(function() {
    // 按鈕點擊執行邏輯
    var cmd = {
        exec: function(editor) {
            var data = '';
            var sel = editor.getSelection();
            
            if (CKEDITOR.env.ie) {
                sel.unlock(true);
                data = sel.getNative().createRange().text;
            } else {
                data = sel.getNative(); // 標準瀏覽器直接取選取文字
            }
            
            if (data && data !== '') {
                editor.insertHtml(data + 
                    '<a href="/map_index.html?ad=' + data + '">' +
                    '<img border="0" height="24" src="/images/map_icon.gif" width="24" />' +
                    '</a>');
            }
        }
    };
    
    var pluginName = 'addmap';
    CKEDITOR.plugins.add(pluginName, {
        init: function(editor) {
            editor.addCommand(pluginName, cmd);
            editor.ui.addButton('addmap', {
                label: 'Add Map Link',
                icon: this.path + 'map.gif',
                command: pluginName
            });
        }
    });
})();

3. 修改 config.js 掛載插件

CKEDITOR.editorConfig = function(config) {
    config.language = 'zh-cn';
    config.font_names = '宋體;微軟雅黑;Arial;...'; // 字體清單
    config.toolbar = [
        ['Source', '-', 'Preview'],
        ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Print', 'Link', 'Unlink', 'Anchor'],
        ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
        ['addmap']  // 新增按鈕群組
    ];
    config.extraPlugins = 'addmap'; // 關鍵：載入外掛
};

4. 測試驗證

重新載入編輯器，工具列將出現「Add Map Link」按鈕（map.gif 圖示）。選取文字點擊，即自動插入地圖連結圖示。

關鍵技術點

• 跨瀏覽器選取文字處理：IE 需 unlock() + createRange().text，標準瀏覽器直接用 getNative()
• editor.insertHtml() 插入 HTML 片段，自動處理游標位置
• config.extraPlugins 註冊外掛名稱，需與 plugins.add() 第一參數一致