Difference between revisions of "HTML Editing Area Version 2"

Revision as of 11:51, 3 March 2015

1 Overview

bxp software (bxp) has a few areas throughout where rich text can make things look more visually attractive (bold, italics, fonts, etc.) In order to do this on a web system it needs a special tool to create HTML code. bxp has a HTML editing tool built into it using the TinyMCE plugin which converts a HTML text area into a special rich text area.

If you prefer to write your own rich text html using your favourite HTML editing tools (Dreamweaver, Notepad++, etc), then you can easily drop your code in instead by going to Tools >> Source Code in the editor. Alternately the tool below creates the HTML for you.

2 Use

The editor has various types of tools that allow the user to create, edit and preview the created HTML content.

There are three rows of options that will allow you to create nice valid HTML without knowing code.

2.1 Row 1

File

New Document - The new document feature will wipe all work in the box and allow you start fresh.

Edit

The edit option has options for edit, copy, paste, select all, undo and redo.

Insert

Insert Link - Allows the user to insert a link to a web page.

A url must be specified, this will be what page the link is going to.

The text to display i.e. this is what the user will see and can be clicked.

A title can be give to the link if needed but is not required.

Target is used to specify if the link will open a new window or stay in the current window. By default it is set to none.

Insert Image - Allows the user to insert an image into the content.

Each image requires a source, a source is the location the image resides. i.e. http://geekmom.com/wp-content/uploads/2014/09/Microsoft-Logo1.gif

An image description is not required but can be useful as sometimes images get moved on the web so they name will take its place should it be removed.

The dimension will be read in from the image but can be changed if needed. They can be constrained so that the image doesn't get stretched but this can be unticked if needed.

View

The view option allows a user to preview their work at any stage during the HTML creation.

Format

The format option is very like what Microsoft Word offers.

It allows you to change the the text with various options.

• Bold - Makes text bold
• Italic - Makes text italic
• Underline - Underlines text
• Strikethrough - Puts a line through text
• Superscript - Puts small text above the word i.e. like a date 25th, the th appears small
• Subscript - Puts small text below the word.
• Formats - Allows the user to set the heading size, alignment, create new paragraphs etc.
• Clear formatting - Clears all formatting

Table

Tables can be created which are useful for grouping text together.

Insert Table - You can select the table size by hovering over insert table and clicking on the number of boxes you want to create.

Once a table is created the table can be stretched and made bigger by clicking on one of the corners of the table and dragging them.

There are a range of other options in here that will allow you to heavily customise the table as needed.

• Table properties - Allows you to set the width, height, cell spacing/padding, the border and alignment.
• Delete table - Will delete the table selected.
• Cell - Allows you to set the properties of a cell the same as the table, also allows the merging and splitting of cells.
• Row - Allows you to inset, delete, cut, copy and paste a row, it also allows you to change the rows propertied.
• Column - The same as row but in regards to table columns.

Tools

Tools has one option called source code.

Source code can be used by more advanced users who would prefer to build the HTML from scratch.

2.2 Row 2 =

The second row is button shortcuts to most of functions already available through row 1.

The following options are available in order of left to right:

• Undo - Undo the last piece of work
• Redo - Redo the last piece of work
• Formats - See Formats section above.
• Bold - Make select text bold
• Italic - Italicize selected text.
• Font Family - Select the a web safe font to use.
• Font Size - Select a font size.
• Bullet List - Create a list.
• Number List - Create a numbered list.
• Indent Left - Indents text left.
• Indent Right - Indents text right.
• Align Left - Aligns text left.
• Align Centre - Centre aligns text
• Align Right - Aligns text right.
• Justify - Justifies text.
• Insert Link - Inserts a link.
• Insert Image - Inserts an image.
• Insert Emoticons - Inserts an emoticons, please note these are not always supported in emails or in some browsers.
• Text Colour - Changes the text colour.
• Background Colour - Changes the background colour.