Setup Toolbars

Overview

Setup Toolbars gives the administrator the ability to create custom WYSIWYG toolbars or edit existing toolbar configurations. Having custom toolbars allows an administrator to make specific functionality available on a certain toolbar and in turn assign the toolbar to a user or region. This helps restrict the type of changes a user can make to content.

For example, if users should not be able to change the font family or font sizes of text, a toolbar can be created that does not include the Font Family and Font Size drop-downs. It can then be assigned to a directory, user, page, or even an editable region. Likewise, if an editable region is used in which a user should only be allowed to insert a video, then a toolbar can be created that only includes the Insert/Edit Embedded Media. The toolbar is then assigned to that editable region. One common use of a customized toolbar is to limit the editing options of an include file, such as that which is used for a navigation file.

The Toolbars screen can be accessed from the global navigation menu by selecting Setup > Toolbars.

Toolbars in the Setup Menu

Customized toolbars are created and edited from the Toolbars screen. Assigning them can be accomplished via access settings or can be part of a template.

Toolbar Setup Screen

The Toolbars screen includes the following features and functionality:

  • Indicates the number of toolbars
  • Toolbars can be filtered
  • New toolbars can be created
  • Toolbars can be sorted by name
  • Multiple toolbars can be selected and deleted en masse
  • A toolbar can be edited by clicking the linked toolbar name, selecting the adjacent checkbox, or hovering over the toolbar row and clicking Edit
  • A toolbar can be created by copying an existing toolbar
  • A singular toolbar can be deleted by hovering over the row and clicking Delete

Creating a New Toolbar

The WSIWYG toolbars are organized into three rows, each with unique tool groups. These tool groups are displayed in the toolbar, separated by a vertical line. Certain tools included in the toolbar may appear dimmed or unavailable. These tools require prior on-screen actions to be performed before the tool becomes available. For instance, when creating a hyperlink, a user must first highlight the text from which they wish to link before being able to click the hyperlink tool.

For more information, visit the Toolbar Reference page.

Any number of new toolbars can be created as necessary, and after creation they are available for assignment to a user or specific region. On the New Toolbar screen, a preview is displayed at the top of the screen. Under the Settings panel, the Buttons section shows all of the available tools that can be added to the toolbar. Each tool can be enabled or disabled by selecting the checkbox under the corresponding tool icon. The Options section is designated for additional functionality, such as how information is pasted into the WYSIWYG Editor.

Names can contain:

  • Lowercase letters
  • Uppercase letters
  • Numerals 0 through 9 (inclusive)
  • Underscores  _
  • Hyphens -
  • Spaces 
  • Periods .

Names must:

  • Be a minimum of two characters in length

Names must not:

  • Be an empty string
  • Be greater than 32 characters in length
  1. To create a new toolbar, navigate to the Toolbars screen and click the New button. The Preview panel displays the toolbar as it appears using TinyMCE3, which is the style of the standard WYSIWYG Editor . However, when the custom toolbar is used on a page in OU Campus, it will respect the display options for the user (i.e., if a user uses JustEdit or the standard WYSIWYG Editor).New Toolbar Creation Screen
  2. From the Settings panel, enter the name in the Toolbar Name field. 
  3. Under the Buttons section, select the checkbox for each tool to include on the toolbar. Clear a checkbox to remove it from the toolbar. Note that Select All adds every tool to the toolbar, while Deselect All removes every tool from the toolbar.New Toolbar Creation Screen
  4. Select any Options that are necessary. The two additional options that are available are:
    • Font Size Set: Any configured Font Size Sets are available to add to the toolbar.
    • Paste: The paste option determines how a user can paste information into the  WYSIWYG Editor.
    New Toolbar Creation Screen
  5. Click Create to finalize the creation. The system displays a message at the bottom of the screen indicating the successful creation of the toolbar. The toolbar is now shown in the Toolbars list view.

Paste Options

Paste options control which buttons for pasting content are available on the toolbar for use within the WYSIWYG Editor.

The first option creates two paste buttons, Paste and Paste as Plain Text. The first removes the MSO formatting from content pasted from Microsoft Office, and, when pasting from content copied from a web page, the paste retains valid content, code, and styling for HTML. The second button, when activated in the WYSIWYG, removes formatting and pastes plain text only.

The second option will show only the Paste as Plain Text Only tool. 

Editing a Toolbar

To modify an existing toolbar:

  1. Navigate to Setup > Toolbars.
  2. Hover over the page row and select Edit.
  3. Make any necessary changes and click Save. The system displays a success message at the bottom of the screen.

Deleting a Toolbar

