JustEdit

Overview

JustEdit is a new way to edit content in OU Campus that allows users to edit pages without leaving the "Preview" view of the content. Editing a page using JustEdit works the same as using the normal WYSIWYG Editor; clicking on an editable region will bring up the JustEdit toolbar and the region will become available for editing.

Example of an Editable Region with JustEdit

An Editable Region Viewed With JustEdit

This page contains the following sections:

 Path Status Bar

The Path Status Bar is a feature in JustEdit that allows users to view the HTML elements that are being applied to the text at the current cursor position. The status bar is located at the bottom of the JustEdit Editor.

Path Status Bar in JustEdit

This feature is useful to see which styles and HTML tags are being applied to a certain portion of content. Clicking the relevant element name in the status bar (for example, clicking em.class-name in the screenshot above) will select the content that is wrapped by the <em> tag in the HTML. As shown above, classes and IDs that are attributes of an HTML element will also be shown in the status bar.

Differences Between JustEdit Toolbar and WYSIWYG Toolbar

Complete JustEdit Toolbar

The JustEdit interface is not just a way to edit pages more quickly; it also comes with a new WYSIWYG toolbar. Most of the functionality present in the previous toolbar remains the same, aside from a new look and feel. Other items have been reworked to deliver an enhanced user experience.

For more information about each item in the JustEdit toolbar, please visit the JustEdit Toolbar page.

Icon Changes and Consolidations

The JustEdit toolbar's new look means that many icons look slightly different. Other icons have undergone a more drastic change and some with similar functionality have been consolidated. The following table gives a breakdown of the more noteworthy changes:

Function Old Icon(s) New Icon(s) Description
Find/Find & Replace FindReplace Find and Replace Find and Find & Replace have now been condensed into one icon. Users are able to perform a simple find or a find and replace from the same icon in the same tab.
Insert Anchor Insert Anchor Insert Anchor Simple icon change. Clicking this icon allows users to insert or edit an anchor where the cursor is currently located.
Paragraph and Styles drop-down menus

Format

 

Styles

Formats
Styles
The Styles and Formats drop-down menus have been re-structured for greater functionality. The new Paragraph drop-down menu contains much of the same functionality as the Format drop-down menu in the standard WYSIWYG Editor (headings and other block-level text formats).

The new Formats drop-down menu contains a host of functionality, from headings and block-level formats to span-level formats, alignments, and any custom CSS styles called by the template being used.
Show/Hide Guidelines/Invisible Elements; Show/Hide Block Elements Show/Hide Guidelines
Show/Hide Block-Level Elements
Show/Hide Blocks Simple icon change. Clicking this icon adds/removes the outlines of tables and other elements that would be invisible otherwise, for previewing purposes only.
Insert Special Character Insert Special Character Insert Special Character Simple icon change. Clicking this icon brings up the Special Character modal, where users can insert special characters easily.
Assets Assets Insert Asset Simple icon change. The icon has been changed to the same icon that represents Assets throughout the rest of OU Campus. The Select Asset modal has also been updated to be more consistent with other filechoosers in OU Campus.
Snippets Snippets Insert Snippet Simple icon change. The icon has been changed to the same icon that represents Snippets throughout the rest of OU CampusThe Choose Snippet modal has also been updated to be more consistent with other filechoosers in OU Campus.
Table Tools TableTable Row PropertiesTable Cell PropertiesInsert Column BeforeInsert Column Beforeand all other table-related icons Table

All table-related icons have been replaced by one icon and the associated drop-down menu. Users are able to create a new table by hovering over a grid. delete a table with one click, and edit row and cell properties through the new Table drop-down menu.

For more information about the new table menu, please visit the Table Tools section of the JustEdit Toolbar page.

Table Tools Drop-Down Menu with Insert Table Popover

Insert New Table Popover

New Modals

