06. CMS editor

How does CMS editor work?

CMS editor uses CMS_ classes for different modifications. Very important to know is that CMS editor saves the content as it is, as HTML. So each change of HTML in the widget declaration won't affect any used widget. Each modification of HTML source-code will affect rendering.

IMPORTANT: all below classes must be defined under <div id="CMS"> element because CMS editor takes the entire content from this element and store it in database.

CMS editor markup

CMS editor classes:

CMS_edit

The content will be editable in CMS editor. It works with most of elements like div, span, p, img, h1, h2, etc. and it supports editing of Font-Awesome.

CMS_remove

The element can be removed in CMS editor directly. Be careful because removed element can't be recovered.

CMS_unwrap

The element will be unwrapped when the body will be rendered on server-side. In other words the element will be removed and the content stays.

CMS_repeat

The element can be cloned. So user can clone the element with its content and each cloned element will contain CMS_remove class automatically.

CMS_widgets

CMS editor allows to add new widgets into this element. This element read data-cms-category="" attribute, read more below.

CMS_attribute

User can change basic attributes of this element (classes, styles, ID, etc). The element can contain data-cms-theme="" for choosing theme.

CMS_multiline

CMS editor allows a multiline for CMS_edit. Otherwise newline is disabled. Important note: different browsers can add different elements for adding new lines, e.g. div or p.

CMS_summary

The content of this element will be used as a summary in Page or Post. Summary can be used e.g. in some listing or in some search result. Please keep the one element with this class per content.

CMS_search

The content of each element with this attribute will be used for full-text search. You can use multiple elements with this class.

CMS editor attributes:

data-cms-category="CategoryA, CategoryN"

Optional, widget form shows the widgets within defined categories. Categories need to be typed with the full name of category.

data-cms-width="200px"

Optional, image width for the picture cropper and it works with element <img + class CMS_edit. Important: data-cms-width needs data-cms-height attribute.

data-cms-height="200px"

Optional, image height for the picture cropper and it works with element <img + class CMS_edit. Important: data-cms-height needs data-cms-width attribute.

data-cms-size="80%"

Optional. This attribute can be used for image galleries. The value needs to be entered in percentage and it means that system resizes an image about this percentage.

data-cms-theme="Red|red,Blue|blue,Green|green"

Optional, class themes name|class,name|class can be used with CMS_attribute.

Cases:

<!-- The text bellow can be modified and newline is blocked -->
<div class="CMS_edit">Lorem Ipsum</div>

<!-- The text bellow can be modified and newline is allowed -->
<div class="CMS_edit CMS_multiline">Lorem Ipsum</div>

<!-- The content bellow can be duplicated -->
<div class="CMS_repeat">
    <h2 class="CMS_edit">Lorem Ipsum</h2>
</div>

<div class="CMS_widgets">
    <!-- Here can be added widgets -->
</div>

<div class="CMS_widgets" data-cms-category="Content, Inline">
    <!-- Here can be added widgets from categories: Content and Inline -->
</div>

<!-- Theme can be changed in attributes settings -->
<div class="CMS_attribute class-red" data-cms-themes="Red|class-red,Green|class-green,Blue|class-blue">
    <div>NEXT CONTENT</div>
</div>

<!-- User can upload a picture with different size -->
<img src="base64:blabla" class="CMS_edit img-responsive" />

<!-- Editor shows a picture editor with the fixed width and height -->
<img src="base64:blabla" class="CMS_edit img-responsive" data-cms-width="600" data-cms-height="400" />

<!--
    Editor shows a picture editor with the fixed width and height,
    and it creates data-cms-original="" with the full path to large picture.
    <img src="" will contain a link to miniature with "?s=80%" argument.
-->
<img src="base64:blabla" class="CMS_edit img-responsive" data-cms-width="600" data-cms-height="400" data-cms-size="80%" />

<!-- "<span" with "CMS_unwrap" class will be unwrapped -->
<h1><i class="fa fa-home CMS_edit"></i><span class="CMS_unwrap CMS_edit">Title</span></h1>

<!-- Anchor without CMS_edit because the inner span is editable, and CMS editor tries to find links in DOM tree from it. -->
<a href="#"><i class="fa fa-envelope-open CMS_edit"></i><span class="CMS_unwrap CMS_edit">Contact Us</span></a>