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").
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.
// We need to turn off the automatic editor creation first.
CKEDITOR.disableAutoInline = true;
var editor1 = CKEDITOR.inline( 'editable1' );
var editor2 = CKEDITOR.inline( 'editable2' );
My editable divs were identifed like this:
function publishRot() {
var RotStuff1 = document.getElementById( 'editable1' ).innerHTML = html = editor1.getData();
var RotStuff2 = document.getElementById( 'editable2' ).innerHTML = html = editor2.getData();
$.post( "rotrugbyaction.cfm",
{Rot1:RotStuff1,
Rot2:RotStuff2},
function(data) {
alert(data);
}
);
}
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.Latest News Updated! Bottom Part Updated! 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.