The HTML WYSIWYG Editor

The SchoolFront Portal CMS HTML WYSIWYG Editor

WYSIWYG Overview

A WYSIWYG (pronounced "wiz-ee-wig") HTML editor is a design interface that allows you to see what the final result will look like while you create and edit content. WYSIWYG is an acronym for "what you see is what you get".

Traditionally, writing web-page content required that you enter descriptive codes (or "markup") and did not permit an immediate way to see the end results of the markup without publishing or previewing the code in a web-browser.

A WYSIWYG editor makes the process of creating website content similar to the process used to publish a document using standard word processing software, such as Microsoft Word. While you may feel like you are simply using a word processing program, the system will be creating the HTML (Hypertext Markup Language) for you in the background.

The WYSIWYG Editor in the HTML Web-Part

The most commonly used SchoolFront Portal CMS HTML web-part is the HTML Content web-part. When you click the little pencil icon to edit the web-part a WYSIWYG editor will open. This section describes the tools in the WYSIWYG editor.

Icon

Description

Source: Clicking this button will open a view with the source code/script/markup that is used to build the WYSIWYG view. As you make changes in the WYSIWYG view, the source code is updated automatically by the system in the background.

If you are familiar with HTML, you can tweak the code and make adjustments using by manipulating the source code.

Select All: Clicking this button will select all of the content in the editor.

You can also use the shortcut keys "Ctrl+A" to select all just as you can in Microsoft Word.

Erase / Delete: If you select text or an image in the editor and then click this button, it will erase / delete the selected item(s).

You can also use the shortcut keys "Ctrl+X" to erase selected items.

Cut: If you select text or an image in the editor and then click this button, it will cut the selected item(s). The difference between cutting and erase/deleting is that when you cut the selected item disappears but is placed on your clipboard so that you can re-paste it elsewhere in the editor. Erase/deleting just makes it disappear.

You can also use the shortcut keys "Ctrl+X" to erase selected items.

Copy: If you select text or an image in the editor and then click this button, it will copy the selected item(s) to your clipboard. You can then paste the copied content elsewhere.

You can also use the shortcut keys "Ctrl+C."

Paste with HTML Formatting: If you have copied or cut content from elsewhere and wish to paste that content into the editor with the same formatting, use this button.

Your can also use the shortcut keys "Ctrl+V."

  • Click here for more information on this great tool.

Paste as Plain Text: If you have copied or cut content from elsewhere and wish to paste that content into the editor with the formatting stripped, use this button.

  • Click here for more information on this great tool.

Paste from Word: If you have pre-written content using Microsoft word, use this button to paste the content into the editor. If you paste from Word and do not use this button, you may inadvertently paste background code from Microsoft Word that the WYSIWYG editor cannot handle. Using the button strips out unnecessary Word code while maintaining the styles you used in Word.

  • Click here for more information on this great tool.
Print: This button will print the contents of the WYSIWYG editor.
Spell Check: If you click this button after you have typed in the editor, it will check your spelling and recommend changes.
Spell Check As You Type (SCAYT): If you click this button before you type in the editor it will check you spelling as you type and recommend changes.

Undo: Clicking this button will undo the last change you made. For example if you just deleted something, it will reappear.

You can also use the shortcut keys "Ctrl+Z."

Redo: Clicking this button will redo the last change you made if you undid the change. For example if you just deleted something, then clicked the undo button and the deleted content reappeared, clicking this button would make it disappear again.

You can also use the shortcut keys "Ctrl+Y."

Find: This button will open a tool that will allow you to search for specific content (e.g. text) in the editor. It will allow you to narrow you search criteria using "match case, match whole word, and match cyclic."

Replace: This button will allow you to find a specific word or phrase and replace it with another specific word or phrase.

For example if you realize you've been spelling the word "cat" wrong many times over, you could find the word "kat" and replace it with the word "cat."

Block Quote: If you select text in the editor and then click this button, it will apply the "block quote" style, indicating that something you typed is a quotation.

