Search

Information


Interface Topics

JustEdit WYSIWYG Toolbar

Home  >  OU Campus Self-Help  >  Interface Topics  >  JustEdit WYSIWYG Toolbar

content courtesy of OU Campus support site

Overview

When entering JustEdit, users will encounter the JustEdit toolbar, which has a variety of functions available in order to make editing the page easier.

The icons present on the toolbar represent every available function to the user. Clicking on any icon performs an action, either directly to the page, or to the selected text and graphics. Some icons display more options in a drop-down menu fashion, or in a pop-up window display.

The availability of a function is based on the selected items, or the location of the cursor on the page. For example, if nothing is selected, functions such as Insert Link are dimmed, signifying that this function is not available at the moment. For the Insert Link function button to be available, the user must first select text or a graphic.

In many cases, right-clicking offers contextual functions. For example, right-clicking within a table provides a list of available table editing and formatting functions. Additionally, commonly used keyboard shortcuts are available (such as Ctrl-X, Ctrl-C, and Ctrl-V for cut, copy, and paste respectively).

Level 10 administrators can create custom toolbars to determine the items available in the WYSIWYG, which can then be assigned to users, sites, directories, pages, and editable regions.

JustEdit Toolbar

A brief description of each icon's functionality can be found in the tables below. Some icons may also have additional support site pages devoted to their functions. In that event, a link to the correspondent page on the support site is provided.

The tools are grouped on this page as follows:

Row 1

Row 2

Row 1

File Tools (Save, Save As, Revert, Restore)

Icon Tool Description
Save icon Save

Click on the Save icon to save the current file on the staging server and exit JustEdit. Remember, it will not be live on the production server until it is published. To save in place, use the keyboard shortcut CTRL+S for Windows or CMD+S for Mac.

Exit Without Saving icon  Exit Without Saving

Exits JustEdit without saving changes.

Restore Last Draft icon Restore Last Draft

Click on the Restore Last Draft icon to restore the content to its last auto-saved point. For more information visit OmniUpdate's OU Campus Auto Draft page.

Cut, Copy, Paste

Icon Tool Description
Cut icon Cut

To remove content from the document, highlight the content and click the Cut icon. The keyboard shortcut is CTRL+X for Windows and CMD-X for Mac.

Many browsers (specifically Firefox, Chrome, and Safari) disable the use of the cut, copy, and paste commands in the JustEdit toolbar for security purposes. This is not a function of OU Campus; this is a browser behavior. The alternative workaround is to use keyboard shortcuts.

Copy icon Copy

To copy a content from the page, highlight the content and click the Copy icon. The keyboard shortcut is CTRL+C for Windows and CMD-C for Mac.

Many browsers (specifically Firefox, Chrome, and Safari) disable the use of the cut, copy, and paste commands in the JustEdit toolbar for security purposes. This is not a function of OU Campus; this is a browser behavior. The alternative workaround is to use keyboard shortcuts. 

Paste icon Paste

To paste content on to a page, click the location the content should be placed on the page and click the Paste icon. The keyboard shortcut is CTRL+V for Windows and CMD-V for Mac.

This pastes only valid content, code, and styling and will remove any invalid styling from Microsoft Word automatically. The Paste function always cleans up the content to be pasted to remove any formatting or code that is not compliant with the requirements of the JustEdit Editor.

Many browsers (specifically Firefox, Chrome, and Safari) disable the use of the cut, copy, and paste commands in the JustEdit toolbar for security purposes. This is not a function of OU Campus; this is a browser behavior. The alternative workaround is to use keyboard shortcuts. 

Paste as Plain Text icon Paste as Plain Text

To paste as plain text, click the Paste as Plain Text icon. The icon stays selected until clicked again, and all pastes going forward until exiting the JustEdit Editor will be plain text, which removes all formatting.

Find and Replace

Icon Tool Description
Find and Replace icon Find and Replace

Click the Find and Replace icon to search for text on the current page then replace that text with other text.

Undo/Redo

Icon Tool Description
Undo icon Undo

