Azexo Composer introduction

Description

Azexo Composer is JavaScript library for user friendly front-end content editing of HTML pages. It is based on jQuery, jQuery UI, Underscore and Bootstrap. The main difference from other solutions – Azexo Composer uses client JS for render of HTML to work faster and save server resources. It can be used for such tasks:

Azexo Composer is ready for making static landing pages by end users with default Bootstrap CSS (or you can use Bootswatch CSS or any custom Bootstrap theme). In this case Azexo Composer saves results of editing into server file system via PHP AJAX interface in shortcodes format (like WordPress).
Developers of HTML site templates can integrate Azexo Composer very easily, so their template will be ready for simple editing by the end users.
Azexo Composer is ready for creating static content AJAX sites. Content can be loaded (via AJAX) when it will appear in user viewport.
In same cases Azexo Composer can be used by graphic designers, who do not have CSS skills, for creating HTML site templates or sites for end users.

Description

Azexo Composer is WordPress plugin for user friendly front-end content editing of any type WordPress posts. It is based on jQuery, jQuery UI, Underscore and Bootstrap. The main difference from other solutions – Azexo Composer uses client JS for render of HTML to work faster and save server resources. It can be used for such tasks:

Azexo Composer is ready for making static landing pages by end users with default Bootstrap CSS (or you can use Bootswatch CSS or any custom Bootstrap theme).
Developers of WordPress themes can integrate Azexo Composer very easily, so their theme will be ready for simple editing by the end users.
Azexo Composer is ready for creating static content AJAX sites. Content can be loaded (via AJAX) when it will appear in user viewport.
In same cases Azexo Composer can be used by graphic designers, who do not have CSS skills, for creating WordPress sites for end users.

Description

Azexo Composer is Drupal module for user friendly front-end content editing. It is based on jQuery, jQuery UI, Underscore and Bootstrap. The main difference from other solutions – Azexo Composer uses client JS for render of HTML to work faster and save server resources. It can be used for such tasks:

Azexo Composer is ready for making static landing pages by end users with default Bootstrap CSS (or you can use Bootswatch CSS or any custom Bootstrap theme).
Developers of Drupal themes can integrate Azexo Composer very easily, so their theme will be ready for simple editing by the end users.
Azexo Composer is ready for creating static content AJAX sites. Content can be loaded (via AJAX) when it will appear in user viewport.
In same cases Azexo Composer can be used by graphic designers, who do not have CSS skills, for creating Drupal sites for end users.

Description

Azexo Composer is Joomla extension for user friendly front-end content editing. It is based on jQuery, jQuery UI, Underscore and Bootstrap. The main difference from other solutions – Azexo Composer uses client JS for render of HTML to work faster and save server resources. It can be used for such tasks:

Azexo Composer is ready for making static landing pages by end users with default Bootstrap CSS (or you can use Bootswatch CSS or any custom Bootstrap template).
Developers of Joomla templates can integrate Azexo Composer very easily, so their theme will be ready for simple editing by the end users.
Azexo Composer is ready for creating static content AJAX sites. Content can be loaded (via AJAX) when it will appear in user viewport.
In same cases Azexo Composer can be used by graphic designers, who do not have CSS skills, for creating Joomla sites for end users.

Installation

Download and include into your HTML page next files from appropriate libraries:
- bootstrap.min.css and bootstrap.min.js
- jquery.min.js
- jquery-ui.min.js
- underscore-min.js
- waypoints.min.js
Put azexo_composer folder into your site root.
Set Apache user and group (OS dependent) as owner to your site root folder recursively (CHOWN command).
Set 775 permissions to your site root folder recursively (CHMOD command).
Set 755 permissions to azexo_composer folder recursively (CHMOD command).
As result: Apache user must be able to create files and folders in site root, all HTML files which will be edited via Azexo Composer must be able to edit for Apache user, ajax.php in Azexo Composer folder must have 755 permissions (required by software like suEXEC).
Include into your HTML page azexo_param_types.min.js, azexo_elements.min.js and azexo_composer.min.js from azexo_composer folder – exactly in this order.
Include into your HTML page azexo_composer.css from azexo_composer folder.
Add line into HTML to load editor and renderer:
<div
class="az-container container"
data-az-type="default"
data-az-name="main"
></div>
Where data-az-name=”main” is unique name.
Open your page via HTTP browser and press CTRL+ALT – it will open login form. First login will create admin password. Next time this password will be used to restrict access to Azexo Composer editor.
Edit your page and save after.

