CKEditor Inline Editing on Coldfusion using AJAX and JQuery

Implementing CKEditor Inline Editing on Coldfusion using AJAX and JQuery

Everyone says it's easy to get CKEditor running on ColdFusion, but there are no working examples available. Here is a tutorial and example on how you can perform inline editing within CKEditor and use AJAX to submit to ColdFusion processing.

In this example my editable page is Bootswatch styled. Looking at the provided CKEditor documentation under Samples > Inline Editing by Code, I pulled out just what I needed. It really helps to look at the View Source code of the documentation. What is needed first is the JavaScript call for CKEditor. I placed this at the bottom of my page (under "Le Javascript").

Next since I wanted 2 editable sections, each had to have its own ID, editable1 and editable2, and be referenced in the JS. We had to turn off "edit everything" mode and select just the DIVs (by Id) we want to make editable. My editable divs were identifed like this: Note the contenteditable="true". Without this nothing happens, CKEditor will not know to edit this div. Also I cfinclude'd the editable portions of the code. This will make more sense when we look at the processing end.

Now we need to add the code that pushes our code through AJAX for processing. First the button:

And then the JQuery function, publishRot() called above, added to the <script> tag Walking through the code we set the variable RotStuff1 calling the editable1 ID. This little bit was stripped out of the CKEditor Examples > Create and destroy editor instances for AJAX applications (view source!).

The JQuery AJAX $.post() method, the URL is placed first. Following are the data we want passed, RotStuff1 and RotStuff2, our edited divs as Rot1 and Rot2 respectively. And the function, which is designed to simply display a pop up with data passed back from our AJAX request.

Let's look at where we are passing the AJAX request, to rotrugbyaction.cfm and what we are doing with it.

What is important to note here is that the AJAX data is passed as FORM variables. We test the form scope for existence of the expected fields, Rot1 and Rot2 with StructKeyExists().

I chose to use <cffile> to write the the edited data to an actual CF template, rotrugby1.cfm and rotrugby2.cfm. This is why I used the <cfinclude> for the editable fields.

The <cfoutput> is the message or data gets passed back to the requesting template. This message will show up in the pop up.

Just go back and refresh your page to see you newly edited divs!

I did try using a window.location.reload(); to refresh the page automatically, but the page would refresh before the pop up could be displayed or read. The user would then not know if any action had taken place.

In summary:
I used the inline CKEditor, disabled AutoInline Editor, made the DIVs editable with their Id's in the JS and in the DIV with contenteditable="true". I utilized the JQuery AJAX post() method, setting the variables to grab the edited DIV's by Id, and used the button's onclick attribute to call the whole function. From there, it is passed to the processing CF template. The CF processing template uses <cffile> to write the edits to another template and send a success message back via AJAX. The original template uses <cfinclude> to call the edited templates.