5

通常およびインライン編集モードで ckeditor に保存アイコンを表示する方法がわからない人に役立つかもしれないので、これを投稿します。シンプルな保存プラグインを探していましたが、ckeditor 4.2.1 で動作するプラグインが見つかりませんでした。自作することにしました。私の回答には、プラグインのコードと Google ドライブのダウンロード リンクがあります。このダウンロードには、保存アイコンとロード GIF アイコンが含まれています。

プラグインは、ツールバーに保存ボタンを追加します。このボタンをクリックすると、サーバーへの非同期投稿リクエストが開始されます。リクエスト中、保存ボタンにはアニメーション化された ajax ローダーが表示されます。

4

1 に答える 1

11

動作中のプラグインをダウンロード: https://docs.google.com/file/d/0B0dQ8h7Cze23cUJGb2dJM1h2LWM/edit?pli=1

このプラグインは jquery を使用していますが、純粋な JavaScript を使用して簡単に書き直すことができます。ckeditor を含める前に、必ず jquery をページに含めてください。

最初に config.js ファイルにプラグインを登録します(config.js ファイルの最後にこれらの行を追加するだけです)。

config.extraPlugins = 'savebtn';//savebtn is the plugin's name
config.saveSubmitURL = 'http://server/link/to/post/';//link to serverside script to handle the post

これで、プラグインを ckeditor に追加する準備が整いました。プラグインをダウンロードし (上記の Google ドライブのダウンロード リンクを参照)、ckeditors プラグイン フォルダーに zip ファイルを展開します。(ダウンロードには、使用されているアイコンと共に以下のスクリプトが含まれています)

それでおしまい。プラグインはすぐに動作するはずです!

参考までに、この回答の最後にソース (plugin.js) を含めました。何が起こっているのかわからない場合は、コメントを読むことをお勧めします。この回答のコード内のコメントは、実際のプラグイン ファイル内のコメントとは少し異なります。最新のコメントは、ここで見つけることができます。ビジネスロジックはまったく同じです。

plugin.js

CKEDITOR.plugins.add( 'savebtn', {
    icons: 'savebtn',
    init: function( editor ) {
        //add a new command to the editor. 
        //We give the command a name 'savecontent', 
        //so we can  reference it later. 
        editor.addCommand( 'savecontent', {
            //this is the business logic of our 'savecontent' command. 
            //this function gets executed when clicking the button.
            //you can change/replace the logic of this function  
            //according to your own needs.
            exec : function(editor){

                //get the text from ckeditor you want to save
                var data = editor.getData();

                //get the current url (optional)
                var page = document.URL;

                //path to the ajaxloader gif
                loading_icon=CKEDITOR.basePath+'plugins/savebtn/icons/loader.gif';

                //css style for setting the standard save icon. 
                //We need this when the request is completed.
                normal_icon=$('.cke_button__savebtn_icon').css('background-image');

                //replace the standard save icon with the ajaxloader icon. 
                //We do this with css.
                $('.cke_button__savebtn_icon').css("background-image", "url("+loading_icon+")");

                //Now we are ready to post to the server...
                $.ajax({
                    url: editor.config.saveSubmitURL,//the url to post at... configured in config.js
                    type: 'POST', 
                    data: {text: data, id: editor.name, page: page},//editor.name contains the id of the current editable html tag
                })
                .done(function(response) {
                    console.log("success");
                    alert('id: '+editor.name+' \nurl: '+page+' \ntext: '+data);

                })
                .fail(function() {
                    console.log("error");
                })
                .always(function() {
                    console.log("complete");
                    //set the button icon back to the original
                    $('.cke_button__savebtn_icon').css("background-image", normal_icon);
                });


            } 
    });


//add the save button to the toolbar. Mind that we declare command: 'savecontent'. 
//This way ckeditor knows what to do when clicking the button.

        editor.ui.addButton( 'savebtn', {
            label: 'Save',
            command: 'savecontent'
           // toolbar: 'insert'
        });


    }
});
于 2013-09-23T09:48:27.273 に答える