Some commonly-used modals (the boxes that appear after a toolbar icon is clicked) have also changed to give users quicker access to the features that are needed the most and remove unnecessary confusion. Notable changes include:

  • Find and Replace: The new modal allows users to perform a simple Find or a Find and Replace from the same tab. Users must first perform a Find for the Replace and Replace all options become available.

    Find and Replace Modal
  • Insert/Edit Link: The Popup and Events tabs have been removed.

    Insert/Edit Link Modal
  • Insert/Edit Mailto Link: The modal has been simplified.

    Insert/Edit Mailto Link Modal
  • Insert/Edit Image: The Advanced tab has been removed. The Image Description field in the standard WYSIWYG Editor corresponds to the Description field in the new editor. Likewise, the Title field in the old editor corresponds to the Tooltip field in the new editor.

    Insert/Edit Image Modal
  • Insert/Edit Video: Users do not have to manual enter in the Type of the video; this is now done automatically. The Advanced tab has also been removed, and the Source tab has been renamed to Embed Code.

    Insert/Edit Video Modal
  • Snippets: This modal is all-new and displays all available snippets by default while retaining a similar look and feel to other filechooser modals in OU Campus.

    Choose Snippets Modal
  • Assets: This modal has been reworked to deliver functionality, look, and feel that is consistent with the rest of OU Campus.

    Select Asset Modal
  • Table Properties: This modal has been simplified, with fewer properties in the Advanced tab.

    Table Properties Modal

Notable Deletions

Some icons in the standard WYSIWYG Toolbar are not present in the new JustEdit Toolbar:

  • Save As
  • Revert Content to Last Saved
  • Clean Up Messy Code
  • CodeProtect Note: Pages with CodeProtect activated will be honored. The icon will not be available for use but CodeProtect will not be removed from the page.
  • WYSIWYG Forms Icons

Keyboard Shortcuts in the JustEdit Editor

Many common keyboard shortcuts are available for use in the JustEdit editor. They are as follows:

  • Ctrl (PC)/Cmd (Mac) + S: Save-in-place - saves changes to the staging server, but users will remain inside the editor to continue working.
  • Ctrl/Cmd + X: Cut
  • Ctrl/Cmd + C: Copy
  • Ctrl/Cmd + V: Paste
  • Ctrl/Cmd + Z: Undo
  • Ctrl/Cmd + Y: Redo
  • Ctrl/Cmd + B: Bold highlighted text
  • Ctrl/Cmd + U: Underline highlighted text
  • Ctrl/Cmd + I: Italicize highlighted text
  • Ctrl/Cmd + F: Opens the WYSIWYG Find and Replace tool.
  • Shift + Alt + [1-6]: Set headings -  formats currently-selected block as Heading 1-6, respectively
  • Shift + Alt + 7: Formats currently-selected block as a <p> (paragraph)
  • Shift + Alt + 8: Formats currently-selected block as a <div>
  • Shift + Alt + 9: Formats currently-selected block as an <address>
  • Shift + Enter: Creates a new line break in the current block (as opposed to creating a new paragraph, which makes a new block of text)
  • Shift + Arrow Keys: Highlights text character-by-character (if using up/down arrows, highlights by line)
  • Shift + Ctrl/Cmd + Arrow Keys: Highlights text word-by-word (up/down arrows still highlight by line)

Note: These keyboard shortcuts function even if the related toolbar icon or drop-down menu has been disabled for the user, the page, or the editable region.

Using the Old WYSIWYG Editor

If desired, users are able to access the standard WYSIWYG Editor. Users may Shift+Click on the editable region button to use the standard WYSIWYG Editor.

Editing Include Files in JustEdit

Example of a Sidenav Region Controlled by an Include

With JustEdit, users are able to edit any editable region on a page to which they have permission to edit. This commonly includes navigation elements on a page, which are typically controlled by include files. Include files are separate files from the PCF that shows the entire page. When editing a navigation region using JustEdit, the changes will not be viewed on the live site until the include file is published in addition to the page.

To publish the include file, navigate to the section in which the page resides. from the Pages list view, locate the INC file (typically, it will be named _sidenav.inc or something similar), hover over the file row, and click Publish under the Options heading.

Publish the Include File

Alternatively, Shift+Click  on the navigation element's editable region button while still on the page in question. This will take the user to the INC file via the standard WYSIWYG Editor. Then, click Publish from the Page Actions Toolbar.

Configuring JustEdit

JustEdit is first configured at the account level by Level 10 administrators. In Setup > Account, there is a JustEdit drop-down menu where administrators can set whether JustEdit is disabled, automatically enabled for all users, set on a per-user basis by administrators, or set on a per-user basis by the users themselves. This drop-down menu is found at the bottom of the General Settings panel.

Enabling JustEdit at the Account Level

If JustEdit has been set to either Set by User or Set by Administrator, then a checkbox will appear in each user's personal settings, which can be found at Settings > Users (for administrative control) or in User Settings (for individual user control). The JustEdit checkbox will be found in the Preferences panel for the user screen. Checking the box will activate JustEdit for the site for that user.

Enabling JustEdit at the User Level