JustEdit. Overview. Path Status Bar

Transcription

1 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 This page contains the following sections: Path Status Bar Differences Between JustEdit Toolbar and WYSIWYG Toolbar Icon Changes and Consolidations New Modals Notable Deletions Keyboard Shortcuts Using the Old WYSIWYG Editor Editing Include Files with JustEdit Configuring JustEdit 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. OU Campus JustEdit Page 1 of 13

2 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.classname 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 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 Insert Anchor 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. Simple icon change. Clicking this icon allows users to insert or edit an OU Campus JustEdit Page 2 of 13

3 Function Old Icon(s) New Icon(s) Description Paragraph and Styles drop-down menus Show/Hide Guidelines/ Invisible Elements; Show/Hide Block Elements Insert Special Character Assets anchor where the cursor is currently located. 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 dropdown menu in the standard WYSIWYG Editor (headings and other block-level text formats). The new Formats dropdown 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. Simple icon change. Clicking this icon adds/ removes the outlines of tables and other elements that would be invisible otherwise, for previewing purposes only. Simple icon change. Clicking this icon brings up the Special Character modal, where users can insert special characters easily. Simple icon change. The icon has been changed to the same icon that represents Assets throughout the OU Campus JustEdit Page 3 of 13

4 Function Old Icon(s) New Icon(s) Description Snippets Table Tools and all other tablerelated icons rest of OU Campus. The Select Asset modal has also been updated to be more consistent with other filechoosers in OU Campus. Simple icon change. The icon has been changed to the same icon that represents Snippets throughout the rest of OU Campus. The Choose Snippet modal has also been updated to be more consistent with other filechoosers in OU Campus. 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 dropdown 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 OU Campus JustEdit Page 4 of 13

5 Function Old Icon(s) New Icon(s) Description 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. Insert/Edit Link: The Popup and Events tabs have been removed. OU Campus JustEdit Page 5 of 13

6 Insert/Edit Mailto Link: The modal has been simplified. 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. OU Campus JustEdit Page 6 of 13

7 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. OU Campus JustEdit Page 7 of 13

8 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. OU Campus JustEdit Page 8 of 13

9 Assets: This modal has been reworked to deliver functionality, look, and feel that is consistent with the rest of OU Campus. OU Campus JustEdit Page 9 of 13

10 Table Properties: This modal has been simplified, with fewer properties in the Advanced tab. OU Campus JustEdit Page 10 of 13

11 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. OU Campus JustEdit Page 11 of 13

12 Editing Include Files in JustEdit 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. 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 peruser basis by the users themselves. This drop-down menu is found at the bottom of the General Settings panel. OU Campus JustEdit Page 12 of 13

13 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. OU Campus JustEdit Page 13 of 13