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 appear at the top.

Screen shot of the toolbar with labels.

Toolbar Functions

  • save and exit icon 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.
  • exit without saving icon 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.
  • restore last draft icon 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.
  • cut icon Cut: Removes the selected content to the clipboard that will allow you to paste it in another location.
  • copy icon Copy: Copies the selected content to the clipboard allowing you to paste it as a duplicate in another location.
  • paste icon Paste: Pastes content that you have cut or copied into the selected location, maintaining any links or formatting that were in the original content.
  • paste as text icon Paste as Text: Pastes content that you have cut or copied into the selected location, removing any links or formatting that were in the original content.
  • find and replace icon Find and Replace: Allows you to search for specific characters and replace each instance with a different set of characters.
  • undo icon Undo: Reverses the last change you made.
  • redo icon Redo: Reverses the last Undo.
  • spell check icon 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 the 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 spell check in.
  • clear formatting icon Clear Formatting: Removes formatting applied to the selected content, such as bold or italics.
  • bold icon Bold: Applies bold formatting to the selected text.
  • italics icon Italics: Applies italics formatting to the selected text.
  • strikethrough icon Strikethrough: Applies strikethrough formatting to the selected text.
  • bulleted list icon Bulleted List: Formats the following text or selected text into a bulleted list. Clicking on the arrow next to the icon allows you to choose an alternate bullet style. From the code view you can add class=”none” to the <ul> to remove the bullet and indent or class=”nobullets” to remove the bullet and keep the indent.
  • numbered list icon Numbered List: Formats the following text or selected text into a numbered list. Clicking on the arrow next to the icon allows you to choose an alternate number style.
  • decrease indent icon Decrease Indent: Reduces the indentation of the selection.
  • increase indent icon Increase Indent: Increases the indentation of the selection.
  • superscript icon Subscript: Changes the selected text to subscript.
  • subscript icon Superscript: Changes the selected text to superscript.
  • insert/edit link icon Insert/Edit Link: Links selected content to another page in the CMS or an external website. If linking to another page in the CMS, use the folder icon at the end of the URL field to select the page. Text to display is what the page text is, this should already be filled out. Title is what will show up if you hover over the link on the live page. Target will determine if the link will open in the current window (None) or a New Window. By selecting a Class you can create a gold button, a grey button, an outline button (blank), an arrow, a yellow underlined link, or a blue font-color link.
    insert-link
  • remove link icon Remove Link: Removes the link from selected content.
  • mailto link icon Mailto Link: Allows you to set the email address and subject to create a mailto link.
  • anchor icon Anchor: Allows you to set the name for an anchor that can be linked to within a page. Be sure the name only includes lowercase letters, numbers, and hyphens.
  • help icon Help: Provides more information about the toolbar items in a pop-up window.
  • paragraph dropdown menu Paragraph: Applies heading formats to text. Only use Paragraph, Heading 2, Heading 3, Heading 4, Heading 5, Heading 6.
  • styles dropdown menu Styles: Applies custom coding to content including buttons, link formatting, horizontal rules, and alignment.
  • text color icon Text Color: Changes the color of selected text.
  • insert/edit image icon Insert/Edit Image: Inserts an image. You should first create your images in the CMS using the Image Editor gadget.
  • insert/edit video icon Insert/Edit Video: 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.
  • horizontal line icon Horizontal Line: Inserts a horizontal line at the cursor.
  • insert line break icon 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).
  • special character icon Special Character: Allows you to choose a special character to insert.
  • show blocks icon Show Blocks: Toggles the view to show or hide block-level element labeling.
  • source code icon Source Code: Allows you to view and edit the code view of the HTML source.
  • insert snippet icon Insert Snippet: Adds special formatting with entry areas for certain content so you can create various widgets. See the Snippets section for more details.
  • insert asset icon Insert Asset: Adds shared content to the page. See the Assets section for more details.
  • table icon Table: Menu for table functions.
  • maximize region icon 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)
  • Ctrl/Cmd + [2-6]: Set headings –  formats currently-selected block as Heading 2-6, respectively
  • Ctrl/Cmd + 7: Formats currently-selected block as a <p> (paragraph)