Frontend Editing

Gentics Content.Node offers a new Gentics Content.Node JavaScript API (GCN JS API) for editing content pages also directly in the portal. This functionality is included in the demo portal.

Warning – Frontend Editing is a bit of work to install it the first time. :) But it’s worth the time.

1 Gentics Content.Node JS API

Find out more about the awesome API

2 Functionality in demo portal

These functionalities are implemented in the current demo example:

  • Present EDIT and NEW link for editing pages or creating new pages
  • Check editing permissions for this folder
  • Display ID of page and folder name of page edited
  • Use language code in case of creating a new page
  • After publishing you have to clear the cache in the Gentics Content Connector.

In case you use FSCR, you can not use the instant publishing feature.

3 Configuration of Frontend Editing

3.1 How to make a tagtype editable in frontend (=portal)

If you use this implementation here, you can define each tagtype in the CMS templates which should be editable in frontend. This enables you to select which tagtypes to choose.

Example of editable tagtype, add id=“<feedit_name of tagtype>”, data-edit=“true”, data-tagname=“<name of tagtype>”: <h1 class=“page-title”><div id=“feedit_title” data-edit=“true” data-tagname=“title” class=“nobreak”><node title></div></h1>

3.2 CMS authentication module

You need a page where you place the UserLogin Widget and maybe the Password-Forgotten-Widget. So your users can log into the portal. Do not forget to create a user in your user administration. Create a new profile element with a keyword named cmseditor with can be set to 1 or 0. This will define whether your user should be able to edit a page or not (cms editor yes / no).

For your user administration you need the main layout incl. all CSS & JS files for main layout configured in your portal (gportal.php), examples and all JS & CSS files for administration are placed in your example folder.

So on the CMS server you have to place the files backend.php, db.php, encryption.php and you have to configure backend.php and maybe db.php.

Place this script on your CMS server in /Node/apache/htdocs/ named backend.php

You can find this script in <portal>/scripts/examples/cms_sso/.

Code of encryption_class.php can also be found there and must be placed on your CMS server (including db.php for handling database connections)

You also have to configure the CMS authentication module in Gentics Portal.Node PHP.

<?php $this→widget(‘cmsuserauthentication.widgets.CmsuserauthenticationWidget’); ?>

        // cms user authentication module
        'cmsuserauthentication' => array(
            'class' => 'common.modules.cmsuserauthentication.CmsuserauthenticationModule',
            'authUrl' => 'http://cms.<domain of CMS>/CNPortletapp/rest/auth/login', //'http://'.$_SERVER['HTTP_HOST'].'/gcnproxy/CNPortletapp/rest/auth/login',
            // this key is used to encrypt passwords for cms
            'salt_secretkey' => 'xxxsecretxxx',
            'username_sessionattr' => 'email',
            // this script must be placed on your CMS server 
            'cmsBackendUrl' => 'http://cms.<domain of CMS>/backend.php'

All CMS users which have to have access via frontend editing have to get a password md5-encrypted out of salt-secretkey and username. Code: $password = md5($this→salt_secretkey.$username);

For security reasons it is absolutely necessary to change the salt_secretkey in your implementation. Do not use the same key as in demo!

Place this script on your CMS server in /Node/apache/htdocs/ named backend.php

You need a HTTP proxy configured on your portal frontend (an example is in the examples/www folder named gcnproxy). You need this because all CMS-libraries can be loaded directly from the CMS because of security reasons (cross-domain). See more below.

Please not forget to configure a unique salt_secretkey in your portal configuration for password encryption. Then configure the crypt_secretkey parameter in your portal configuration for general encryption of the communication between the portal and the CMS. This crypt_secretkey must also be defined in the file backend.php on the CMS server (same key)!

After you enabled Frontend Editing and Single-Sign-On to your CMS-Backend, cms editors and administrators can not directly access the CMS via the CMS login. If you want to disable it or insert a JavaScript-redirect to your portal login, then please add a HTML snipplet to your CMS server in /Node/node/customer/

In this snipplet you can integrate the redirect, so your cms editors are redirected to your portal login instead your CMS login.

echo "<br><br><br><center>";
echo "</center>";

3.3 CMS content element for Frontend Editing

The code for your Frontend Editing tagtype which must be included in your CMS pages at the head can be found in the examples-section. You can always get an up-to-date content element in the DEMO CMS. There is a cache clearing implemented after finishing the publish process, which redirects to the same page you edited and adds the GET-parameter ?liveUrl?refresh=true.

It is important to deactivate the “redirect_check_referer” feature in CMS. If this feature is not disabled, the portal can not find the latest version of Aloha Editor. Also activate the feature $FEATURE[“live_urls”], and make sure, the Node’s hostname is set correctly.

3.4 This is the code for FEEdit.js

Can be found in examples section – must be included in pages before the Frontend Editing tagtype.

4 HTTP Proxy

4.1 Aloha Editor – Frontend Editing

To request the Aloha Editor libraries from the CMS server (with probably a different domain) via Ajax, you have to use this proxy, so your requests look like local portal requests, i.e. http://www.<portal>.com/gcnproxy/.Node/lib/aloha.js

Additionally you need the proxy on the CMS server for requesting the previews of modules as local requests on the CMS server.

Create a directory in <portal>/frontend/www/, name it for example /gcnproxy/ and put the following 4 files in it.

4.2 Proxy files

We added a HTTP proxy to the examples, but we can not garantuee 100% functionality. This proxy did a good job for us, but it’s not our product.

Also think about the security issues. A proxy is also a back-door to a backend system, in case your CMS is inside your firewall, you open a door for a potential intruder. So please use it with care and ask your system administrators for advice to use it for good.

Find this example in scripts/examples/www/gcnproxy

.htaccess – redirects all path after gcnproxy to proxy … /gcnproxy/.Node/?do=100 index.php – proxy script – part of proxy script settings.conf.php – settings file of proxy script

Create a directory in /frontend/www/, name it for example /gcnproxy/ and put the files in it.