Editing Text on an Existing Page

*Helpful Tip: When a new page is added to a site, that page will not show up in the navigation of the live site until the first bit of content has been added and approved for that page. This prevents users from seeing a blank page.  

Making changes to a web page are done with an editor called TinyMCE. This editor works somewhat like a simplified word editor. If you are already proficient with Microsoft Word, for example, then you already know most of TinyMCE’s functions. It allows you to easily work in HTML - the language of the web site - without needing to have knowledge of HTML. Below is what TinyMCE looks like when opened to edit information in a piece of content in T4. 

TinyMCE Toolbar

The buttons on this toolbar are similar to other word processing tools. There are exceptions - familiarize yourself with the functions and descriptions below.

Toolbar Symbol	Name	Description	Drop-Down Menu
	Undo	To undo the last change made.	Edit
	Redo	To redo the last change which was undone.	Edit
	Bold	Changes the text to bold.	Format > Formats > Inline
	Italics	Changes the text to Italics.	Format > Formats > Inline
	Underline	Underlines the text.	Format > Formats > Inline
	Align Right	Justifies the text left.	Format > Formats > Alignments
	Align Center	Justifies the text centered.	Format > Formats > Alignments
	Align Left	Justifies the text left.	Format > Formats > Alignments
	Align Full	Justifies the entire text.	Format > Formats > Alignments
	Unordered list	Inserts a bulleted list.  (Use for items of no particular rank.)	N/A
	Ordered list	Inserts a numbered list.  (Use for steps, or items with a specific rank.)	N/A
	Negative indent	Decreases any indent applied to a paragraph.	N/A
	Indent	Indents a paragraph, or highlighted block, of text.	N/A
	Insert/edit link	Inserts a link: section/content/external/anchor.	Insert
	Remove link	Removes a link.	Insert
	Media	Inserts media from the Media Library.	N/A

 

TinyMCE Drop-Down Menus

Toolbar Menu	Menu Item	Description	Keyboard Shortcut
Edit	Cut	Cut any selected content	Ctrl+X
	Copy	Copy any selected content	Ctrl+C
	Paste	Paste content currently stored in your clipboard	Ctrl+V
	Paste as text	If switched on, this will paste content from your clipboard into the content area as plain text
	Select all	Select all content - usually used in conjunction with Copy or Paste	Ctrl+A
	Find and replace	find and replace text	Ctrl+F
Insert	Insert Link	Insert either a section link, content link, external link or an anchor.
	Horizontal line	Add a horizontal line to content
	Date/Time	Inserts the date and time in specified formats.
View	Show blocks	Displays a grid of dotted frames around the block-level elements of the document with labels so users can see exactly where blocks begin and end
	Show invisible characters	Adds the possibility to see invisible characters like
	Visual aids	Gives you the ability to turn on/off the visual aid for borderless tables. If the border of a table is set to "0", then TinyMCE adds a dotted line around the table by default
	Full screen	Displays the content area in full screen	Ctrl+Alt+F
Format	Strikethrough	Places a line though the text
	Superscript	Changes text to Superscript
	Subscript	Changes text to Subscript
	Formats	Select a format for your content
	Clear formatting	Remove formatting of highlighted text
Table	Insert table	Add a table to content

 

TinyMCE Shortcuts

This table shows the keystrokes (shortcuts) that engage the various actions.

Action	Shortcut
Bold	Ctrl + b
Italics	Ctrl + i
Underline	Ctrl + u
Cut	Ctrl + x
Copy	Ctrl + c
Paste	Ctrl + v
Undo	Ctrl + z
Heading 1	Ctrl + 1
Heading 2	Ctrl + 2
Heading 3	Ctrl + 3
Heading 4	Ctrl + 4
Heading 5	Ctrl + 5
Heading 6	Ctrl + 6
Hyperlink	Ctrl + k
Find	Ctrl + f
Select all	Ctrl + a

 

Pasting / Importing text from Word Processors

Copying and pasting from a word file can be done but it's not always recommended. Code that gets copied from a word file into TinyMCE can not always be changed once it has been inserted into the webpage. This can end up causing frustration to the person trying to format a webpage when the code can not be altered. 

It's most recommended to strip all formatting from the text by copying the text into Notepad first and then transferring it to the TinyMCE editor. Once it has been pasted into the TinyMCE editor it can be formatted using the TinyMCE controls. 

 

Spell Check

Unfrtiunatellly speel chck does not curentlly wrk in TinyMCE :)

It's recommended to spell check text before transferring to TinyMCE. 

 

Next Lesson - Adding Images to Pages »