Hello. How can we help?
Can't find what you're looking for? Contact support

Using The HTML Editor

Follow

Using the Html Editor

Overview

The Html Editor appears on any administration page where Html content is entered. The Editor works just like a word processor, in that you can enter text and apply the desired formatting using an easy to use, graphical interface.

You don't need to know Html to use MyCricket.
However, a working knowledge may give you more control of your page layout.
If you are new to Html there are many resources on the web, search for HTML tutorial and you’ll find numerous options.

Note: The Html Editor will only display if the browser being used is Microsoft Internet Explorer v5.5 or later. Users using other browsers will see a simple text area which will only accept raw Html, and will not have any of the advanced formatting options listed below.

The editor is made up of three parts:

·           The toolbar - this consists of the tools used to apply formatting and carry out other tasks, similar to a toolbar of a word processor. The tools are explained in detail below.

·           The Page Content area - this is the large white space where the content is added

·           The View Selector – accessible at the bottom of the Page Content. At any time switch between

o        Design mode - editor works just like a word processor; type text directly into the content area, cut paste, drag and drop etc and use the tools for formatting. This is the default mode.

o        Html mode - used for advanced users to manipulate the Html that the editor produces behind the scenes -the toolbar is not available in this mode

Note: it does not matter which mode you work in, the content is saved to MyCricket ultimately in Html form. You can freely switch between modes at any time.

Typing text

Type text directly into the editor using Design mode. Hitting the Enter key will start a new paragraph, Shift-Enter will insert a line break. Apply formatting with the Editor tools described below.

Importing Content

The most straightforward way to import content into the editor is to copy and paste from another application. Text can be copied and pasted from most other applications (for example Microsoft Office applications), and will retain most formatting. Ensure that the Editor is in Design mode before pasting content via this method.

It is not recommended to use the 'Save as html' option of external applications, the copy and paste method usually works better and preserves more formatting. However, certain applications will add extraneous Html formatting code which should be cleaned by using the Code Cleaner feature accessible on the toolbar (see below).

In addition, frequently used content can be saved as a Html template within MyCricket for later reuse via the Template tool and in addition, you can access global templates to help create common pages.

Linking to/inserting other content from MyCricket within your Html pages

It is likely that you will wish to include other content you have created or uploaded to MyCricket within your pages. For example, you may wish to include an image, or create a link to another MyCricket Html page you have created, or to a document (e.g. pdf) that you have uploaded.

The Image and Link tools allow you to do this easily, and create the required link information automatically. However, this content must already exist within MyCricket before you do this. For example, before attempting to insert links to images or documents, make sure they have already been uploaded via the File Manager.

The HTML Editor Toolbar

The following formatting functions are accessible via the editor toolbar:

Cut

Cut the current selection and store it in the clipboard.

Copy

Copy the current selection and store it in the clipboard.

Paste

Paste the content of the clipboard on the current selection or cursor position.

Bold

This tool will let you set the current text selection to Bold characters.

Italic

This tool will let you set the current text selection to Italic characters.

Paragraph

Set or change the current paragraph style. It is recommended that paragraph styles be used for the majority of formatting tasks, rather than using the FONT tools. This will ensure that the look and feel of your pages is more consistent with the rest of the site. In addition, standard heading styles can be mapped across from word processors (e.g. Heading 1 maps across to <H1> etc) making it easier to import content into the editor.

Font Color

Set the font color. If a selection is active, the font will be applied to it. While fonts can be modified, it is recommended to use Paragraph styles wherever possible.

Font Face

Set the font style. If a selection is active, the font will be applied to it.

Font Size

Set the font size. If a selection is active, the font will be applied to it.

Unordered List

Start an unordered list (i.e a bulleted list of items). If in an ordered list, it will be converted into an unordered list.

Insert Table + Table Editing

Insert a table. Right clicking on any of the table in the editor will give you access to additional functions like adding/removing rows and columns, toggle table previewing mode and more.

Align Center

Align the current paragraph to center.

Align Left

Align the current paragraph to left.

Align Right

Align the current paragraph to right.

Indent

Indent the current paragraph (move to the right).

Outdent

Outdent the current paragraph (move to the left).

Insert Rule

Insert a horizontal rule.

Image

Insert images - either from your image library, or elsewhere from the Internet.

To insert an image from your image library (i.e. images you have previously uploaded to MyCricket)

·           click the Image icon on the toolbar,

·           click the Library... button to access the library.

·           A separate window will open where you can select your image.

