I had to integrate CKEditor into a site that I was building for a client. One of the requirements of this integration was to be able to edit the content as it was seen on the page. So, for example, if you are on the About Us page, you could click on an edit link on the bottom of the content column, and be able to edit it in place. Other than that requrement, the implementation was up to me to figure out.

After several hours of hacking out code, a lot of Google research and documentation reading, and some Stack Overflow questions, I was able to piece together a solution.

This solution requres jQuery (I built with v1.4.2), jQueryUI (v1.8.0+), and CKEditor (v3.2+).

[code lang=”js”]<script type="text/javascript">
var CONFIG_HREF_SITE = ‘http://websitebaseurl.com/’;

function redirect(url, outsite){
if(outsite){
location.href = url;
}else{
location.href = CONFIG_HREF_SITE + url;
}
}

function editdialog(editid){
var editwin = ‘<div><form action="formprocess/’+editid+’" method="post" class="inform"><div id="editorheader"><label for="coltitle">Column Title: </label><input type="text" name="coltitle" id="coltitle"></div><br><div id="editorcontent"><textarea id="ckeditcolcontent"></textarea></div><input type="hidden" value="edit"></form></div>’;
var $dialog = $(editwin).dialog({
autoOpen: false,
title: "Editor",
height: 520,
width: 640,
closeOnEscape: false,
open: function(event, ui){
$(this).parent().children().children(".ui-dialog-titlebar-close").hide();
},
buttons: {
"Save and Close": function(){
var editor = $("#ckeditcolcontent").ckeditorGet();
var coltitle = $("#coltitle").val();
var colcontent = $("#ckeditcolcontent").val();
$.post("formprocess/"+editid, {coltitle: coltitle, colcontent: colcontent}, function(data){
redirect(location.href, 1);
});
},
"Cancel": function(){redirect(location.href, 1);}
}
});

$.getJSON("ajax/" + editid, function(data){
$("#coltitle").attr("value", data.header);
$("#ckeditcolcontent").val(data.content).ckeditor(config);
$("<div></div>").addClass("ui-widget-overlay").appendTo(document.body).css({width:$(document).width(),height:$(document).height()});
$dialog.dialog("open");
});
}

var config = new Array();
config.height = "280px";
config.resize_enabled = false;
config.tabSpaces = 4;
config.toolbarCanCollapse = false;
config.toolbar_Full = [["Cut","Copy","Paste","-","Undo","Redo","-","Bold","Italic","Underline","Format", "-", "NumberedList","BulletedList","-","Link","Unlink","-","Image","Table"]];

$(function(){
$("a.admineditlink").click(function(){
config.width = "600px";
var editid = $(this).attr("href");
editdialog(editid);
return false;
});
});
</script>[/code]