Deleting a toolbar removes it from the database and removes the toolbar from any access settings to which it was assigned. For example, deleting a toolbar that had been assigned to a specific page removes it as being the toolbar used for editing that page. Any access setting that has a deleted toolbar automatically uses the default setting, which is to inherit from parent. To delete a toolbar:

  1. Navigate to Setup > Toolbars.
  2. Hover over a toolbar row and select Delete.

    Delete Toolbar
  3. A dialog box will appear asking the user to confirm or cancel deletion. Select Delete. The system displays a success message at the bottom of the screen.

Assigning a Toolbar

Normally, it can be helpful to assign toolbars to users based upon skill level and permissions. However, there are occasions when a toolbar is more appropriate for a page, or in many cases solely for an editable region such as a sidebar or navigation element.

When a toolbar is being assigned via the access settings, it is important to understand that the setting closest to the content takes precedence. The order of precedence, from least to greatest, is:

  • User 
  • Site
  • Directory
  • Page
  • Editable Region 

Assigning a Toolbar to a User

After a toolbar has been created, it can be assigned to one or more users. When a toolbar is assigned to a user, and a different toolbar is assigned to a page, the page setting takes precedence over the user setting. A Level 10 administrator can assign a toolbar to an individual user. Assignments to a user are account-wide. To assign a toolbar to a user:

  1. Navigate to Setup > Users.
  2. From the users list, hover over the user row and select Edit. Additionally, clicking on the username in the row item will allow the administrator to edit the toolbar settings.
  3. From the Restrictions panel > Toolbar drop-down, select the toolbar to assign to the user.

    Setting User Toolbar Permissions

  4. Select Save.

Assigning a Toolbar to a Site or Directory

A toolbar assigned from the access settings for a site overrides any toolbars specified at the user level, but is overriden by any toolbar specified for a specific folder, page, or editable region. Content created within a directory with a toolbar defined by the access setting will inherit the directory setting unless overriden by a setting closer to the content. When assigning a toolbar at the site or directory level, the changes can also be made recursively. If not assigned, the default is to inherit the parent setting

  1. Navigate to Setup > Sites or to the directory.
  2. Hover over the site row and from the Edit menu, select Site Access. For a directory, from the Edit menu, select Access.
  3. The change in toolbar assignment may be made recursive by choosing Apply Selected Settings to All Existing Files and Folders in the Site (or Directory). Applying a setting recursively applies the change to all existing files and subdirectories as well as to those that will be created new. Otherwise, changes are only applied to content created going forward. This does not override a toolbar assignment made with an attribute on an editable region.
  4. From the Toolbar drop-down, choose the toolbar.
  5. Click Save.

Assigning a Toolbar to a Page

  1. To assign a toolbar to a specific page or directory:
  2. Navigate to the Pages list view in Content > Pages.
  3. Hover over the page row and from the Edit menu, select Access.
  4. From the Page Access Settings dialog, select the toolbar from the Toolbar drop-down.
  5. Click Save.

Assigning a Toolbar to an Editable Region

The process for assigning a toolbar to editable regions differs slightly. An editable region can be viewed in the code view of a PCF, but because editable regions are defined by an OU Campus template, the toolbar assignments of this type should be defined in the corresponding TMPL file, so that the changes for a page template can use the assigned setting. A user must be a Level 10 administrator in order to assign editable regions a specific toolbar.

  1. Navigate to the local template directory that was defined under Setup > Sites. In this example, /_resources/ou/templates is the template directory.
  2. Hover over the template row and select Edit. From the menu, select Source.

    Setting Editable Region Toolbars

  3. In the Source Editor, locate the editable region to be assigned a toolbar. An editable region using the comment style of OU tagging is surrounded by <!--com.omniupdate.div> tags as shown in this example:

    <!-- com.omniupdate.div label="twocolumn_content" group="Everyone" button="700" break="break" --><!-- com.omniupdate.editor csspath="/_resources/ou/editor/onecolumn.css"  cssmenu="/_resources/ou/editor/styles.txt" width="1050" -->
    <h2 class="h-color-link"><!--%echo var="title" --></h2>
    <!-- /com.omniupdate.div -->
  4. To define a specific toolbar, the attribute and corresponding value -- toolbar="filename" -- is included in the <!--com.omniupdate.editor> tag, where "filename" is the name of the toolbar that the administrator wishes to assign. The resulting code should look like:
    <!-- com.omniupdate.div label="twocolumn_content" group="Everyone" button="700" break="break" --><!-- com.omniupdate.editor toolbar="filename" csspath="/_resources/ou/editor/onecolumn.css"  cssmenu="/_resources/ou/editor/styles.txt" width="1050" -->
            <h2 class="h-color-link"><!--%echo var="title" --></h2>
    <!-- /com.omniupdate.div -->
  5. Click Save.
  6. Test the changes by creating a new page with the edited template.