TinyMCE Editor (JustEdit)

The editor is an authoring tool that makes it easy for you to format your text. When you click an Editable Region to make changes to it, the editor opens. The region you are editing is highlighted and a toolbar appears at the top.

Toolbar within the region editor showing all the available icons.

Toolbar Functions

  • Disk icon in the toolbar to save and exit. Save and Exit: Saves the changes you have made to the content and closes edit mode, returning you to the edit screen where you can select another region to edit.
  • X icon in the toolbar to exit without saving. Exit without Saving: Closes edit mode for the region you are on without saving any changes you have made. This requires you to click OK to confirm this selection and then returns you to the edit screen where you can select another region to edit.
  • Clock hands with a counter-clockwise arrow icon in the toolbar to restore last draft. Restore Last Draft: Auto Draft will automatically save your changes approximately every minute while you are editing. The last save stored by Auto Draft can be recovered up to 20 minutes later in the event that your browser window is closed or lost. This icon is only shown in browsers that support this feature.
  • Scissors icon in the toolbar for cut. Cut: Removes the selected content to the clipboard that will allow you to paste it in another location.
  • Two pages icon in the toolbar for copy. Copy: Copies the selected content to the clipboard allowing you to paste it as a duplicate in another location.
  • Clipboard icon in the toolbar to paste. Paste: Pastes content that you have cut or copied into the selected location, maintaining any links or formatting that were in the original content.
  • Clipboard with a capital T icon in the toolbar to paste as text. Paste as Text: When toggled on, content that you paste into the selected location will have any links or formatting that were in the original content removed. This option should always be turned on when pasting content from a source outside the CMS.
  • Magnifying glass icon in the toolbar to find and replace. Find and Replace: Allows you to search for specific characters and replace each instance with a different set of characters.
  • Right arrow icon in the toolbar to undo. Undo: Reverses the last change you made.
  • Right arrow icon in the toolbar to redo. Redo: Reverses the last Undo.
  • ABC with a checkmark icon in the toolbar for spellcheck. Spell Check: Clicking the icon checks the content for misspelled words, underlining them in red. It will not continue to check additional content you type, so you should check after you have entered all content. Clicking on a misspelled word will give you correctly spelled alternatives to choose from. Clicking on the arrow next to the icon will allow you to choose a different language to check spelling in.
  • Capital T with a subscript X icon in the toolbar to clear formatting. Clear Formatting: Removes formatting applied to the selected content, such as bold or italics.
  • Capital B icon in the toolbar for creating bold text. Bold: Applies bold formatting to the selected text.
  • Capital I icon in the toolbar to make italics text. Italics: Applies italics formatting to the selected text.
  • S with a line through it icon in the toolbar for strikethrough text. Strikethrough: Applies strikethrough formatting to the selected text.
  • Bulleted list icon in the toolbar. Bulleted List: Formats the subsequent text or selected text into a bulleted list. Clicking on the arrow next to the icon allows you to choose an alternate bullet style.
  • Numbered list icon in the toolbar. Numbered List: Formats the subsequent text or selected text into a numbered list. Clicking on the arrow next to the icon allows you to choose an alternate number style.
  • Lines with a left arrow icon in the toolbar to decrease indent. Decrease Indent: Reduces the indentation of the selection.
  • Lines with a right arrow in the toolbar to increase indent. Increase Indent: Increases the indentation of the selection.
  • X with a superscript 2 icon in the toolbar for superscript text. Superscript: Changes the selected text to superscript.
  • X with a subscript 2 icon in the toolbar for subscript text. Subscript: Changes the selected text to subscript.
  • Question mark in a circle icon for help. Help: Provides more information about the toolbar items in a pop-up window.
  • Paragraph drop-down menu in the toolbar to add headings. Paragraph: Applies heading formats to text. Only Paragraph, Heading 2, Heading 3, Heading 4, Heading 5, or Heading 6 will be used.
  • Styles menu drop-down in the toolbar. Styles: Applies custom coding to content including font size, link formatting, horizontal rules, and alignment. View the font styles in the Style Guide.
  • Underlined capital A icon in the toolbar for text color. Text Color: Changes the color of selected text. Please note that the default options provided may not meet accessibility requirements for color contrast, depending on your background color.
  • Photo icon in the toolbar to insert or edit an image. Insert/Edit Image: Inserts an image. You should first create your images in the CMS using the Image Editor gadget.
  • Play button icon in the toolbar to insert or edit media. Insert/Edit Media: Allows you to insert a video using a URL or one that is in the CMS or to insert embed code such as an iframe. For all videos, use the Video Snippet instead.
  • Horizontal line icon in toolbar to add a horizontal line. Horizontal Line: Inserts a horizontal line at the cursor. View the basic and styled horizontal rules in the Style Guide.
  • Down and left arrow icon in the toolbar to insert a line break. Insert Line Break: Inserts a line break at the cursor. This would put the following content on the line below the previous text without a line space between (same as Shift+Enter).
  • Omega character icon in the toolbar to add a special character. Special Character: Allows you to choose a special character to insert.
  • Paragraph symbol with dotted square icon in the toolbar to show blocks. Show Blocks: Toggles the view to show or hide block-level element labeling.
  • Less than, greater than icon in the toolbar for source code. Source Code: Allows you to view and edit the code view of the HTML source.
  • Puzzle piece icon in the toolbar to insert a Snippet. Insert Snippet: Adds special formatting with entry areas for certain content so you can create various widgets. See the Snippets section for more details.
  • Square arrows icon in the toolbar to insert an asset. Insert Asset: Adds shared content to the page. See the Assets section for more details.
  • Table icon and drop-down arrow in the toolbar. Table: Menu for table functions.
  • Four arrows pointing out icon in the toolbar to maximize the region. Maximize Region: Expands the editable region to fill the width of the frame window.

Keyboard Shortcuts

Within the editor you can also use most basic keyboard shortcuts. Some browsers do not allow the use of the cut, copy, and paste icons, but the shortcuts will still work.

  • Ctrl (PC)/Cmd (Mac) +S: Save-in-place—saves changes to the staging server, but you will remain inside the editor to continue working.
  • Ctrl/Cmd +X: Cut
  • Ctlr/Cmd +C: Copy
  • Ctlr/Cmd +V: Paste
  • Ctlr/Cmd +Z: Undo
  • Ctlr/Cmd +Y: Redo
  • Ctlr/Cmd +B: Bold highlighted text
  • Ctlr/Cmd +I: Italicize highlighted text
  • Ctlr/Cmd +F: Opens the WYSIWYG Find and Replace tool
  • Shift + Enter/Return: Creates a new line break in the current block (the cursor will move to the next line without an empty space between)