Login

Press CTRL+ALT on keyboard open admin form. If you not logged in – this form show login form. If you was logged in – this form show Azexo Composer settings form, which contain:

Contact form email for form submissions notifications,
Recaptcha private key for form captcha spam protection,
Recaptcha public key for form captcha spam protection.

If azexo_settings.php not exist on server in site root directory then password which will be entered in login form will be saved as your admin password for Azexo Composer access.

Installation

Azexo Composer installation doesn’t differ from any other plugin installation process, so you might be familiar with this process already. If not, please follow instructions below.

Login to your website
Go to Plugins -> Add New
Click Upload link
Browse to the plugin’s zip file (it is located in the archive you’ve downloaded) and choose that file.
Click “Install Now” button
Wait while plugin is uploaded to your server
Click “Activate Plugin” button

If you logged in as administrator you can open any page, post or custom post in front end area – it will be editable.

Installation

Install and enable next list of Drupal modules: jquery_update, entity, linkit, views, file_entity.
Install and enable media module of version 7.x-2.0 or later.
If you theme support all CSS elements from Bootstrap 3 then disable internal Bootstrap with prefix here admin/config/content/azexo_composer.
For front-end editing:
1. Enable Azexo Composer field formatter for text field in Manage Display tab of a Content Type you need.
2. Give “Edit via azexo composer” permission to role you need.
3. Editor works via “View” tab of approriate content and approriate text field.
For back-end editing:
1. Enable Azexo Composer text format in “Edit” tab of approriate content and approriate text field.

Installation

Install and enable one of Joomla Bootstrap templates in “Site” location.
Install Azexo Composer extension.
Add users to “Editor” group who will be able edit via Azexo Composer.
Open article in “Site” location – it will be editable via Azexo Composer.

Using

Main pattern to work with Azexo Composer

After you open page with enabled Azexo Composer editor you should follow 5 main steps:

Choose element in which area you need to add new element.
Click on the “Add” button in controls of this element (this button will exist if element allow to add new elements).
Choose which element you need to add from elements list dialog and click on its icon.
Fill settings form if it necessary which opened for your new element and then save changes.
Drag and drop your element if it necessary.

After work is done – click on the “Save container” button to save page on the server.

Elements list dialog

Click on the “Add” button opened elements list dialog which contain 3 standard tabs:

Basic
CMS
Template-elements
Saved templates

Basic tab contain standard Azexo Composer elements. CMS tab contain elements provided by CMS if it available. Template-elements contain elements which generated based on templates placed in azexo_elements folder. Saved templates tab contain elements templates which was saved by click on the “Save as template” button from element controls.

Saved templates

Templates allows you to save predefined sets of elements as a template and then reuse it when you’ll need it next time. For save template you need to use “Save as template” button from element controls. For load template you need to choose it from “Saved templates” tab of the elements list dialog.

Element controls

Every Azexo Composer element have group of buttons placed in one of corner of element area. This buttons it is a complete list of possibilities for user to manipulate element content. Let’s describe all types of such buttons.

To show element controls related with current element one by one you need repeat right mouse click over this element.

Drag and drop element.

Add new element into current element area.

Open settings form to change element properties and set CSS styles and add CSS classes.

Paste elements into current element area from clipboard copied into it before.

Copy element or contained elements to clipboard.

Clone current element.

Delete current element

Save element or contained elements as template to template library.

Save to server all elements which placed in current container element.

Set row colums layout. Row columns are created by specifying the number of twelve available columns you wish to span. Rows can be divided into the layouts (eg. 1/2 + 1/2, 1/3 + 1/3 + 1/3, 1/2 + 1/4 + 1/4, and so on).

This button can be showed in element control buttons when it’s support sub-elements. In current Azexo Composer version there are 3 variants:

add new toggle element into accordion element
add new tab element into tabs element
add new slide element into carousel element
add new field element into form element

