@Daryl While I write up the code in a proper tutorial...here are the "magic components" in getting Inline Editing without PowerCMS:
On the page you wish to apply the Inline feature create a php function that pulls in the element (this saves on having multiple recordsets due to having many elements on the page that are editable) Here is an example that I had adapted to also checks the php filename and uses that to filter.
<?php require_once('Connections/jpackerdb.php'); ?>
<?php
function getCMSByElement($db,$connection,$element) {
$basefile = basename ( $_SERVER['PHP_SELF'] );
mysql_select_db($db, $connection);
$query_rsCMS = "SELECT CMSContent FROM cms WHERE CMSLocale = '$basefile' AND CMSElement = '$element'";
$rsCMS = mysql_query($query_rsCMS, $connection);
$row_rsCMS = mysql_fetch_assoc($rsCMS);
mysql_free_result($rsCMS);
return $row_rsCMS["CMSContent"];
}
?>
2. Next where you want to apply the inline editing to (in my example a H1 tag I used for the heading for my page:
<h1 contenteditable="true" rel="Header"><?php echo getCMSByElement($database_jpackerdb, $jpackerdb,'Header'); ?></h1>
3. then call the ckeditor.js file:
<script src="js/ckeditor/ckeditor.js"></script>
4. then the actual javascript that includes AJAX which will then pass on an update.php file (the update.php just consides of a webassist update record behaviour and I use <?php echo ($_POST["CMSElement"]); ?> for the value.
<script type="text/javascript">
if (window.CKEDITOR) {
CKEDITOR.on("instanceCreated", function (event) {
var editor = event.editor
var element = editor.element;
var contentID = element.getAttribute("rel");
var toolbar = element.getAttribute("toolbar");
if ( element.is( 'h1', 'h2', 'h3' ) || element.getAttribute( 'id' ) == 'taglist' ) {
editor.config.toolbar = [
["Bold","Italic","Underline","Strike", "Link"]
];
}
editor.on("blur", function() {
if (this.checkDirty()) {
if (confirm("Save Changes?")) {
this.resetDirty();
var params = {
CMSElement: contentID,
body_text: this.getData()
};
$.ajax({
url: 'cms-update.php',
global: false,
type: "POST",
dataType: "text json",
data: params
});
} else {
element.innerHTML = this.oldEditorData;
}
}
});
editor.on("focus", function() {
this.resetDirty();
this.oldEditorData = this.getData();
});
});
}
</script>
Chris