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 --> <script src="/[Proxy]/CNPortletapp/latest/alohaeditor-0.10/lib/aloha.js" data-aloha-plugins="extra/ribbon, common/format, common/highlighteditables, common/list, common/link, common/table, common/paste, common/contenthandler, common/commands, common/block, extra/browser, gcn/gcn-linkbrowser, gcn/gcn"></script> <!-- Load Aloha Editor CSS --> <link rel="stylesheet" href="/[Proxy]/CNPortletapp/latest/alohaeditor-0.10/css/aloha.css" /> <!-- 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>