WYSIWYG. O

  *Show All Contents, Original Templates, Pages and Posts

The What You See is What You Get Editor (WYSIWYG)

 

Your wordpress site has come with the TinyMCE advanced editor. This is an editor for your content, and it has very similar functionality to that of a program like Microsoft Word. We’ll briefly go over some of the functionality that comes with the TinyMCE Editor.

Your editor has two main sections, the controls, and the content area. The content area, is simply where you go to type in your content. The form Controls allow for different treatments that you can perform on the text. We will briefly go over the tool set, one row at a time, starting with the menus.

Row 1: The Menus

File

  • New Document: Will remove all content currently in the Text Area, giving you a clean, new Document
  • Print: Prints out the content that is currently in the text area on this page.

Edit

  • Undo: Undo that last thing you did. Good for a quick step back, if you accidently delete something.
  • Redo: Apply a change that you may have undone.
  • Cut: Takes the highlighted text and place it in your clipboard, while removing it from the location.
  • Copy: Takes the highlighted text and places it into your clipboard, while leaving it in its original location
  • Paste: Pastes the content of your clipboard at the cursor point
  • Paste as Text: Pastes the content of your clipboard at the cursor point, while stripping out any additional styling. This is extremely useful, and recommended, when pasting in content from any Rich Text Editors, such as Microsoft word, as it will strip away any styling.
  • Select All: Highlights everything in the content area.
  • Find and Replace: Can be used to replace all of words within the text area.

View

    • Source Code: Shows the HTML source code for the content. Can be used by advanced users who have experience in HTML.
    • Visual Aids: Provides a dotted border around tables that are borderless.
    • Show Invisible Characters: Toggling this on will show invisible characters that may appear in the HTML, such as a non-breaking space (   ), a space that won’t allow words to wraps.
    • Show Blocks: Shows the logical HTML elements as blocks around the content
    • Full screen: Toggle the editor to full-screen.

Insert

    • Insert/edit Link: Turns any highlighted text in the content, into a link.
    • Media: Inserts media, such as images, into the content.
    • Table: Inserts a Table into the content, opens an interactive Graphic that allows you select the number of columns and rows that you would like in this character.
    • Special Character: Adds the ability to insert special characters into the content area. These special characters are ones that are not normally available via the Keyboard.
    • Horizontal Line: Adds a horizontal rule to your content, a single horizontal line that can be used to help break up sections of content
    • Non Breaking space: Adds non-breaking space to the content. Non-breaking spaces will keep two words together, and stop automatic wrapping from happening. Useful for when you have two words that you always want to appear on the same line, and don’t want the second word to ever drop down a line without the first word.
    • Anchor: Adds a point into the page, that you can directly link to.
    • Date/Time: Allows you to put in the current date/time quickly.
    • Add Media: Adds in media to the site through the media viewer. This should be the preferred method of adding in the content, as you don’t need to know the url for the item.
    • Insert Read More tag: Adds in a Read More break. This is sometimes used to choose when content cuts off as previews. This is done automatically on these themes, and you do not need set it manually.
    • Page break: Adds in a page break. This is not used on the FedComp Templates

Format

 

    • Bold: Makes fonts bold.
    • Italic: Makes font italic
    • Underline: Adds an underline under the text
    • Strikethrough: Adds a strikethrough to the text
    • Superscript: Makes the highlighted text smaller and moves it to the top of the line.
    • Subscript: Makes the highlighted text smaller, and moves it towards the bottom of the line.
    • Code: Add in a place that you can type out code, without the code being read by the browser.
    • Blocks: Changes the highlighted text to a different type format, A heading 1, Heading 2, etc…
    • Align: Aligns the highlighted text to the left, right, center, or justified.
    • Clear Formatting: Clears out any formatting that you may have applied on the highlighted text.

Tools

    • Source Code: Shows the source code for the content area.

Table

    • Table: Inserts a Table into the content, opens an interactive Graphic that allows you select the number of columns and rows that you would like in this character.
    • Table Properties: Once you have inserted a  table, you can change some of the properties of that table here, such as the width, the height, any padding inside the cells, or spacing around the cells, changing the border thickness (set 0 to remove), and changing the alignment.
    • Delete Table: Removes a table once selected.
    • Row: Allows you to manipulate Rows within the table, such as adding more rows, or removing rows, cutting and pasting rows, and other such requirements.
    • Columns: Allows all of the same actions as a rows, but applies to columns
    • Cell: Lets you change properties of a specific Table Cell, such as height, width, and alignments.

 

Row 2: Formatting Options

  • Block Dropdown: Changes the highlighted text to a different type format, A heading 1, Heading 2, etc…
  • Bold: Sets text to bold
  • Italic: Sets text to Italic
  • Blockquote: changes the section of content to a blockquote, which should be used when you are quoting someone else
  • Unordered List: Creating a list of items, that aren’t in an order, or they are using Bullets instead of numbers/letters
  • Ordered List: Creating a list of items that are in order, they use numbers or letters instead of bullets.
  • Align Left: Aligns the content to the left
  • Align Center: align the content to the center
  • Align Right: aligns the content to the right
  • Creating a Link: Allows you to create a link using the highlighted text.
  • Breaking a link: Allows you to remove a link that already exists.
  • Undo: Undoes your last action(s).
  • Redo: Reapplies any actions you may have undone.
  • Fullscreen: Switches the editor window to Full Screen mode.

Row 3: Formatting Options

  • Font Family: Lets you chose which font-family you want
  • Font Size: Lets you choose your font-size
  • Un-indent: Removes any indentation on items
  • Indent: Indents items further.
  • Paste as Text: Past in text while removing any styling.
  • Clear Formatting: Clears any formatting that may be on the text.
  • Insert Special Character: Inserts any special characters that may not be on a standard keyboard
  • Insert Read More tag: Adds in a Read More break. This is sometimes used to choose when content cuts off as previews. This is done automatically on these themes, and you do not need set it manually.
  • Text Color: Change the color of text in the content area
  • Table: Quick access to the table properties.
  • Keyboard Shortcuts: Opens a modal that will tell you keyboard shortcuts that may help you edit content faster.