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';
};
This is exactly what I needed, thank you!
ReplyDeleteIf you want to get the content of the textarea using its name then u need to add editor.updateElement();
ReplyDeletebefore the $.post.
Example
editor.updateElement();
$.post("http://localhost:8080/test/TestServlet", { Newcontent: $("textarea[name=TextAreaName]") } );
how will i read ckeditor content from my java bean? There is the problem
ReplyDelete