Saturday, June 26, 2010

CKEDITOR 3.x - Simplest Ajax Submit Plugin


I have assumed that you have downloaded and got started with CKEDITOR.

Step 1 – The html file is shown below:

<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

.cke_contents {
height: 400px !important;


<form action="sample_posteddata.php" method="post">

<textarea id="editor" > </textarea>

<script type="text/javascript">

CKEDITOR.replace( 'editor',
fullPage : true,
uiColor : '#9AB8F3',
toolbar : 'MyToolbar'





Note that the jquery js file is part of this html page.

Step 2: Create a folder called ‘ajaxsave’ under the plugin folder and save the plugin.js file in it. The source of this file is shown below:

init: function(editor)
var pluginName = 'ajaxsave';

editor.addCommand( pluginName,
exec : function( editor )
alert( "Executing a command for the editor name - " + editor.checkDirty() );

$.post("http://localhost:8080/test/TestServlet", { name: "John", time: "2pm" } );

alert('after ajax post');
canUndo : true

new CKEDITOR.dialogCommand(pluginName)


label: 'Save Ajax',
command: pluginName,
className : 'cke_button_save'


Thats all. You will now need to add this new button to the CKEDITOR toolbar. This is added in the config.js under ckeditor folder as shown below:

CKEDITOR.editorConfig = function( config )
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';

config.uiColor = '#AADC6E';
config.resize_enabled = false;

config.toolbar = 'MyToolbar';

config.toolbar_MyToolbar =

config.extraPlugins = 'ajaxsave';



  1. This is exactly what I needed, thank you!

  2. If you want to get the content of the textarea using its name then u need to add editor.updateElement();
    before the $.post.

    $.post("http://localhost:8080/test/TestServlet", { Newcontent: $("textarea[name=TextAreaName]") } );

  3. how will i read ckeditor content from my java bean? There is the problem