Content editing on a website involves putting words, images, links etc. into the body of a web page. XPOR uses the most popular / standard html toolbox currently available - TinyMCE. This list of editing tools is presented to you, whenever you are in edit mode, on a Web Page or Form that has the HTML Atom included.
This Help Resource provides full details of the Tools presented by TinyMCE. Note, the toolbox is regularly updated, so some of the tools may change, be replaced or added to, in your XPOR installation.
The Attached video demonstrates the use of the Editing tool, (whilst writing this Help Resource!), though not all of the tools are demonstrated - would take ages!
The HTML Editing Ribbon is organised into Tabs. Each tab is itself organised into a number of Groups, into which the buttons that can be used to configure the text have been provided;
Each of the Groups and their Buttons provided under these Tabs are detailed below. Buttons have "Mouse-over" tips to assist in understanding their purpose.
The Ribbon under the Home tab presents the most commonly used functions when editing the content on websites.
These are basic "windows" editing functions that we are all well used to. The functions these buttons provide can also be achieved using standard keyboard functions - Ctrl C / Ctrl Z / Ctr V.
The Font Group provides access to the available font formatting tools. Swipe a section of font and click any of the buttons, to see the effect. Once changed to that font style, further text added after the change will continue in the same vein. Also, when you subsequently position the cursor into the modified text formatted section, the buttons will change / highlight to display the formatting used.
The Font size used in the Text you enter is set by the paragraph style you select (as above). This tool will allow you to change the Font Size, in the middle of a paragraph, or to override a paragraph style.
The Font types used in the Text you enter are set by the paragraph style you select (as above). This tool will allow you to change the Font to a different system font, in the middle of a paragraph, or to override a Paragraph style setting.
This text has a lot of formatting in it and the Clear Formatting button will quickly return it to the base style.
To change text to "Bold" simply swipe the text concerned and click the B button.
To remove the "Bold", swipe the Bold text and click the Bold Button again.
This function is also activated from the keyboard - using Ctrl B.
The Italic button works in the same manner as the Bold Button.
The Underline button works in the same manner as the Bold button
The Strikethrough button works in the same manner as the Bold button.
The Subscript button works in the same manner as the Bold button.
The Superscript button works in the same manner as the Bold button.
The Colour of the Font in an HTML atom can be set using the Font Fore Colour button.
The Background Colour of the Font in an HTML atom can be set using the Font Background Colour button.
The Styles Group provides access to the Paragraph styles settings. These settings are
The Line Height button will override the paragraph style, to set the height between each line of text that you enter. The Line Height button will override the paragraph style, to set the height between each line of text that you enter. The Line Height button will override the paragraph style, to set the height between each line of text that you enter. The Line Height button will override the paragraph style, to set the height between each line of text that you enter.
The Paragraph Group contains the paragraph formatting tools.
The Bullets button will convert the text to Button list. Repeated clicking of the Button List button will remove the Button list.
The Numbered List will convert the text to a sequential numbered list. Repeated clicking of the Numbered List button will remove the Numbered list.
The Increase and Decrease Indent buttons will push the paragraph of text in by a pre-determined gap from the edge of the page. It will also cycle through the various levels of Bullet and Numbered Lists.
This line has been indented
This line has been indented twice
This line has been indented three times
The Text Align Buttons work in the same manner as the Bold button;
Left Align - this is the default!
Centre Centre Centre Centre
Right Align Right Align Right Align
This is text that has been Justified using the Justify button. Note that the same alignment will work for images and tables. This is text that has been Justified using the Justify button. Note that the same alignment will work for images and tables.
The Insert Tab houses two Groups of buttons, which enable the user to Insert features onto the web page ... such as this image!
Symbols are occasionally used in technical text. You can add Symbols from a list provided in the HTML atom editor.
You can add a horizontal line into your text - useful for breaking up long sections of text or stressing paragraphs.
The Toolbar presented under the Advanced tab is a collection of buttons that provide further editing functions, of a slightly more advanced, less frequently used nature;
The Insert / Edit DIV button will put a DIV tag around the selected text / HTML element, meaning you can configure the content of the Div with discrete style. This feature is provided with options to set Style, ID and nesting.
This Tool is detailed in a Separate Help Resource.
The HTML atom includes a simple HTML editor tool. This will expose the HTML that comprises the field being edited.
If you would like to quickly highlight or isolate the text that is contained by your HTML Atom, the Atom Boxing function may be of use to you.
Tick this if you want the Atom to be boxed.
Select an Image from the back end of the website and this will appear at the top left hand corner of the atom as a Box Identifier
This text will appear at the top of the Atom / box
There are three options for putting colour as the background of the Atom / box. We have provided two pre-configured options. Alternatively you can set up /pick your own colour by selecting the Custom Background option.
Click the drop down arrow to open the standard colour picker and select a colour you require for your Atom background.
Click the drop down arrow to open the standard colour picker, to select a colour that will display behind the image you select for the top left hand corner of the atom.
The layout of pages and technical information is often suited to a table structure. You can use this feature of the HTML Editor to add and configure tables.
Note, when a table is added to a page, clicking on the table will result in additional table formatting tools appearing under this Tab;
The Table group provides buttons that control the Table you have added
Similar to the Toggle HTML Guides, this button will expose any tables in the HTML atom that are present but don't have any borders set to display;
When the Visual Aid is switched off, the table has no borders, it will effectively be invisible. If you click on the table, all you will see is;
This button opens a form that provides the settings to configure a new table. The form has two tabs, General and Advanced.
Most (common) Table configuration actions are provided under General tab;
Set the number of columns you require in your table.
Set the number of Rows you want for your table.
The Cell Padding is the gap between the cell wall and the content inside the cell
The cell spacing attribute specifies the space, in pixels, between cells. Note: Do not confuse this with the cellpadding attribute, which specifies the space between the cell wall and the cell content. The cellspacing attribute of a cell is not supported in HTML5.
This attribute sets how the contents of a cell are aligned within the cell space.
Click the checkbox at the end of this row and you will be enabled with the ability to set the properties for the borders of ALL of the tables cells.
The individual settings are for;
1. The width (in pixels) of the border
2. The Width units of the border. If px not selected then the pixel setting will disappear Width unit options are;
Border line options - px. The width of the border in pixels. This selection will enable the number thickness setting option.
Border line options - Medium Specifies a medium border - this is the default
Border line options - thin Specifies a thin border
Border line options - thick Specifies a thick border
Border line options - length Allows you to define the thickness of the border
Border line options - initial Sets this property to its default value. Example, set the text colour of the <div> element to red, but keep the initial colour for <h1> elements
Border line options - inherit Inherits this property from its parent element. Example, set the text-colour for <span> elements to blue, except those inside elements with class="extra":
3. The Colour of the Table / cell borders can be set to any required variation, using the standard XPOR colour picker control.
When setting the colour using the colour picker, remember to click the Tick button when you have made your selection.
As above but specific to the Left Border of cells.
As above but specific to the Top Border of cells.
As above but specific to the Right Border of cells.
As above but specific to the Bottom Border of cells.
The width of the table can be set as pixels. In the screenshot below, the user is setting the table to be 800 pixels wide. It will be fixed to this, and will not react to the viewing screen size.
Alternatively you can;
1. set the table to occupy a percentage of the screen (width) that is viewing it. Then, when the screen is adjusted or the table is viewed on a different device, the table will adjust accordingly.
2. set the table to fit exactly into anything it is contained in (e.g. a <div>)
3. set the width to NONE - this is being deprecated.
4. set the width to be automatically calculated by the browser.
Sets the height of the Table. Most of these options result in the table calculating its' height. Only the Pixel (px) option will set the height of a table to be restricted.
You can select a style sheet Class to configure the table. This will override any of the settings described above. Please refer to the Help Resourcees for "Themes" and "Stylesheets" for further guidance.
Not currently enabled.
The Advanced Tab provides access to additional functions requiring a little more knowledge on HTML and website styles.
You can give the table an ID - which can subsequently be used to locate the table from other web pages.
If you are using a style sheet approach to controlling how our table is presented, you can select your pre-prepared Style Sheet here.
XPOR can handle multi-lingual web pages. You can select a language code to be applied to the table, such that this language character set is used by default on the table.
Set this to control the direction in which the characters are read / presented in the table.
Use this set a background colour for the Table
Use this to set whether you want to have an image as the background to your table. You can select if you want this to be an internal (stored in XPOR) image or an external image - from another website, or no image at all (default). Note that this feature does not scale the image to fit the table. In the event that the image is larger than the table, it will be cropped. Likewise if the image is smaller than the table, it will be repeated to fill in the table.
Some of the table editing functions are presented to the editor as soon as the table is clicked. This provides rapid access to the key functions. Note, each tool button has a mouse-over description to assist in selection of the appropriate function.
These functions mirror the functions described in this Help Resource but with slightly differnet details editing forms.
This button re-opens the form that was used to create the Table (as above). However, it has the Row / Column count disabled. You cannot add rows or columns to the table as you did when you first set up the table. You must now use the subsequent buttons (see below).
This button will entirely delete the selected table.
This button will open the same editing functions described above - but for the selected table cell. this is a
One variation of note is that this is where you can select how the cell handles VERTICAL alignment.
There are two methods for merging table cells. Firstly you can click into a Cell and click the Merge Cells button. This will open a small form;
Set the number of cells you want to merge, starting with the selected cell and moving to the left or beneath the selected cell.
The number is set to 1 by default. This will not merge any cells - 2 is the number to merge TWO cells together etc.
The alternative method is to click the first cell you wish to merge and drag across / down to the subsequent cells to select all cells you wish to merge. Then click the Merge Cells button. This will merge the selected cells.
You can use this tool to split cells into multiple other cells, either vertically or horizontally.
Use these buttons in this group to add or delete Rows in your table
Use these buttons in this group to add or delete Rows in your table.