Hide or show element controls which contained in current container element.

Hide or show element animations which contained in current container element.

Element settings

Every element have settings form. This form have standard tabs:

General
Animation
Style
Hover style

In general tab you can find specific element settings. Animation tab contain settings to describe animation behaviour of current element. Style and hover style tabs contain settings for most used CSS styles. Hover style tab contain styles which apply when mouse is hovered over current element.

Element animations

Almost all elements can be animated when arised one of the four type of events: apear, mouse hover, mouse click or programmatical trigger. In mouse hover event element can be animated by two ways when mouse entered in some area and when leaved out.

More info about element settings you can find in fields descriptions appropriate settings form.

Integration

To integrate Azexo Composer into your HTML template you need:

Put containers in places of your pages where a user should edit content.
Override CSS of Bootstrap elements used in Azexo Composer.
Create template-elements in azexo_elements folder. Template-elements must be cuted HTML (from your template) with marked editable strings. Supported are next editors:
- [[string]] single line text editor
- {{string}} TinyMCE editor
- ((url)) image gallery select and upload
- <<url>> selector from site pages list

Updating

For update you need just copy with replace azexo_composer folder.

Examples of elements

Description

Azexo Composer is ready for making static landing pages by end users with default Bootstrap CSS (or you can use Bootswatch CSS or any custom Bootstrap theme). In this case Azexo Composer saves results of editing into server file system via PHP AJAX interface in shortcodes format (like WordPress).
Developers of HTML site templates can integrate Azexo Composer very easily, so their template will be ready for simple editing by the end users.
Azexo Composer is ready for creating static content AJAX sites. Content can be loaded (via AJAX) when it will appear in user viewport.
In same cases Azexo Composer can be used by graphic designers, who do not have CSS skills, for creating HTML site templates or sites for end users.

Description

Azexo Composer is ready for making static landing pages by end users with default Bootstrap CSS (or you can use Bootswatch CSS or any custom Bootstrap theme).
Developers of WordPress themes can integrate Azexo Composer very easily, so their theme will be ready for simple editing by the end users.
Azexo Composer is ready for creating static content AJAX sites. Content can be loaded (via AJAX) when it will appear in user viewport.
In same cases Azexo Composer can be used by graphic designers, who do not have CSS skills, for creating WordPress sites for end users.

Description

Azexo Composer is ready for making static landing pages by end users with default Bootstrap CSS (or you can use Bootswatch CSS or any custom Bootstrap theme).
Developers of Drupal themes can integrate Azexo Composer very easily, so their theme will be ready for simple editing by the end users.
Azexo Composer is ready for creating static content AJAX sites. Content can be loaded (via AJAX) when it will appear in user viewport.
In same cases Azexo Composer can be used by graphic designers, who do not have CSS skills, for creating Drupal sites for end users.

Description

Azexo Composer is ready for making static landing pages by end users with default Bootstrap CSS (or you can use Bootswatch CSS or any custom Bootstrap template).
Developers of Joomla templates can integrate Azexo Composer very easily, so their theme will be ready for simple editing by the end users.
Azexo Composer is ready for creating static content AJAX sites. Content can be loaded (via AJAX) when it will appear in user viewport.
In same cases Azexo Composer can be used by graphic designers, who do not have CSS skills, for creating Joomla sites for end users.

Installation

Download and include into your HTML page next files from appropriate libraries:
- bootstrap.min.css and bootstrap.min.js
- jquery.min.js
- jquery-ui.min.js
- underscore-min.js
- waypoints.min.js
Put azexo_composer folder into your site root.
Set Apache user and group (OS dependent) as owner to your site root folder recursively (CHOWN command).
Set 775 permissions to your site root folder recursively (CHMOD command).
Set 755 permissions to azexo_composer folder recursively (CHMOD command).
As result: Apache user must be able to create files and folders in site root, all HTML files which will be edited via Azexo Composer must be able to edit for Apache user, ajax.php in Azexo Composer folder must have 755 permissions (required by software like suEXEC).
Include into your HTML page azexo_param_types.min.js, azexo_elements.min.js and azexo_composer.min.js from azexo_composer folder – exactly in this order.
Include into your HTML page azexo_composer.css from azexo_composer folder.
Add line into HTML to load editor and renderer:
<div
class="az-container container"
data-az-type="default"
data-az-name="main"
></div>
Where data-az-name=”main” is unique name.
Open your page via HTTP browser and press CTRL+ALT – it will open login form. First login will create admin password. Next time this password will be used to restrict access to Azexo Composer editor.
Edit your page and save after.

