Smart Edit Mode Overview

Smart Edit Mode is the interface that allows you to interact with and modify content of pages held within Open Text. It essentially displays a copy of the Southeast website and provided access to content through editing ‘dots’. Users will only be able to make changes to content for which you have been authorized.

Using the Clipboard

In addition to the interactive red dot icons, there are a number of icons floating in panel to the right. The only one you’ll use is the third one labeled 'Clipboard'.

The clipboard makes it easy to get around inside OpenText, which is useful if you edit more than one site or would simply like to create quick references to regularly updated pages. 

There are a few ways to add new items to the clipboard, including:

• After the page content has been expanded for editing, right click within the content and select ‘Create Shortcut in Clipboard’
• Using the search tab to locate a page will add a link to the clipboard (more on this later)
• Using the search prompt visible while still on the Smart Edit tab (located in the upper right-hand corner after the ‘Log Off’ button) will also create a link within the clipboard. Shorthand search using the page ID is most affective, and follows the syntax: ‘id: 12345’ (without the ‘s). More on page IDs later.
• Once pages have been added to the clipboard, click the blue arrow icon next to the page in the list to open that page in SmartEdit. Icons above the clipboard page list allow you to refresh, select/deselect all, and remove items from the clipboard.
• To toggle the display of these panels, click the clipboard icon within the panel to collapse/expand it. To hide the panel completely, click the ‘Hide/Display Panels’ button just under the ‘Setting, Help, and Logoff’ links in the upper right-hand corner of the page.

User Settings

Near the previously mentioned Search box is a Settings link. Click Settings, then User Settings to display a set of options for your user account. Here you can change your name, email address, department (in the ‘Description’ field), and can also change the assigned Text Editor. Your password is imported with your SE Key and cannot be modified here.         

You can change the active text editor using the ‘preferred text editor’ drop-down menu. The default editor (labeled project default) is tinyMCE, which is preferred for functionality. However, in certain circumstances you may want to use the ‘Telerik Rad Editor’. No other text editor displayed in this list is supported and therefore should not be used.

Accessing Editable Content

When viewing a page in Smart Edit mode, a number of red dots can be seen on the page. These dots represent editing access points, and indicate the location of content that can accessed for editing. On any given page, there will be a red dot with an arrow pointing down and right inside of it labeled [Expand Content Editing Options]. This indicates a ‘container’ that can be expanded for further editing. The dot will typically be closest to the content it references.

Clicking [Expand Content Editing Options] reveals a [Collapse Content Editing Options] for closing the page, and an [Edit Content] dot which will open the text editor. As well, a green dotted outline typically appears indicating the extremities of the content that can be edited within this expanded content field. Any items external to this green box must be edited elsewhere.

Page Teaser

Most pages will also contain a dot labeled [Expand Base Page Editing Options], which will allow you to modify the Page Teaser field for that page. The Page Teaser is the descriptive text that displays after a dynamically generated link to that page.  If you see text displayed after a link that you can’t figure out how to edit, it’s probably a page teaser.

Direct-Edit Mode

To make simple text revisions, [Ctrl]+[left-click] on the content dot to enable Direct-Edit mode. After activating this editing mode, you can make changes to the text directly from this page, then click the same red dot (now displaying a checkmark icon) to apply the changes. To leave Direct-Edit mode without saving changes, press the [Esc] key.

Editing Content in the Text Editor

To access the text editor and make changes to content:

1. Click the empty red dot that appears closest to the content you want to change after the [Expand Content Editing Options] dot has been expanded.
2. A new window will appear containing the text editor and contents of the element you chose to edit. Depending on the currently selected text editor the toolbar displayed at the top may vary, but most of the tools are similar to other word processing programs such as Microsoft Word.

Text-Formatting

The ability to format text is intentionally limited to keep pages consistent with the university brand and style guide. Proper use of the formatting tools is necessary to create a visually appealing flow of content. In the text editor toolbar, there is a drop-down menu that provides the optional text formatting styles . As you move your cursor around the content in the editor, you will notice the text displayed in this drop-down menu changes to reflect the currently applied style at the cursor’s location.

Font Format

The styles listed in this drop-down menu are the preset styles that can be used to format text on the page. They follow a hierarchal structure, beginning with Heading 3 (H3), down through Heading 6 (H6), then Paragraph. H1 & H2 are reserved by the site header elements. In addition to creating a clean visual structure for the page, formatting content this way also develops a structural outline of the page

Remove Formatting

Remove Formatting will strip all formatting from the selected content. Sometimes, clearing all old formatting and starting over is the quickest route to clean up a poorly formatted page.

Selecting Text

Selecting text with your mouse often results in an overlapping selection of whitespace, which can cause formatting confusion for any text editor, and in our circumstance will likely create nested formatting tags. For this reason, it’s best to use the [Shift] key combined with the [left-arrow] or [right-arrow] keys to make a text selection. Holding the Shift key while moving the arrows will allow you to control each individual character in the selection, and will result in cleaner formatting.

Line Breaks