·           Select the Image from your library,

·           click Apply. This will insert the correct reference to your image in the URL field of the Image popup.

·           Click Ok to insert the Image popup, and your image will be inserted into your page.

To insert an external image from elsewhere on the Internet…

·           click the Image icon on the toolbar,

·           enter the full URL (address) of the image - e.g. http://www.acme.com/image.gif in the URL field.

·           Click Ok to accept.

Other options in the Image tool dialogue box:

·           URL - The address of the image - see above about how to enter

·           Border width - The width of the border around the image. Default is no border, unless the image is part of a link, in which case the default behaviour is to show a border. Typical values are 0,1,2 etc.

·           Border color - The color of a border (if applied)

·           Alt text - The text that most browsers will show if the cursor is positioned over the image (sometimes called a 'tool tip')

·           Align - used to align text and an image which appear of the same line

·           Hori, Vert spacing - the spacing around the image. Value is a number (1,2,3 etc).

·           Width, height - if known these are the dimensions of the image (in pixels). Setting these can resize an image, if left blank the browser will automatically size the image.

After the image has been added to the content area, the properties can be modified by first selecting the image and clicking the Image icon on the toolbar.

Link

Insert, modify or remove the link of the selected text range or image.

·           In the Html editor, select the content that you want to be a link. This is the link source. This could be one or more words (eg: click here), images, or a combination of both

·           After selecting the source, click the Link icon on the toolbar.

·           If nothing is selected, the link can still be created, but the link target (generated as explained below) will be displayed on your page (as the item to be clicked) instead of more user friendly text/images.

To insert a link to other MyCricket content you have uploaded or created (i.e. Html pages, uploaded documents, slideshow galleries)

·           click the Link icon on the toolbar

·           click the Library... button to access the library.

·           A separate window will open where you can select the item to link to.

·           Select the type of content you wish to link to from the Target Type dropdown list

·           Select the page/gallery etc from the second dropdown

·           Click Apply. This will insert the correct link to your content in the URL field of the Link popup.

·           Click Ok in the Link popup to accept.

To insert a link to a page elsewhere on the Internet…

·           click the Link icon on the toolbar

·           Type the full URL (address) of the image (e.g. http://www.acme.com/page.htm) in the URL field.

Other options in the Link tool dialogue box:

·           Target - this controls how the linked item opens when clicked:

o        no entry or _self - link will open in the current browser window

o        _blank - link will open in a new browser window. This option should be chosen when linking to uploaded documents, as otherwise the document will 'replace' the MyCricket site in the browser

o        _parent, _top - not applicable

o        _media - link will open in the media bar (Internet Explorer only). This can be effective for displaying small video or audio clips.

If a link is right clicked, a content menu pops up which allows:

·           Remove link - removes link information, but leave underlying content

·           Follow link - opens the target of the link in a new browser window - useful for checking the link was entered correctly, and it exists.

Template

Frequently used Html pages can be saved as a template for easy reuse. In addition, some global templates are available for common pages. To load a template, click the Template tool and select from the list of templates. This will replace any content in the editor with the the content of the Template.

Code Cleaner

When a Word (or certain other) document is pasted into the editor (using the clipboard to copy and paste), extra unnecessary Html formatting can be added. This is usually best to remove. Simply click the Code Cleaner tool after pasting. If excessive formatting is removed, undo the action by typing Control-z.

Undo

To undo the previous action(s) type Control-z. or Control-y to redo.
Unfortunately this action is unable to be launched directly from the tool.

HTML Validation

The Content you enter via the Html Editor (whether it be for Html Pages, or News/Events items) forms part of the Html of your site. Html (Hypertext markup language) is the code used to display web pages within browsers. So, by entering content, you are essentially adding to the code produced to form your website. In most cases when the 'Design' mode of the editor is used, the Html created will be OK, and not cause problems.

However, if the 'Html' mode of the editor is used (allowing direct input of Html), or if content is cut and pasted from other applications (such as Microsoft Word), sometimes the Html can be invalid. Most modern browsers are fairly forgiving of invalid Html, but in some cases, errors can occur, and in extreme cases, the browser may crash.

By validating your Html and correcting any major errors you can guard against this. Particular care should be taken to not have overlapping tags (especially SPAN tags). If your pages are causing problems, and you cannot resolve the issue, please contact MyCricket Support.

To validate your document, click the Validate button at the bottom of the editor. This will launch your content in the W3C Validator application which will allow you to check your HTML Code.

Comments

Powered by Zendesk