Login

Press CTRL+ALT on keyboard open admin form. If you not logged in – this form show login form. If you was logged in – this form show Azexo Composer settings form, which contain:

Contact form email for form submissions notifications,
Recaptcha private key for form captcha spam protection,
Recaptcha public key for form captcha spam protection.

If azexo_settings.php not exist on server in site root directory then password which will be entered in login form will be saved as your admin password for Azexo Composer access.

Installation

Azexo Composer installation doesn’t differ from any other plugin installation process, so you might be familiar with this process already. If not, please follow instructions below.

Login to your website
Go to Plugins -> Add New
Click Upload link
Browse to the plugin’s zip file (it is located in the archive you’ve downloaded) and choose that file.
Click “Install Now” button
Wait while plugin is uploaded to your server
Click “Activate Plugin” button

If you logged in as administrator you can open any page, post or custom post in front end area – it will be editable.

Installation

Install and enable next list of Drupal modules: jquery_update, entity, linkit, views, file_entity.
Install and enable media module of version 7.x-2.0 or later.
If you theme support all CSS elements from Bootstrap 3 then disable internal Bootstrap with prefix here admin/config/content/azexo_composer.
For front-end editing:
1. Enable Azexo Composer field formatter for text field in Manage Display tab of a Content Type you need.
2. Give “Edit via azexo composer” permission to role you need.
3. Editor works via “View” tab of approriate content and approriate text field.
For back-end editing:
1. Enable Azexo Composer text format in “Edit” tab of approriate content and approriate text field.

Installation

Install and enable one of Joomla Bootstrap templates in “Site” location.
Install Azexo Composer extension.
Add users to “Editor” group who will be able edit via Azexo Composer.
Open article in “Site” location – it will be editable via Azexo Composer.

Using

Main pattern to work with Azexo Composer

After you open page with enabled Azexo Composer editor you should follow 5 main steps:

Choose element in which area you need to add new element.
Click on the “Add” button in controls of this element (this button will exist if element allow to add new elements).
Choose which element you need to add from elements list dialog and click on its icon.
Fill settings form if it necessary which opened for your new element and then save changes.
Drag and drop your element if it necessary.

After work is done – click on the “Save container” button to save page on the server.

Elements list dialog

Click on the “Add” button opened elements list dialog which contain 3 standard tabs:

Basic
CMS
Template-elements
Saved templates

Saved templates

Element controls

To show element controls related with current element one by one you need repeat right mouse click over this element.

Drag and drop element.

Add new element into current element area.

Open settings form to change element properties and set CSS styles and add CSS classes.

Paste elements into current element area from clipboard copied into it before.

Copy element or contained elements to clipboard.

Clone current element.

Delete current element

Save element or contained elements as template to template library.

Save to server all elements which placed in current container element.

This button can be showed in element control buttons when it’s support sub-elements. In current Azexo Composer version there are 3 variants:

add new toggle element into accordion element
add new tab element into tabs element
add new slide element into carousel element
add new field element into form element

Hide or show element controls which contained in current container element.

Hide or show element animations which contained in current container element.

Element settings

Every element have settings form. This form have standard tabs:

General
Animation
Style
Hover style

Element animations

More info about element settings you can find in fields descriptions appropriate settings form.

Integration

To integrate Azexo Composer into your HTML template you need:

Put containers in places of your pages where a user should edit content.
Override CSS of Bootstrap elements used in Azexo Composer.
Create template-elements in azexo_elements folder. Template-elements must be cuted HTML (from your template) with marked editable strings. Supported are next editors:
- [[string]] single line text editor
- {{string}} TinyMCE editor
- ((url)) image gallery select and upload
- <<url>> selector from site pages list

Updating

For update you need just copy with replace azexo_composer folder.