# Semantic Editor

Semantic editor is a Django CMS plugin for text editing. It allows you to edit the content of a page in a semantic way, and then assign presentation and layout details to each section of the text. It supports complex column layouts using a simple set of controls (new row, new column).

CSS classes are stored in the database, and can be limited to certain elements (p, ul, li etc) and to certain templates.

This project is used as part of Arkestra by Cardiff University School of Medicine, who conceived of the system.

Screen shots can be found at https://bitbucket.org/spookylukey/semanticeditor/wiki/Home

## Installation

See the installation instructions in INSTALL.rst

## Overview

The aim is to have an editor in which content is edited semantically, and both column layout and styling are applied separately. However, in the database only the combined HTML is stored. So, we have the following situation:

HTML content is stored in the database something like:

<div class="row columns2">
<div class="column">
<p class="note bordered">Some text</p>
</div>
<div class="column">
<p>Some more text</p>
</div>
</div>


This is loaded into a custom editor in the browser which then immediately does some AJAX calls to the server to decompose it into simplified HTML:

<h1 id="h1_1">Heading</h1>
<p id="p_1">Some text</p>
<p id='p_2'>Some more text</p>


and an array of objects specifying presentation e.g.:

[
{'h1_1': ['fancy']},                # styles for the H1
{'p_1':  ['note', 'bordered']},     # styles for the P
{'newrow_h1_1': 'newrow' },         # specifies row before h1_1
{'newrow_p_2': 'newcolum' },
]


These two parts are then edited separately, i.e. the user does not see the combined HTML while editing. Before saving to the database, the editor does an AJAX call to combine the two parts. Note the use of the 'id' attributes are added to help identify what the styling information belongs to -- these will be removed before saving in the database.

## WYMeditor extensions

The Semantic Editor application provides its own version of WYMeditor. This is derived from the skins/templates found in django-cms2, with the following customisations:

• name of the skin changed from 'django' to 'semanticeditor'. This is necessary if we are to allow two different versions of WYMeditor on the same page, one using the normal WYMeditor + CMS controls, another with the full 'semantic editor' controls, for longer pieces of content.
• The skin.js file removes the 'classes' panel, since this is not needed and is replaced by dynamic elements.