HTML Editor: User Interface to hold formatted text, images and tables
The Orixa Framework contains a mechanism to enable users to write and store html-formatted text. This feature can be added to any suitable field in the database by adding a "decoration" to the data-table.
Once this is done, the user will be able to use all the features detailed below.
Formatting options
If HTML is loaded by the programmer, the Editor will show almost any HTML styling. This means that for "readonly" functionality, the HTML Editor can be used to show users any saved HTML files, with virtually any formatting.
When writing HTML, the HTML Editor intentionally has more limited capabilities. The goal is to provide a mechanism for users to enter data, and for this data to be consistently styled, so that all readers across a whole organistion can read it and see the same layout and formatting. It is possible to change any selected text a wide range of styles, but this form of formatting is descouraged by design.
To this end the HTML Editor does not contain "swiss army knife" formatting options (as seen in Microsoft Word or other word processing applications) allowing free formatting of fonts and styles. Instead a small number of fixed styles are provided, and the user is asked to try to slot their writing into the "house style".
How formatting is stored
Orixa ships with two "inbuilt" styles the "Light" and "Dark" styles. It is possible to simply use these styles without making any changes.
If Developers wish to override these styles, the process is technical, but not complex. They must write a "CSS Style Sheet", and store it in the ConfigurationSettings data-table of the Orixa SystemDB database.
A SystemDB record storing a suitable styles sheet would be created by running the following SQL:
INSERT INTO SystemDB.ConfigurationSettings
SectionName = 'Globals',
ElementName = 'HTMLStyleSheetDark'
Value = ' <!-- NAME OF THEME: -->
<style>
<!-- add contents of CSS Style here
--!>'
Replace "HTMLStyleSheetDark" in the above with "HTMLStyleSheet" for the "light" theme. An example of a fully style sheet is added at the bottom of this document for reference.
There is also an option to edit and change the style-sheet within the Editor, provided that the user has an adequate Security Level.
Features of the HTML Editor
The HTML editor has been built to follow widely used norms for text editing, so widely used short-cuts for actions such as bold, italic, underlined text, cutting, copying pasting etc., are all followed. It is also possible to paste image data into the editor directly from the clip-board, but this is discouraged due to the fact that the resulting image data can be very data-intensive.
HTML Editor Context Menu |
Context Menu Images and Links to other HelpItems can be added by right-clicking in the Editor and selecting one of the "Add Image"(1) or "Add Link" (2) options. Note that the menu also includes an option to "Add Row" and "Delete Row" if the user activates the menu whilst within a table, such as this one. Other options from the context menu are mostly self explanitory. the "Add image from Images data-table" , "Add Link" and "Insert table into document" options are explaned below
|
| Text Format context Menu | Selected Text Context Menu If some section of text is selected and the user right-clicks on it, a context menu will appear allowing the user to set the style if the selected text. The icons on this menu are the same as those used in other word-processing programmes, and so should be familiar to most users. |
| The Images Edit Form | Add Image from Images data-table
Using Images Orixa has a wide range of optimizations built into the "Images" data-table, meaning that data-usage is optimized. While it is possible to "Paste" graphic data directly into the HTML Editor from the clip-board, the user is discouraged from doing this. Adding the image to the Images database first, and then using the data stored here is a much more effective method of including images in your App. |
HTML Editor Add Link |
Add Link When you use the "Add Link at the Cursor" option, a small window opens as shown in the image.
|
| Add Table to HTML Editor | Add Table Form Once the user clicks "Insert Table into document", the form shown on the left will open. The form is quite self-explanitory. Setting the different values will change how the table appears in the document.
|
| Insert Row into HTML table | Adding and deleting rows and columns to an existing table. There are 2 ways to add rows and columns to an existing table. If the user hovers their mouse over the junction between rows (as shown in the image at 1.) a "+" will appear. Clicking on this will add a row, or column. Alternatively, they can select "Insert Table Row" or "Insert Table Column" from the context menu. Rows and columns can be deleted by selecting "Delete Table Column" from the context menu. |
Example CSS Style Sheet
< !-- STANDARD THEME -->
<style>
@font-face
{font-family:Wingdings;
panose-1:5 0 0 0 0 0 0 0 0 0;}
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family: "Calibri";
panose-1:2 15 5 2 2 2 4 3 2 4;}
* {font-family: Tahoma;
max-width: 800px;
line-height: 140%;
font-size: 12px;
max-width: 800px;
margin-left: 12px;
margin-bottom: 8px;
margin-top: 0px;
margin-right:
}
.imgCaption
{text-align: center;
font-weight: bold;
margin-bottom: 12px;
font-size: 11px;
max-width: 740px}
.twoColTable {
border-collapse: collapse;
margin-top: 24px;
border: none;
border-collapse: collapse;
width 80%;
}
.twoColTable th {
font-weight: bold;
color: #F1D1B1;
background-color: #664422;
width: 50%;
padding: 6px;
vertical-align: bottom;
max-width: 350px;
}
.twoColTable td {
width: 50%;
padding: 6px;
vertical-align: top;
max-width: 350px;
border-top: 6px solid #664422;
}
'
.twoColTable tr
{background-color: #F1D1B1;
}
'
b {padding: 0px;
margin: 0px;}
'
.tip {color: #FFFFFF;
font-size: 12px;
font-weight: bold;
max-width: 75%;
border-radius: 8px;
background-color: #664422;
padding: 12px;
margin-left: 8%
margin-top: 40px;
margin-bottom: 20px;
}
h1 {color: #FFFFFF;
font-size: 20px;
font-weight: bold;
max-width: 800px;
border-top-right-radius: 20px;
background-color: #664422;
padding: 6px;
margin-left: 0px;
margin-right: 0px;
margin-top: 40px;
} ' + #13;
rsStyleSheetStandard2 =h2 {color: #664422;
font-size: 18px;
font-weight: bold;
max-width: 800px;
border-top-right-radius: 20px;
margin-top: 12px;
margin-bottom: 3px;
}
h3 { color: #553311;
font-size: 14px;
font-weight: bold;
padding-top: 6px;
padding-bottom: 3px;
margin-top: 12px;
margin-bottom: 3px;
}
h4 {margin: 6px;
font-size: 14px;
font-weight: bold;
color: #553311;
padding: 4px;
padding-right: 10%;
margin-left: 20px;
margin-bottom: 6px;
display: block;
border-left: solid 8px #664422;
}
'
h4 b {font-size: 14px;
margin: 0px;
padding: 0px;
color: #000000;}
'
h4 a {font-size: 14px;
margin: 0px;
padding: 0px;
color: #0000FF;}
'
h4 a:hover
{font-size: 14px;
padding: 0px;
font-weight: bold;
color: #0000FF;}
'
ul {list-style-type: square;
padding: 4px;
background-color: #F1D1B1;
display: block;
border-left: solid 8px #AA9977;
padding-right: 10%;
margin-left: 20px;
margin-bottom: 3px;
}
hr {padding: 6px;
border: 4px solid #AA9977;
border-radius: 2px;
height: 1px;}
'
li {max-width: 85%;
background-color: #F1D1B1;
border-left: solid 8px #F1D1B1;
}
'
ol {padding-left: 20px;
padding-top: 4px;
padding-bottom: 4px;
padding-right: 10%;
background-color: #F1D1B1;
display: block;
border-left: solid 8px #AA9977;
margin-left: 20px;
margin-bottom: 3px;
max-width: 85%;
}
'
img {border-radius: 8px;
margin-left: 12px;
margin-right: 12px;
margin-top: 12px;
margin-bottom: 2px;
width: 100%;
max-width: 760px;
}
'
.TwoColTable img
{border-radius: 8px;
margin-top: 0px;
margin-left: 2px;
margin-right: 2px;
margin-bottom: 2px;
width: 100%;
max-width: 380px;
}
'
.SQLScript
{ font-family: Courier New;'
font-weight: 13px;'
color: #000000;'
background-color: #F1D1B1;'
}
a:hover
{font-weight: bold;
}
</style> ';