1. Viliam Segeda
  2. semanticeditor


Luke Plant  committed 053ca4c

Updated README to give overview of system.

  • Participants
  • Parent commits 30ba5a9
  • Branches default

Comments (0)

Files changed (1)


View file
  • Ignore whitespace
+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 requirements:
+HTML content is stored in the database something like:
+ <div class="row columns2">
+   <div class="column">
+     <h1 class="fancy">Heading</h1>
+     <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 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.
+Depending on the GUI for editing the presentation info, the user may have to
+press a 'refresh' button so that they can assign presentation info to newly
+entered paragraphs and headings etc.  Newly entered paragraphs and headings will
+obviously not have the 'id' attributes, so the HTML may have to be updated at
+this point as well, so everything has an id.
 WYMeditor extensions
     - the WYMeditor 'semantic' plugin javascript file can be added to Media
     - our editorwdiget.html template can be used.
-Column layouts
-Since you often need to know the number of columns, the system produces HTML
-like the following, for 2 columns in a row:
- div class=row2col
-   div class=col
-     ...one or more sections
-   div class=col
-     ...one or more sections
-For 3 columns in a row
- div class=row3col
-    ...etc
-Columns can be applied to sections at any heading level, but you can't nest
-columns within columns, and you can't "mix" the heading level the columns
-apply to *within* a row.  So you *can* have layouts at least as complex as
- H1 
-  H2 - new row (2 column row)     - NB col structure at H2 level
-  H2 (same col as above)
-  H2 - new col
-  H2 - new row (3 column row)
-  H2 - new col
-  H2 - new col
- H1 - new row (2 column row)      - NB col structure as H1 level
- H1 - new col
-But you can't have:
- H1 - new row
-  ... content ...
-  H2 - new col                   - this would be within the row started 
-                                   at the H1 level.
-The reason for this explained in the source code.  Users get helpful error
-messages if they try to ask for something impossible.