Click the Undo icon to undo the last changes made in this session one by one. The keyboard shortcut for this action is CTRL+Z for Windows and CMD+Z for Mac.

Redo icon Redo

Click on the Redo icon to redo changes that were previously undone and should be restored. The keyboard shortcut for this action is CTRL+Y for Windows and CMD+Y for Mac.

Spell Check

Icon Tool Description
Spellcheck icon Spellcheck

Click the Spellcheck button to check the spelling of the editable region. Misspelled words are underlined with a red line. Clicking on the word will bring up the following options:

  • A list of suggested words from the dictionary to choose from
  • Add the word to the custom dictionary (this is activated by default for level 9 and 10 administrators, and level 10 administrators can activate this setting for lower-level users if desired)
  • Ignore the word
  • Ignore all instances of that word in the editable region

The drop-down menu on this icon lists the available languages for which to run the spellcheck.

For more information about the custom dictionary, visit the Custom Dictionaries page on OmniUpate.com.

Clear Formatting

Icon Tool Description
Clear Formatting icon  Clear Formatting

To remove all formatting for a selection, highlight the text to be updated and click the Clear Formatting icon. This returns the selected text back to the default settings.

Font Formatting

Icon Tool Description
Bold icon Bold

Applies bold formatting to selected text.

Italic icon Italic

Applies italicized formatting to selected text.

Underline icon Underline

Applies underlined formatting to selected text.

Please note that underlined text usually means that a word or phrase is a link to another web page. In this case however, the underline formatting does not create a link (to create a link, click Insert/Edit Link).

Strikethrough icon Strikethrough

Applies strikethrough formatting to selected text.

Lists, Indents

Icon Tool Description
Bulleted List icon  Bulleted list

Turns the selected text into an bulleted list. Example:

  • Apples
  • Oranges
  • Bananas
Numbered List icon  Numbered list

Turns the selected text into a numbered list. Example:

  1. Click the Go button.
  2. Enter the text to search on.
  3. Click Start.
Decrease Indent icon  Decrease Indent

To decrease the indent of a paragraph, click the Decrease Indent tool. Each consecutive click moves text further to the left.

Increase Indent icon Increase Indent

To increase the indent of a paragraph, click the Increase Indent icon. Each consecutive click moves text further to the right.

Blockquote icon Blockquote

Blockquote is a block-level element in HTML that can be used to set off quotations or to cite material.

Superscripts and Subscripts

Icon Tool Description
Superscript icon Superscript

Formats the selected text as superscript text.

Subscript icon Subscript

Formats the selected text as subscript text.

Text Alignment

Icon Tool Description
Align Left icon Align Left

Aligns a block-level element such as a paragraph or a heading to the left margin.

Align Center icon Align Center

Center aligns a block-level element such as a paragraph or a heading within the left and right margin.

Align Right icon Align Right

Aligns a block-level element such as a paragraph or a heading to the right margin.

Justify icon Justify

Justifies text making it flush on both the left and right side

Link Tools

Icon Tool Description
Insert/Edit Link icon Insert/Edit Link

To create a hyperlink:

  1. Select the text or image for the link.
  2. Click the Insert/Edit Link icon.
  3. Enter the external URL or click the Browse icon to select an internal page to which to link.
  4. After locating the file, click Select.
  5. Enter in the Text to display and the Title for the link.
  6. Click Insert.

Optionally, a target window type and a class can also be entered.

To edit a hyperlink, click on the text or image that is linked and then click the icon. The same modal will appear and the values can be edited.

 

If Dependency Manager has been enabled for the account, dependency tags instead of URLs are shown in the URL inserted into the source of the page when inserting an internal link.

Remove Link icon  Remove Link

Select a link in the editable region and click the Remove link icon to remove a hyperlink.

Note: For anchors, the Remove Link icon works with anchors in Internet Explorer. It will not work on anchors in Firefox, Safari, or Chrome.

Insert/Edit Mailto icon Insert/Edit Mailto Link