Here is an example of what it looks like. Neat, huh?

Bold: If you select text in the editor and then click this button, it will apply the "bold" style.

Here is an example of what it looks like. Neat, huh?

Italic: If you select text or an image in the editor and then click this button, it will apply the "Italic" style.

Here is an example of what it looks like. Neat, huh?

Underline: If you select text in the editor and then click this button, it will place a line under the text.

Here is an example of what it looks like. Neat, huh?

Strike Through: If you select text in the editor and then click this button, it will place a line through the center of the text.

Here is an example of what it looks like. Neat, huh?

Subscript: If you select text in the editor and then click this button, it will make the text smaller and lower than the other text.

Here is an example of what it looks like. Neat, huh?

Superscript: If you select text in the editor and then click this button, it will make the text smaller and higher than the other text.

Here is an example of what it looks like. Neat, huh?

Ordered List: If you select text in the editor and then click this button, it will add enumerated bullets to the text.

  1. Here is an example of what it looks like. Neat, huh?
  2. Here is an example of what it looks like. Neat, huh?
  3. Here is an example of what it looks like. Neat, huh?
Unordered List: If you select text in the editor and then click this button, it will add non-enumerated bullets to the text.
  • Here is an example of what it looks like. Neat, huh?
  • Here is an example of what it looks like. Neat, huh?
  • Here is an example of what it looks like. Neat, huh?

Decrease Indent: This brings the indent of the text to the left.

Increase Indent: This brings the indent of the text to the right.

Alignment:

  • Left Align: This makes the text line up (flush) with the left-hand side of the editor window with the "ragged" side of the text on the right.
Here is an example of what it looks like. Neat, huh? Here is an example of what it looks like. Neat, huh? Here is an example of what it looks like. Neat, huh? Here is an example of what it looks like. Neat, huh? Here is an example of what it looks like. Neat, huh?
  • Center Align: This makes the text line up with the very middle of the editor window with "ragged" text on both sides.
Here is an example of what it looks like. Neat, huh? Here is an example of what it looks like. Neat, huh? Here is an example of what it looks like. Neat, huh? Here is an example of what it looks like. Neat, huh? Here is an example of what it looks like. Neat, huh?
  • Right Align: This makes the text line up (flush) with the right-hand side of the editor window with the "ragged" side of the text on the left.

 

Here is an example of what it looks like. Neat, huh? Here is an example of what it looks like. Neat, huh? Here is an example of what it looks like. Neat, huh? Here is an example of what it looks like. Neat, huh? Here is an example of what it looks like. Neat, huh?
  • Justify: This makes the text fill up the whole editor window, lining up (flush) with both the left and right.

 

Here is an example of what it looks like. Neat, huh? Here is an example of what it looks like. Neat, huh? Here is an example of what it looks like. Neat, huh? Here is an example of what it looks like. Neat, huh? Here is an example of what it looks like. Neat, huh?
Add Hyperlink: If you select text or an image and then click this button, it will allow you to add a hyperlink to the text or image such that when the text or image is clicked, the user is taken to the linked location (e.g. http://www.location.com).
Remove Hyperlink: If you select text or an image that is hyperlinked and then click this button, the hyperlink will be removed but the text or image will remain.
Anchor: This button allows you to insert an anchor tag at the location of your cursor when you click the button. You can hyperlink text or an image in one part of your page and have it link to an anchor tag placed in another part of your page.

Insert Image: This button allows you to insert an image and view/manipulate the properties of the image.

  • Click here for more instructions and information about inserting images.
Insert Flash: This button will allow you to insert a flash file and set properties for it.

Insert Table: Place your cursor where you want to insert a table, then click this icon to insert the table. You will be able to tell the system how many rows and columns you want, and what percentage of the horizontal space to consume.

  • Click here for more information about inserting tables.
Insert Horizontal Rule:
Insert Smiley:
Insert Symbol:
Insert Template:
Apply Styles:
Maximize/Minimize:

 


Printable View | © 2008 - 2020 FrontEdge Inc