Skip to main content

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';

};
Labels:

Comments

  1. JohnDubyaFebruary 22, 2011 at 4:21 PM

    This is exactly what I needed, thank you!

    ReplyDelete
  2. AnonymousMay 28, 2011 at 6:55 PM

    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. AnonymousMarch 10, 2014 at 10:03 AM

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

    ReplyDelete

Post a Comment

Popular posts from this blog

Part 3 - Integrating Tiles, Thymeleaf and Spring MVC 3

In this post I will demonstrate how to integrate Apache Tiles with Thymeleaf. This is very simple. The first step is to include the tiles and thymeleaf-tiles extension dependencies. I will include them in the pom.xml. Note we wil lbe using Tiles 2.2.2 Listing 1 - parent/pom.xml --- thymeleaf-tiles and tiles dependencies <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <!-- Tiles --> <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <dependency> <groupId>org.apache.tiles</groupId> <artifactId>tiles-core</artifactId> <version>${tiles.version}</version> <scope>compile</scope> </dependency> <dependency> <groupId>org.apache.tiles</groupId> <artifactId>tiles-template</artifactId> <version>${tiles.version}</version> <scope>compile</s...
5 comments
Read more

How to implement Cache Aside Pattern with Spring?

Problem You want to boost application performance by loading data from a cache and prevent the network trip to the persistent store (and also the query execution). This can be achieved by loading data from a cache. However, you want to load data on demand or lazily. Also, you want the application to control the cache data management – loading, eviction, and retrieval. Forces Improve performance by loading data from cache lazily. Application code controls cache data management. The underlying caching system does not provide read-through, write-through/write-behind strategies (strange really ??). Solution Use cache aside design pattern to solve the problems outlined above. This is also one of many caching patterns/strategies. I believe it is named in this because aside from managing the data store, application code is responsible for managing the cache also. Let's now try to understand how this caching technique works and then explore how it solves the proble...
Post a Comment
Read more