To create a mailto link, select the text or image for the link, then click the Insert/Edit Mailto Link icon. In the resulting modal, users may enter the email address and default subject of the email, as well as setting a Class for the mailto link. 

To edit a mailto link, click on the text or image that is linked and then click the icon. The same modal will appear and the values can be edited.

Anchor icon Insert/Edit Anchor

To create an anchor:

  1. Position the cursor where the anchor should be placed or select the text or image.
  2. Click the Insert/Edit Anchor icon.
  3. In the Name field, enter the name for the anchor. the hash mark (#) is generated automatically.
  4. Click OK.

To modify an existing anchor:

  1. Click the existing anchor shown in the editing area.
  2. Click the Insert/Edit Anchor icon on the toolbar.
  3. Edit the name of the anchor and click OK.

The specifics of valid anchor names can be found in the HTML specifications:

Help Icon

Icon Tool Description
Help icon Help  The Help icon displays a window with references for all visible icons in the JustEdit toolbar. This page is sensitive to access settings and custom toolbars, and only the icons visible in the current user's toolbar will be visible in the Help window.

Row 2

Font Properties (Family, Size, Paragraph, Formats)

Icon Tool Description
Font Family drop-down menu Font Family

This Font Family drop-down menu displays a list of the standard fonts recognized by most web browsers. To change the font of existing text, select the text and choose a font from the drop-down list. To start typing new text with a specific font, position the cursor where text where the text should be inserted and select a font from the drop-down list, then begin typing. Note that the appearance in the JustEdit Editor may not reflect the newly applied styling, but will appear correctly in Preview and on production. To resume typing in the default font, click on the font family in the drop-down list again and continue typing. The text shown in the drop-down should change from the selected font family back to "Font Family."

The markup is added as a span; for example:

<span style="font-family: 'book antiqua', palatino;">on the bright plume</span>

Font Sizes drop-down menu Font Sizes

This Font Sizes drop-down menu changes the size of selected text. Font size properties are configured by administrators. To start typing new text with a specific font size, position the cursor where text is to be inserted, select a size from the drop-down list, then begin typing. Users can also change the font size by highlighting existing text and selecting a size from the list.

To resume typing in the default size, click on the drop-down menu and click on the selected size. The font size will return to default.

The markup is added as a span; for example:

<span style="font-size: x-large;">&nbsp;This is a font size application.</span>

Paragraph drop-down menu Paragraph

The Paragraph drop-down menu lists the block-level styles that can be applied to a selected paragraph including headings. To apply an element from the Paragraph drop-down, click within the paragraph (or select text), and then click the element from the drop-down.

Styles drop-down menu  Styles

The Styles drop-down menu lists the custom CSS styles made available to the page. To apply an element from the Styles drop-down menu, highlight text in the WYSIWYG Editor and click the element from the drop-down.

Text Color, Text Background

Icon Tool Description
Select Text Color icon  Text Color

The Text Color drop-down menu gives users the ability to change the text color. The palette comes with 40 pre-defined colors by default. To begin typing with a color, place the cursor where new text is to be placed, select a color from the drop-down menu, and begin typing. Alternatively, users can select text and apply color by highlighting the text and selecting a color.

Select Background Color icon  Background Color

The Background Color drop-down menu gives users the ability to change the background color. The palette comes with 40 pre-defined colors by default. To begin typing with a specific background color, place the cursor where new text is to be placed, select a color from the drop-down menu, and begin typing. Alternatively, users can select text and apply a background color by highlighting the text and selecting a color.

Images/Video

Icon Tool Description
Insert/Edit Image icon Insert/Edit Image

The Insert/Edit Image icon allows users to insert an image on  a page by browsing for a previously uploaded image or using the Upload/Upload and Edit features to upload and then place an image. Clicking the icon will bring up a modal where users can alter the dimensions, description, tooltip, class, alignment, and more of the image.

More information about the Image Editor can be found on the Image Editor page on OmniUpdate.com.

Insert/Edit Video icon Insert/Edit Video

The Insert/Edit Video tool allows users to insert a video on a page by pasting a link from a video hosting site such as YouTube or Vimeo or browsing for a video uploaded into OU Campus. Clicking the icon will bring up a modal where users can alter the dimensions of the video, provide embed code, and more.

Miscellaneous Functionality

Icon Tool Description
Horizontal Line icon Insert Horizontal Line

Adds a horizontal line to the page. This is the same as entering <hr /> into the source.

Insert Line Break icon Insert Line Break

To insert a line break, click the Insert Line break icon. This is the same as entering <br /> into the source.

Special Character icon Insert Special Character

To insert a special character such as an copyright symbol, registered trademark, or other symbol, click the Insert Special Character icon. The Special Character modal provides a selection of 200 special characters from which to choose. Hover or use the left and right keyboard arrows to navigate the selection. Clicking a character will add it to the page and close the modal.

Select Special Character modal

 Show Hide Blocks icon Show/Hide Blocks

Toggles the WYSWISYG view to show or hide block-level element labeling. Each element such as <p> or <blockquote> is displayed encapsulated with a thin border and labeled with a small tag.

For more information, visit the Show/Hide Block Elements page on OmniUpdate.com.

Source Code

Icon Tool Description
Edit Source Code icon Edit Source Code

The Edit Source Code icon allows users to view and edit the code view of the HTML source. Making changes in the Source Code modal will be reflected in the editable region immediately after clicking OK.

Assets and Snippets

Icon Tool Description
Insert Snippet icon  Insert Snippet

Click the Snippets icon in order to add preexisting snippets of HTML or text into the page. Snippets shown in the modal can be filtered and previewed before being placed on the page. The Snippets available are set by the system administrator.

More information about Snippets can be found on the Snippets page.

Insert Asset icon  Insert Asset

Click the Assets icon in order to add a preconfigured asset into the page. Assets shown in the modal can be filtered and previewed before being placed on the page.

For more information about Assets, visit the Assets page.

Table Tools

Icon Tool Description
Table drop-down menu Table Drop-Down Menu

The Table drop-down menu is entirely new in JustEdit. This icon will bring up a drop-down menu where all table properties are now found, from inserting a new table to merging cells and editing properties.

To insert a new table, hover over Insert Table and then use the mouse to hover over the correct amount of rows and columns. Clicking will create the table.

Create a New Table

Table Properties button Table Properties

Clicking this button will bring up a modal where users can modify the properties of a table. The General tab contains basic options like table dimensions, cell spacing and padding, border width, toggling a table caption, table alignment, and setting a custom CSS class for the table.

General Tab

Table Properties modal

The Advanced tab allows users to set styling for the table as well as border and background color.

Advanced Tab

Table Properties modal (Advanced tab)

Delete Table button Delete Table Clicking this button deletes the selected table.
Show Table Outlines Show Table Outlines The Show Table Outlines icon adds/removes the outlines of tables that would be invisible otherwise, for visual purposes only. These lines disappear when the editable region is saved and the page is viewed in Preview.
Table Cell menu Table Cell Options

This menu contains three options:

  • Cell Properties
  • Merge Cells
  • Split Cells

Cell Properties, when clicked, brings up a modal similar to the Table Properties modal above. Merge Cells will merge the selected cells together, and Split Cell will separate a previously merged cell into its original cells.

Table Row menu Table Row Options

This menu contains the following options:

  • Insert row before
  • Insert row after
  • Delete row
  • Row properties (bringing up a modal similar to the Cell Properties and Table Properties modals)
  • Cut row
  • Copy row
  • Paste row before
  • Paste row after
Table Column menu Table Column Options

This menu contains three options:

  • Insert column before
  • Insert column after
  • Delete column

 Maximize Content Region

Icon Tool Description
Maximize Content Region Maximize Content Region

This icon, when clicked, will expand the JustEdit editable region to fill the width of the frame window. This is particularly useful when editing table transformations, where the table is extremely wide in the Editor but the transformed content fits more nicely into the editable region on the page.