Install the App?

Editing HTML content with CKEditor

CKEditor integrated to ZnetDK for Mobile
DESCRIPTION Here is an example of application that shows how to edit HTML content with the popular Javascript Editor CKEditor in version 5.

PREREQUISITE The ZnetDK for Mobile Starter Application is installed and configured (go to the Get Started page and follow the given procedure).

STEPS Five steps are required:
  • Step 1: Coding the view used to edit HTML content in Back Office,
  • Step 2: Coding the controller that stores and supplies the HTML content,
  • Step 3: Coding the view that displays the HTML content in Front Office,
  • Step 4: Loading the CKEditor JS library from CDN hosting,
  • Step 5: Adding a new item to the App's navigation menu.

DEMONSTRATION See live demo....

Step 1 - Coding the view backoffice.php

The view backoffice.php must be installed into the INSTALL_DIR/applications/default/app/view/ folder.
It embeds the editor used to edit HTML content.

  • The HTML element used as editor is a textarea field named my_content.
  • This editor is declared within a ZnetDK form that allows both to store (see data-zdk-submit attribute) and load (see data-zdk-load attribute) the data typed in the textarea field.
  • The form data is loaded via a call to the JS znetdkMobile.form.load() API method.
  • After the data is loaded into the textarea element, the CKEditor component is instantiated by calling the ClassicEditor.create() API method.
  • The position of the app footer is adjusted whenever text is changed in the HTML editor with the help of the znetdkMobile.footer.adjustPosition() API method.
  • By clicking on the Show content button, the view named frontoffice is displayed using the znetdkMobile.content.displayView() API method.

View backoffice.php

<div class="w3-content w3-margin-top">
    <form id="my-content-form" data-zdk-load="backofficectrl:get" data-zdk-submit="backofficectrl:save">
        <textarea name="my_content"></textarea>
        <button class="w3-button w3-green w3-margin-top" type="submit"><i class="fa fa-save"></i> Save</button>
        <button class="w3-button w3-theme-action w3-margin-top show" type="button"><i class="fa fa-eye"></i> Show content</button>
    </form>
</div>
<script>
console.log('backoffice.php');
// The ZnetDK form is instantiated and form content loaded
var myForm = znetdkMobile.form.make('#my-content-form');
myForm.load(null, function(){
    // CKEditor is instantiated
    var ckeditor = document.querySelector('#my-content-form textarea[name=my_content]');
    ClassicEditor.create(ckeditor, {
        toolbar: ['heading', 'bold', 'italic', 'undo', 'redo']    
    }).then( newEditor => {
        newEditor.model.document.on('change:data', () => {
            // App's footer is adjusted
            znetdkMobile.footer.adjustPosition();
        });
    })
    .catch( error => {
        console.error( error );
    });    
});
// On click events of the Show content button
$('#my-content-form button.show').on('click', function(){
    znetdkMobile.content.displayView('frontoffice');
});
</script>
HTM5 JS

Step 2 - Coding the controller backofficectrl.php

The controller backofficectrl.php must be installed into the INSTALL_DIR/applications/default/app/controller/ folder.

  • The action_get() method is called by both the backoffice and frontoffice views. It returns the text in HTML format typed in the editor.
    The data is read from the user's session if it exists through the \UserSession::getCustomValue() method. Otherwise, a default text is returned.
    In a real world application, the data would instead be read from a database via the \DAO API.
  • The action_submit method is called by backoffice view to store in session the formated text typed in the HTML editor.
    The data is stored in the user's session by calling the \UserSession::setCustomValue() method.
    As said before, a better solution would be to store the HTML text in a database via the \DAO API.

Controller backofficectrl.php

<?php
namespace app\controller;

class BackOfficeCtrl extends \AppController {

    static private $allowedTags = '<strong><i><br><p><h2><h3><h4>';
    static private $contentSessionKey = 'z4mdemo-editor-content';

    static protected function action_get() {
        $response = new \Response();
        $myContent = '<p>Type here <strong>the content</strong> to publish in <em>Front office</em>...</p>';
        $contentInSession = \UserSession::getCustomValue(self::$contentSessionKey);
        if (!is_null($contentInSession)) {
            $myContent = strip_tags(html_entity_decode($contentInSession), self::$allowedTags);
        }
        $response->my_content = $myContent;
        return $response;
    }

    static protected function action_save() {
        $request = new \Request();
        \UserSession::setCustomValue(self::$contentSessionKey, htmlentities($_REQUEST['my_content']));
        $response = new \Response();
        $response->setSuccessMessage(NULL, 'Content saved');
        return $response;
    }

}
PHP

Step 3 - Coding the view frontoffice.php

The view frontoffice.php must be installed into the INSTALL_DIR/applications/default/app/view/ folder.

View frontoffice.php

<?php $contentObj = \app\controller\BackOfficeCtrl::doAction('get'); ?>
<div class="zdk-viewreload"><?php echo $contentObj->my_content; ?></div>
<script>
znetdkMobile.action.addCustomButton('editcontent', 'fa-pencil', 'w3-blue');
znetdkMobile.action.registerView('frontoffice', {
    editcontent: {
        isVisible: true,
        callback: function () {
            znetdkMobile.content.displayView('backoffice');
        }
    }
});
</script>
PHP HTM5 JS

Step 4 - Loading the CKEditor JS library

The CKEditor library is automatically loaded by specifying into the config.php of the Web App, the matching url on the CDN hosting (see Settings | App extra CSS and JS libraries).

The config.php script is located into the INSTALL_DIR/applications/default/app/ folder.

The line below can be inserted anywhere in the config.php script.

Script config.php

define('CFG_APP_JS', 'https://cdn.ckeditor.com/ckeditor5/25.0.0/classic/ckeditor.js');
PHP

Step 5 - Adding "Edit content" and "Show content" items to the navigation menu

Finally, to give users access to the backoffice.php and frontoffice.php views, the menu's items are declared into the menu.php script of the Web App (see Get Started | New menu items for more information).

The menu.php script is located into the INSTALL_DIR/applications/default/app/ folder.

Script menu.php

static public function initAppMenuItems() {
    
    // ... Here, some menu items...
    
    \MenuManager::addMenuItem(NULL, 'backoffice', 'Edit content', 'fa-code');
    \MenuManager::addMenuItem(NULL, 'frontoffice', 'Show content', 'fa-eye');
    
    // ... Here, other menu items...
    
}
PHP

Search

Sort order