Frontend Editing

Frontend Editing is a huge focus of the GCN JS Library. We tried to make it as easy as possible to have your editors editing contents from the frontend – so this is you guide to get you started.

1 Prerequisites & setting up your page

Some things need to be in place before you may start hacking away:

  • You need a Gentics Content.Node backend up and running with some data ready for editing
  • There should be a user who can access the pages you want to edit
  • You need to be able to connect to Gentics Content.Node from your page

We will start out with a very basic page, which has no funky layout yet, but already includes Aloha Editor, some plugins and stylesheets along with the GCN JS Library.


<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>Frontend Editing with GCN JS Library & Aloha Editor</title>
	<!-- load Aloha Editor styles ... --> 
	<link rel="stylesheet" href="http://aloha-editor.org/builds/development/latest/src/css/aloha.css" id="aloha-style-include" type="text/css">
	<!-- ... and Aloha Editor itself including some plugins -->
	<script type="text/javascript" src="http://aloha-editor.org/builds/development/latest/src/lib/aloha.js" data-aloha-plugins="common/format,common/table,common/list,common/link,common/highlighteditables,common/commands"></script>
	<!-- include the GCN JS Library --->
	<script type="text/javascript" src="http://cms.yourdomain.com/CNPortletapp/latest/gcnjslib/bin/gcnlib.js"></script>
	<!-- and this is where your code goes --->
	<script type="text/javascript">
	(function () {
		// use Aloha Editor's internal jQuery & expose it 
		window.$ = window.jQuery = window.Aloha.jQuery;
	}());
	</script>
</head>
<body>
	<h1 id="title">Basic Page</h1>
	<div id="content">Basic Page Content :)</div>
</body>

2 Implementing frontend editing

2.1 Authenticate with the backend

The first thing we want to do is to authenticate with the backend:


(function () {
	// use Aloha Editor's internal jQuery & expose it 
	window.$ = window.jQuery = window.Aloha.jQuery;
	
	// authenticate with the backend
	GCN.login('[username]', '[password]', function (success, data) {
		if (success) {
			// authentication successful
			alert('Hello, ' + data.user.firstName);
		} else {
			// error :(
			alert('Error during login.');
			return;
		}
	});
}());

Give this code a spin to see if authentication works for you.

In a production version of this code you want to use SSO or directly set a session id for the library, but to keep things simple we are using basic authentication with username and password for this example.

2.2 Fetch a page & start editing!

The next step is about fetching the page from the server and starting to edit contents.


(function () {
	// use Aloha Editor's internal jQuery & expose it 
	window.$ = window.jQuery = window.Aloha.jQuery;
	
	// authenticate with the backend
	GCN.login('[username]', '[password]', function (success, data) {
		if (success) {
			// load page with id 1 which is part of the demo package
			GCN.page(1, function (page) {
				// inside the page there is a tag namend "content"
				// which will contain all contents
				// using the .edit() method we will put those
				// contents into our <div id="content"> and
				// start editing with aloha right away! 
				page.tag('content').edit('#content');
			});
		} else {
			// error :(
			alert('Error during login.');
			return;
		}
	});
}());

Paste this code into your page and witness the glory of frontend editing!

2.3 Saving your changes

Frontend editing is fine but you also need to be able to save your changes. For this purpose we need to add a save button.


(function () {
	// use Aloha Editor's internal jQuery & expose it 
	window.$ = window.jQuery = window.Aloha.jQuery;
	
	// authenticate with the backend
	GCN.login('[username]', '[password]', function (success, data) {
		if (success) {
			// load page with id 1 which is part of the demo package
			GCN.page(1, function (page) {
				// inside the page there is a tag namend "content"
				// which will contain all contents
				// using the .edit() method we will put those
				// contents into our <div id="content"> and
				// start editing with aloha right away! 
				page.tag('content').edit('#content');
				
				// add a save button
				$('body')
					.append('<button id="save">save</button>')
					.find('#save')
					.click(function () {
						// save the page
						page.save();
					});
			});
		} else {
			// error :(
			alert('Error during login.');
			return;
		}
	});
}());

3 Complete example

Here’s the full example in case things got tedious on the way :)

Remember this is just a basic implementation of frontend editing to get you started on the topic. For your production environment you want to add error handling and SSO.


<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>Frontend Editing with GCN JS Library & Aloha Editor</title>
	<!-- load Aloha Editor styles ... --> 
	<link rel="stylesheet" href="http://aloha-editor.org/builds/development/latest/src/css/aloha.css" id="aloha-style-include" type="text/css">
	<!-- ... and Aloha Editor itself including some plugins -->
	<script type="text/javascript" src="http://aloha-editor.org/builds/development/latest/src/lib/aloha.js" data-aloha-plugins="common/format,common/table,common/list,common/link,common/highlighteditables,common/commands"></script>
	<!-- include the GCN JS Library --->
	<script type="text/javascript" src="http://cms.yourdomain.com/CNPortletapp/lib/gcnlib/current/gcnlib.js"></script>
	<!-- and this is where your code goes --->
	<script type="text/javascript">
	(function () {
		// use Aloha Editor's internal jQuery & expose it 
		window.$ = window.jQuery = window.Aloha.jQuery;
		
		// authenticate with the backend
		GCN.login('[username]', '[password]', function (success, data) {
			if (success) {
				// load page with id 1 which is part of the demo package
				GCN.page(1, function (page) {
					// inside the page there is a tag namend "content"
					// which will contain all contents
					// using the .edit() method we will put those
					// contents into our <div id="content"> and
					// start editing with aloha right away! 
					page.tag('content').edit('#content');
					
					// add a save button
					$('body')
						.append('<button id="save">save</button>')
						.find('#save')
						.click(function () {
							// save the page
							page.save();
						});
				});
			} else {
				// error :(
				alert('Error during login.');
				return;
			}
		});
	}());
	</script>
</head>
<body>
	<h1 id="title">Basic Page</h1>
	<div id="content">Basic Page Content :)</div>
</body>