There are different ways to perform a line break, but how do they differ and how/when should they be used? The following helps to an explain of the different methods available.

• [Enter] = New Paragraph (double space)
  Each new paragraph should begin with a single ‘Enter’ key, which will produce a double space.

• [Shift]+[Enter] = Line Break (single space)
  Avoid using line breaks to separate paragraphs; follow the rule for paragraphs above. Line breaks should be used for content that belongs within an individual paragraph block but requires visual separation.

• [Shift]+[Enter] + [Shift]+[Enter] Does Not Create a New Paragraph
  Two line breaks next to each other may look the same as a paragraph break, but are treated differently by the browser. To test this, place your cursor at the beginning of a paragraph, and press the [Left-arrow] key. If your cursor jumps up to the end of the previous paragraph, the paragraph break was used correctly. If the cursor moves to the blank line between paragraphs, this indicates that two line breaks are present instead of a paragraph break. To resolve this, simply [Backspace] from the beginning of the second paragraph up the end of the previous paragraph, and press the [Enter]key for a proper double-spaced paragraph break.

Bullets & Lists

Ordered (Numerical/Alphabetical) Lists

An ordered list should only be used for items that must be listed in a particular logical sequence.

Unordered (Bulleted) Lists

Unordered lists are the most commonly used, and should be used if the order of the items in the list does not matter and could be randomized.

Tables

Tables have a history in web design as a structural element, but new standards require that they only be used to contain and structure tabular data. Basically, this means content should only be placed into a table if it could be otherwise structured within an Excel spreadsheet. Tables should never be used to structure images or paragraphs within a page.

Links

Links are created to reference a number of different sources of content, but regardless of the target it is important to consider the appropriate text for the link. Avoid phrasing like ‘Click here to access the application’, as the link provides no information to the reader at a glance. Instead, try to incorporate the file description or name into the link, as indicated by the following italicized text: ‘Prospective international students can apply to Southeast by submitting a copy of the International Student Application for Admissions to our office.’ 

To create a new link, carefully highlight text to use for the link and click the ‘Insert/Edit Link’ button. The type of link you’re wanting to create will determine what to do next:

External Links

To create a link to an external website, simply copy/paste or type the entire web address (including http://) into the ‘Link URL’ field. This is how you will link to any external page that does not begin with www.semo.edu. Click the Insert button to create the link.

Internal Links

Internal links should be established by referrencing the pageID for a page. To create a link to an internal website that is contained within Open Text (this is anything that is within www.semo.edu):

1. Click the ‘Reference Page’ link and a page will open with search options.
2. Near the bottom is a drop-down menu labeled ‘Page ID’ with a green plus icon next to it.
3. Click the green plus, and a new field will appear that will accept the page ID for the desired page. Enter the page ID for the desired page, and click the ‘Start’ button in the bottom-right of the window.

4. Your search should return only one result, as each page has its own unique ID . Click on the headline link for the page to select it. If done properly, the ‘Insert/Edit Link’ window will reappear with ‘[ioID]’ string listed in the Link URL (default text editor), or in Telerik Rad Editor, the page headline will be displayed instead.

5. To locate the page ID for any page, look in the footer of that page. Different templates may display the page ID differently, but it will always be the integer located near to the copyright information.

Links to PDFs & Other Documents

To create a link to a PDF or other document, click the ‘Asset Managers’ tab, and select the ‘_Media – PDF & Documents’ gallery from the Asset Managers drop-down menu. Click ‘Browse Server’.

Images

Images can be inserted into the content of your page by clicking the ‘Insert/Edit Image’ button. A new window appears, which will display as follows depending on the current text editor:

1. In the default text editor (tinyMCE),click the ‘Asset Managers’ tab at the very top-right of the new window. Select ‘_Media – Images’ from the Asset Managers drop-down menu, and click ‘Browse Server’ button.
   OR
   In Telerik Rad Editor, click the ‘Select’ button next to the field labeled ‘File:’. Then, click ‘Select Asset from Media Gallery’, and select ‘_Media – Images’ from the list, and click ‘Ok’.
2. Now, you should be looking at the ‘_Media – Images’ media gallery. Select the photo you wish to use by clicking the file name. (Clicking the thumbnail will open a preview of the image).
3. After selecting the image, details will appear in the panel to the right.
4. Click ‘Ok’ to accept the currently selected image as the one you wish to place on the page.
5. Before closing the final window, fill out the ‘Image Description’ (‘Alternate Text’ in Telerik Rad Editor) field with a description of the photo. This field is used to describe the image to users with screen reader software, and is required for compliance with the Americans with Disabilities Act. 
6. Click ‘Ok’ again to close the remaining window, and the selected image will appear on the page.

Saving Changes

Save your changes before closing the text editor by clicking the ‘Save’ disk icon in the toolbar. (default editor, tinyMCE). For Telerik Rad Editor, click the ‘Save’ button to save and continue editing, or click the ‘Ok’ button to save and close the editor. Closing the window without saving will prompt you to save your changes before closing the window.