Search Close Search
Search Close Search
Page Menu

UMass Chan CMS Blog

What is a WYSIWYG editor?

Tuesday, October 17, 2023
|

WYSIWYG (pronounced wiz-ee-wig) is a text editor, it is an acronym for "What You See Is What You Get."

A WYSIWYG is a rich text editing software that allows CMS editors to format content, similar to a word processing application like Microsoft Word, without having to know HTML (hyperlink text markup language). All web pages are created using HTML. This text editor allows the CMS editor to easily arrange text, images and other elements while the WYSIWYG produces the necessary HTML behind the scenes.

Here is a cheat-sheet of the icons that exist on the WYSIWYG menu:

Menu item name

Icon

Action

Align center

align-center icon

All items selected will be centered (adds inline styles)

Align left

align left icon

All items selected will be aligned left (adds inline styles)

Align right

align right  icon

All items selected will be aligned right (adds inline styles)

Bold

bold icon

Bolds selected text (adds STRONG tag)

Bookmark

bookmark icon

create bookmarks, so that readers can jump to specific parts of a web page. Add links at top of page and select the bookmark/anchor to create a table of contents. (adds an ID to the selected item)

Character count

character and word count icon

Under the tools menu

Code sample

code sample icon

Under the insert menu. Allows the display of code on a gray background and retains format as typed. (adds CODE tag)

Copy

copy icon

Under the edit menu, copies the selected items (or use keyboard shortcuts: PC Ctrl+C , MAC   Cmd+C  )

Edit image

edit image icon

Can optimize, crop, resize and transform an image. Select an image for this icon to become available on the menu.

Embed

embed icon

Used to embed video, social feeds (although better to use the appropriate CMS block for maintenance reasons)

Fullscreen

full screen icon

Opens the WYSIWYG in full screen mode

Highlight background color

Highlight background color icon

Add a color behind text (adds inline styles)

Horizontal rule

Horizontal rule icon

Adds a horizontal line (adds HR tag)

Image

Image icon

Add an image from the media or upload an image, apply ALT text, set the width and height, allow for a caption, apply a border or add space around the image (IMG tag)

Indent

Indent icon

Changes the indent of an ordered or un-ordered list or adds inline styles to set a left margin

Insert special character

Insert special character icon

Under the insert menu (adds appropriate ASCII character)

Italic

italic icon

Italicize selected text (adds EM tag)

Line height

Line height icon

Increase the spacing between lines in your text (adds inline styles)

Link

link icon

Add a link to select elements (adds A HREF tag)

Non-breaking space

non-breaking space icon

Add a non-breaking character, used to keep words together so they always stay together and not break on the next line (adds appropriate ASCII character)

Ordered list

Ordered list icon

Create a list using numbers. Click to open the menu to change to Greek or Alpha. (adds OL LI tags)

Click the arrow to see other options

Outdent

Outdent icon

Changes the indent of an ordered or un-ordered list or remove from BLOCK tag or removes inline styles for margins set to the left

Paste

paste icon

Under the edit menu (or use keyboard shortcuts: PC Ctrl+V , MAC   Cmd+V )

Quote

quote icon

Apply the quote tag around text. Styling will be set via the site’s style sheets.

Redo

redo icon

Redo any actions that you previous used undo (or use keyboard shortcuts: PC Ctrl+Shift+Z , MAC  Cmd + Shift+ Z )

Remove formatting

Remove formatting icon

After pasting text, or applying a format that is no longer wanted, select text or element and click this icon to remove all formatting.

Resize handle

Resize handle icon

This is in the lower corner of the WYSIWYG editor. Click and hold to make the editing area larger or smaller.

Resize

resize icon

This icon appears when selecting an image, a table or when on the bottom right corner of the WYSIWYG editor. Drag to resize the element.

Search

search icon

Search through the text in the WYSIWYG editor

Select all

select-all icon

Under the edit menu, selects all text and elements in the editor

Source code

source-code icon

View the HTML that is produced by the WYSIWYG editor

Spell check

spellcheck icon

Click on the spellcheck icon, red squiggle line will appear under misspelled words. Click again to turn it off. It does not give suggestions.

Strike through

strike out icon

On the Format menu (adds S tag)

Subscript

subscript icon

On the Format menu (adds SUB tag)

Superscript

superscript icon

On the Format menu (adds SUP tag)

Table

table icon

Under the insert menu and on the main menu. Once the table is created, click on the table icon to review options on the dropdown. (Adds TABLE TR TD tags)

Template

template icon

Under the insert menu. Click on one of the templates to use and it will place the needed HTML in the WYSIWYG area.

Text color

text color icon

Adds inline style to set the text to the chosen color

Underline

underline icon

Underlines selected text (adds inline styles)

Undo

Undo icon

Undo any action you completed (or use keyboard shortcuts: PC Ctrl+Z , MAC   Cmd+ Z )

Unlink

Unlink icon

Click anywhere in the linked text, this icon will remove the link (removes the A HREF tag)

Unordered list

unordered list icon

Create a list using numbers. Click to open the menu to change to Greek or Alpha. (adds UL LI tags)
Click the arrow to see other options

 

 

Formatting Menus

Select text and click on the dropdown next to the table icon or the Format menu along the top.

format dropdown   formats from menu

Headers Option: 

Apply a heading tag to selected text, add the appropriate HTML tag <H1> through <H6>

header menu

HTML-Tags

Adds the appropriate HTML tags to selected elements: <p>, <div>, <span>, etc.

HTML tags menu

Containers

Adds the appropriate HTMLs tags.

  • Block quote will create space around selected text, used as a call-out like a quote
  • Figure is used with images and allows for a caption below the image
  • Details created accordion style interactivity similar to an FAQ where the main text is hidden until the viewer click to expand

 containers menu

General-styles

This is context sensitive, meaning the options in this list will be different depending on what is selected. If a header is selected, header styling will display

 general style menu

Alignment

alignment menu

Related blog posts: