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").

view plain print about
1</script src="ckeditor/ckeditor.js"></script>
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.
view plain print about
1// We need to turn off the automatic editor creation first.
2CKEDITOR.disableAutoInline = true;
3var editor1 = CKEDITOR.inline( 'editable1' );
4var editor2 = CKEDITOR.inline( 'editable2' );
My editable divs were identifed like this:
view plain print about
1<div class="well" id="editable1" contenteditable="true">
2<cfinclude template="RotRugby1.cfm">
3</div>
4more code.....
5<div class="well" id="editable2" contenteditable="true">
6<cfinclude template="RotRugby2.cfm">
7</div>
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:

view plain print about
1<input onclick="publishRot();" type="button" value="AJAX Baby!">
And then the JQuery function, publishRot() called above, added to the <script> tag
view plain print about
1function publishRot() {
2    var RotStuff1 = document.getElementById( 'editable1' ).innerHTML = html = editor1.getData();
3    var RotStuff2 = document.getElementById( 'editable2' ).innerHTML = html = editor2.getData();
4    
5    $.post(    "rotrugbyaction.cfm",
6            {Rot1:RotStuff1,
7             Rot2:RotStuff2},
8            function(data) {
9                alert(data);
10            }
11    );
12}
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.

view plain print about
1<cfif StructKeyExists(form,"Rot1")>
2    <cfoutput>Latest News Updated!</cfoutput>
3    <cffile action="write" file="C:\ColdFusion10\cfusion\wwwroot\JoeTest\rotrugby1.cfm" output="#form.Rot1#"/>
4</cfif>
5<cfif StructKeyExists(form,"Rot2")>
6    <cfoutput>Bottom Part Updated!</cfoutput>
7    <cffile action="write" file="C:\ColdFusion10\cfusion\wwwroot\JoeTest\rotrugby2.cfm" output="#form.Rot2#"/>
8</cfif>

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.

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
You think you could give the entire source for your solution?
# Posted By Rob | 11/18/13 3:39 PM
Zipped files added as a download to the blog post! Should have everything you need. Just change the directory paths where needed, specifically for CFFILE.
# Posted By CF Joe | 11/29/13 6:10 PM
BlogCFC was created by Raymond Camden. This blog is running version 5.9.7. Contact Blog Owner