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:

<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


Post a Comment

Popular posts from this blog

Why do you need Spring Cloud Config server?

Last month I wrote a primer on concepts around 12 factor app. Before getting into the details of the Spring Cloud Config Server, I must refresh on the principle #3 from the list presented in that post.

3 – ConfigurationStore config in the environments
Configuration information must be separate from the source code. This may seem so obvious, but often we are guilty of leaving critical configuration parameters in the scattered in the code. Instead, applications should have environment specific configuration files. The sensitive information like database password or API key should be stored in these environment configuration files in encrypted format.
 The key takeaways from this postulate for a cloud-native microservices application are:
Do not store configuration as part of the deployable unit (in the case of lead microservice - inside the jar or war if you are still deploying war like the good old days). Instead, store it in an external location and make it easily accessible during run-…

Upgrading Lead Microservice - Use MariaDB and Flyway with Spring Boot

So far I have been using an in-memory H2 database or Mockito for testing the lead microservice. To make the transition towards using the Spring Cloud Config server, I need to upgrade the micro-application to use MariaDB. I will be adding the configuration in the application.yml  the file which in the subsequent post will move over to the config server store. I will also be using Flyway to make it easy to maintain the database schema changes in future. I will use this post to introduce Flyway in the mix. Spring Boot also provides first class integration with Flyway. I am using Flyway as its really quick and easy to get started, minimal learning curve (no DSL) and I am comfortable with it having used it in the past.


MariaDB 10 is installedBasic familiarity with FlywayHeidi SQL client is installed.
Step 1 - Update build.gradle to include the MariaDB JDBC and Flyway dependencies.
Do not forget to do a Gradle refresh on your IDE (I am using STS 3.8.4 on Java 8)

Step 2 - Rename the…

How to implement Cache Aside Pattern with Spring?

ProblemYou 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 problems.
ReadCache MissThe applic…