Aloha Editor -- send content via ajax to a backend php script to save the data edited with Aloha Editor

readme.md

Save content to your backend

Requirements

Server with PHP5 support

How To

Place this folder somewhere into your web server document root (eg: http://localhost/aloha-demo)

Download the latest Aloha Editor release from http://aloha-editor.org

Unpack the archive and place it into this folder. Rename it from alohaeditor-0.20.x.zip to alohaeditor. Check if you have './alohaeditor/aloha/lib/aloha.js' available.

The data is stored into a SQLite database. Be sure your web server user has write access to this folder. It will create a db.sqlite file where your content is stored.

How it works

When opening page.php the script tries to find available content for this page in the database or shows an "Edit me" message.

Click to edit the text (where it glows yellow). When leaving the editable area the content will be saved via AJAX to the database (see aloha-save.js and save.php)

Editable Areas

To make parts of the website editable insert code like this:

The class "editable" tells Aloha Editor that this element is editable. You can define also an other name if you would like. The ID of the HTML element and the value for getAlohaContent() need to be the same.

For any further questions refer to the Aloha Editor guides: http://aloha-editor.org/guides/ or ask your question at https://getsatisfaction.com/aloha_editor

aloha-config.js

( function ( window, undefined ) {
	var Aloha = window.Aloha || ( window.Aloha = {} );
	
	Aloha.settings = {
		logLevels: { 'error': true, 'warn': true, 'info': true, 'debug': false, 'deprecated': true },
		errorhandling: false,
		ribbon: false,
		locale: 'en',
		floatingmenu: {
			width: 630,
			behaviour: 'topalign'
		},
		repositories: {
			linklist: {
				data: [
					{ name: 'Aloha Developers Wiki', url:'https://github.com/alohaeditor/Aloha-Editor/wiki', type:'website', weight: 0.50 },
					{ name: 'Aloha Editor - The HTML5 Editor', url:'http://aloha-editor.com', type:'website', weight: 0.90 },
					{ name: 'Aloha Demo', url:'http://www.aloha-editor.com/demos.html', type:'website', weight: 0.75 },
					{ name: 'Aloha Wordpress Demo', url:'http://www.aloha-editor.com/demos/wordpress-demo/index.html', type:'website', weight: 0.75 },
					{ name: 'Aloha Logo', url:'http://www.aloha-editor.com/images/aloha-editor-logo.png', type:'image', weight: 0.10 }
				]
			}
		},
		plugins: {
			format: {
				// all elements with no specific configuration get this configuration
				config: [  'b', 'i', 'p', 'sub', 'sup', 'del', 'title', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'removeFormat' ],
				editables: {
					// no formatting allowed for title
					'#top-text': []
				}
			}
		}
	};
} )( window );

aloha-save.js

Aloha.ready(function() {
	Aloha.require( ['aloha', 'aloha/jquery'], function( Aloha, jQuery) {
		
		// save all changes after leaving an editable
		Aloha.bind('aloha-editable-deactivated', function(){
			var content = Aloha.activeEditable.getContents();
			var contentId = Aloha.activeEditable.obj[0].id;
			var pageId = window.location.pathname;
			
			// textarea handling -- html id is "xy" and will be "xy-aloha" for the aloha editable
			if ( contentId.match(/-aloha$/gi) ) {
				contentId = contentId.replace( /-aloha/gi, '' );
			}

			var request = jQuery.ajax({
				url: "save.php",
				type: "POST",
				data: {
					content : content,
					contentId : contentId,
					pageId : pageId
				},
				dataType: "html"
			});

			request.done(function(msg) {
				jQuery("#log").html( msg ).show().delay(800).fadeOut();
			});

			request.error(function(jqXHR, textStatus) {
				alert( "Request failed: " + textStatus );
			});
		});
		
	});
});

db.sqlite

lib.php

<?php
$dbFile = 'db.sqlite';

createDatabase();

function createDatabase() {
	global $dbFile;

	// create table 'aloha' and insert sample data if SQLite dbFile does not exist
	if ( !file_exists($dbFile) ) {

		//error_log('SQLite Database does not exist: '.$dbFile."\n", 3, "aloha.log");

		try {
			$db = new SQLiteDatabase($dbFile, 0666, $error);

			$db->query("BEGIN;
				CREATE TABLE aloha (
					id INTEGER PRIMARY KEY,
					pageId CHAR(255),
					contentId CHAR(255),
					content TEXT
				);

				INSERT INTO aloha
					(id, pageId, contentId, content)
				VALUES
					(NULL, NULL, NULL, 'Click to edit');

				COMMIT;");

			//error_log('SQLite Database created: '.$dbFile."\n", 3, "aloha.log");
		} catch (Exception $e) {
			echo '<pre>';
			print_r($error);
			echo '</pre>';
			die();
		}
	}
}

function getAlohaContent($editableID) {
	global $dbFile;

	$error = false;
	$db = new SQLiteDatabase($dbFile, 0666, $error);
	$pageId = $_SERVER['SCRIPT_NAME'];

	$query = "SELECT * FROM aloha WHERE pageId = '".$pageId."' AND contentId = '".$editableID."';";

	$result = $db->query($query, $error);
	$row = array();

	$exists = false;
	if($result->valid()) {
		$exists = true;
		$row = $result->current();
	}

	if ( !empty($error) ) {
		//error_log('Error reading contents: '.print_r($error, true)."\n", 3, "aloha.log");
	} else {
		
		if ( array_key_exists('content', $row) ) {
			return $row['content'];
		} else {
			return 'Click to edit me.';
		}
	}	
}

?>

page.php

<?php 
	require_once 'lib.php';
?>
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en"> 
	<head>
		<title>Aloha Editor | Example how to save content</title>

		<!-- here we have our Aloha Editor config -->
		<script src="./aloha-config.js"></script>

		<script src="alohaeditor/aloha/lib/aloha.js" 
			data-aloha-plugins="common/format,
								common/table,
								common/list,
								common/link,
								common/highlighteditables,
								common/block,
								common/undo,
								common/contenthandler,
								common/paste,
								common/commands,
								common/abbr,
								common/image,
								extra/browser,
								extra/linkbrowser"></script>

		<link rel="stylesheet" href="alohaeditor/aloha/css/aloha.css" type="text/css">

		<!-- save the content of the page -->
		<script src="./aloha-save.js"></script>

		<script type="text/javascript">
			Aloha.ready( function() {
				var $ = Aloha.jQuery;
				// Make all elements with class=".editable" editable once Aloha is loaded and ready.
				$('.editable').aloha();
			});
		</script>

		<style>
			#headline {
				font-size: 1.3em;
			}
			#article {
				margin-top: 20px;
			}
			#log {
				border: 2px dashed green;
				margin: 5px auto 5px auto;
				padding: 5px;
				width: 75%;
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="log"></div>

		<h1>My Page</h1>
		<p>Click below to edit the text. When leaving editing mode (switch between editable areas or click outside an editable area) the content will be saved.</p>

		<div class="editable" id="headline"><?=getAlohaContent('headline')?></div>
		<div class="editable" id="article"><?=getAlohaContent('article')?></div>

		<h2>Textarea</h2>
		<textarea name="mytextarea" id="mytextarea" rows="10" class="editable"><?=getAlohaContent('mytextarea')?></textarea>
	</body>
</html>

save.php

<?php
require_once 'lib.php';

$db = new SQLiteDatabase($dbFile, 0666, $error);

// Save Data
$pageId = sqlite_escape_string($_REQUEST['pageId']);
$contentId = sqlite_escape_string($_REQUEST['contentId']);
$content =  sqlite_escape_string($_REQUEST['content']);

$query = "SELECT id FROM aloha 
			WHERE
				pageId = '".$pageId."'
				AND contentId = '".$contentId."';";

$result = $db->query($query, $error);

$exists = false;
if($result->valid()) {
	$exists = true;
    $row = $result->current();
}

if ($exists == true) {
	$query = "BEGIN;
		UPDATE aloha SET
			content = '".$content."'
		WHERE
			id = ".$row['id'].";
		COMMIT;";
} else {
	$query = "BEGIN;
		INSERT INTO aloha 
			(id, pageId, contentId, content)
		VALUES
			(NULL, '".$pageId."', '".$contentId."', '".$content."');
		COMMIT;";
}

$db->query($query, $error);

if ( empty($error) ) {
	echo 'Content saved.';
} else {
	echo 'Error: content not saved.';
	//error_log('Error: '.print_r($error, true)."\n", 3, "aloha.log");
}

?>