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:

<html>
<head>
<title>Writer</title>
<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>
<style>

.cke_contents {
height: 400px !important;
}

</style>
</head>
<body>


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


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


<script type="text/javascript">
//<![CDATA[




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


});




//]]>
</script>

</form>

</body>
</html>



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:

CKEDITOR.plugins.add('ajaxsave',
{
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
});

/*
editor.addCommand(pluginName, 
new CKEDITOR.dialogCommand(pluginName)

);
*/

editor.ui.addButton('Ajaxsave',
{
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 =
[
['NewPage','Preview'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Scayt'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
'/',
['Styles','Format'],
['Bold','Italic','Strike'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['Link','Unlink','Anchor','Ajaxsave'],
['Maximize','-','About']
];


config.extraPlugins = 'ajaxsave';

};

3 comments:

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

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

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

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

    ReplyDelete