動作中のプラグインをダウンロード:
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'
});
}
});