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").
2CKEDITOR.disableAutoInline = true;
3var editor1 = CKEDITOR.inline( 'editable1' );
4var editor2 = CKEDITOR.inline( 'editable2' );
2<cfinclude template="RotRugby1.cfm">
3</div>
4more code.....
5<div class="well" id="editable2" contenteditable="true">
6<cfinclude template="RotRugby2.cfm">
7</div>
Now we need to add the code that pushes our code through AJAX for processing. First the button:
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}
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.
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.

