ckeditorプラグインの簡単な開発例

CKeditorは、FCKeditorは、新しいバージョンのリリースでは、自分の名前を変更し、＆quot;F＆quot;しないでください。

要件 テキストを編集中にカスタムボタンをクリックして、選択したテキストの後にアイコンを追加し、アイコンのハイパーリンクは選択したテキストをパラメータとするアドレスに行くことができるようにする必要があります。

アプローチ

1. CKeditorのpluginsフォルダに、新しいフォルダ "addmap"を作成します、名前はカスタマイズ可能です、この名前は私のプロジェクトで使用した名前です

2. addmapフォルダに、アイコンとして使用するGIF画像 "map.gif"を配置します。

3. addmapフォルダに、新しいplugin.js"を作成し、このjsファイルを編集してください。

(関数() {
    //セクション1：カスタムボタンが押されたときに実行されるコード
    var a = {
        exec: function(editor) {
        var data=""。 
        var mySelection = editor.getSelection();
        if (CKEDITOR.env.ie) {.
            mySelection.unlock(true)を実行します。
            data = mySelection.getNative().createRange().text;
        } else {
            data = mySelection.getNative()。
        }
        if(data!=null&&data!=''){。
            editor.insertHtml(data+') ') ;
        }
        }
    },
    b = 'addmap'とする。
    CKEDITOR.plugins.add(b、{)
        init: function(editor) {
            editor.addCommand(b, a)を実行します。
            editor.ui.addButton('addmap', {)
                label: 'add map link',
                icon: this.path + 'map.gif',
                コマンド：b
            });
        }
    });
})();

4. CKeditorのルート・ディレクトリに戻り、config.jsを編集します。

CKEDITOR.editorConfig = function( config )
{
// デフォルトの設定に対する変更点をここで定義します。
config.language = 'zh-cn';
//config.uiColor = '#AADC6E'。
//フォント
config.font_names = '宋体;普通体_GB2312;新宋体;黑体;隶書;幼圆;微雅黑;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana;';
//ツールボタン    
config.toolbar=
[
   ['ソース','-','プレビュー']。
   [切り取り」「コピー」「貼り付け」「貼り付けテキスト」「PasteFromWord」「-」「印刷」「リンク」「アンリンク」「アンカー」],
   [元に戻す」「やり直し」「-」「検索」「置換」「-」「SelectAll」「RemoveFormat」]。
   ['addmap']（アドマップ
];

config.extraPlugins = 'addmap'。

5. テスト