JustEdit WYSIWYG Toolbar - El Camino College › administration › public... · OU Campus JustEdit...

OU Campus JustEdit WYSIWYG Toolbar of 16

JustEdit WYSIWYG ToolbarOverviewWhen entering JustEdit, users will encounter the JustEdit toolbar, which has a variety of functionsavailable in order to make editing the page easier.

The icons present on the toolbar represent every available function to the user. Clicking on anyicon performs an action, either directly to the page, or to the selected text and graphics. Someicons 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 thepage. For example, if nothing is selected, functions such as Insert Link are dimmed, signifying thatthis function is not available at the moment. For the Insert Link function button to be available, theuser must first select text or a graphic.

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

Level 10 administratorscan create custom toolbars to determine the items available in the WYSIWYG

, which can then be assigned to users, sites, directories, pages, and editable regions.

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

The tools are grouped on this page as follows:

Row 1

• Save, Exit, Restore Last Draft• Cut, Copy, Paste• Find and Replace• Undo/Redo• Spellcheck• Clear Formatting• Font Formatting• Lists, Indents• Superscripts and Subscripts• Text Alignment• Link Tools• Help Icon


Row 2

• Font Properties (Family, Size, Paragraph, Formats)• Text Color, Text Background• Images/Video• Miscellaneous Functionality• Source Code• Assets and Snippets• Table Tools• Maximize Content Region

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

Icon Tool Description

Save Click on the Save icon tosave the current file on thestaging server and exit JustEdit.Remember, it will not be live onthe production server until it ispublished. To save in place, usethe keyboard shortcut CTRL+Sfor Windows or CMD+S for Mac.

Exit Without Saving Exits JustEdit without savingchanges.

Restore Last Draft Click on the Restore Last Drafticon to restore the content to itslast auto-saved point. For moreinformation:

Auto Draft

Cut, Copy, Paste


Cut To remove content from thedocument, highlight the contentand click the Cut icon. Thekeyboard shortcut is CTRL+X forWindows and CMD-X for Mac.

Many browsers (specificallyFirefox, 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

http://support.omniupdate.com/oucampus10/pages/wysiwyg/toolbar-row-1/autodraft.html



OU Campus

; this is a browser behavior. Thealternative workaround is to usekeyboard shortcuts.

Copy To copy a content from the page,highlight the content and clickthe Copy icon. The keyboardshortcut is CTRL+C for Windowsand CMD-C for Mac.


toolbar for security purposes.This is not a function of OU Campus


Paste To paste content on to a page,click the location the contentshould be placed on the pageand click the Paste icon. Thekeyboard shortcut is CTRL+V forWindows and CMD-V for Mac.

This pastes only valid content,code, and styling and will removeany invalid styling from MicrosoftWord automatically. The Pastefunction always cleans up thecontent to be pasted to removeany formatting or code that is notcompliant with the requirementsof the JustEdit Editor.


toolbar for security purposes.This is not a function of



OU Campus


Paste as Plain Text To paste as plain text, click thePaste as Plain Text icon. Theicon stays selected until clickedagain, and all pastes goingforward until exiting the JustEditEditor will be plain text, whichremoves all formatting.

Find and Replace


Find and Replace Click the Find and Replace iconto search for text on the currentpage then replace that text withother text.

Undo/Redo


Undo Click the Undo icon to undothe last changes made inthis session one by one. Thekeyboard shortcut for this actionis CTRL+Z for Windows andCMD+Z for Mac.

Redo Click on the Redo icon toredo changes that werepreviously undone and should berestored. The keyboard shortcutfor this action is CTRL+Y forWindows and CMD+Y for Mac.

Spell Check


Spellcheck Click the Spellcheck buttonto check the spelling of theeditable region. Misspelled wordsare underlined with a red line.Clicking on the word will bring upthe following options:



• A list of suggested wordsfrom the dictionary to choosefrom

• Add the word to the customdictionary (this is activatedby default for level 9 and 10administrators, and level 10administrators can activatethis setting for lower-levelusers if desired)

• Ignore the word• Ignore all instances of that

word in the editable region

The drop-down menu on thisicon lists the available languagesfor which to run the spellcheck.

For more information aboutthe custom dictionary, visit theCustom Dictionaries page.

Clear Formatting


Clear Formatting To remove all formatting for aselection, highlight the text tobe updated and click the ClearFormatting icon. This returns theselected text back to the defaultsettings.

Font Formatting


Bold Applies bold formatting toselected text.

Italic Applies italicized formatting toselected text.

Underline Appliesunderlined

formatting to selected text.

Please note that underlined textusually means that a word orphrase is a link to another webpage. In this case however, the

http://support.omniupdate.com/oucampus10/setup/custom-dictionaries.html



underline formatting does notcreate a link (to create a link,click Insert/Edit Link).

Strikethrough Appliesstrikethrough

formatting to selected text.

Lists, Indents


Bulleted list Turns the selected text into anbulleted list. Example:

• Apples• Oranges• Bananas

Numbered list Turns the selected text into anumbered list. Example:

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

Decrease Indent To decrease the indent of aparagraph, click the DecreaseIndent tool. Each consecutiveclick moves text further to theleft.

Increase Indent To increase the indent of aparagraph, click the IncreaseIndent icon. Each consecutiveclick moves text further to theright.

Blockquote Blockquote is a block-levelelement in HTML that can beused to set off quotations or tocite material.

Superscripts and Subscripts


Superscript Formats the selected text assuperscript text.

Subscript Formats the selected text assubscript text.


Text Alignment


Align Left Aligns a block-level element suchas a paragraph or a heading tothe left margin.

Align Center Center aligns a block-levelelement such as a paragraph ora heading within the left and rightmargin.

Align Right Aligns a block-level element suchas a paragraph or a heading tothe right margin.

Justify Justifies text making it flush onboth the left and right side

Link Tools


Insert/Edit Link To create a hyperlink:

1. Select the text or image forthe link.

2. Click the Insert/Edit Linkicon.

3. Enter the external URL orclick the Browse icon toselect an internal page towhich to link.

4. After locating the file, clickSelect.

5. Enter in the Text to displayand the Title for the link.

6. Click Insert.

Optionally, a target window typeand a class can also be entered.

To edit a hyperlink, click on thetext or image that is linked andthen click the icon. The samemodal will appear and the valuescan be edited.

If Dependency Manager hasbeen enabled for the account,dependency tags instead of

http://support.omniupdate.com/oucampus9/content/dependency-manager.html



URLs are shown in the URLinserted into the source of thepage when inserting an internallink.

Remove Link Select a link in the editableregion and click the Remove linkicon to remove a hyperlink.

Note

: For anchors, the RemoveLink icon works with anchors inInternet Explorer. It will not workon anchors in Firefox, Safari, orChrome.

Insert/Edit Mailto Link To create a mailto link, selectthe text or image for the link,then click the Insert/Edit MailtoLink icon. In the resulting modal,users may enter the emailaddress and default subject ofthe email, as well as setting aClass for the mailto link.

To edit a mailto link, click on thetext or image that is linked andthen click the icon. The samemodal will appear and the valuescan be edited.

Insert/Edit Anchor To create an anchor:

1. Position the cursor wherethe anchor should be placedor select the text or image.

2. Click the Insert/EditAnchor icon.

3. In the Name field, enter thename for the anchor. thehash mark (#) is generatedautomatically.

4. Click OK.

To modify an existing anchor:

1. Click the existing anchorshown in the editing area.

2. Click the Insert/Edit Anchoricon on the toolbar.



3. Edit the name of the anchorand click OK.

The specifics of valid anchornames can be found in the HTMLspecifications:

• HTML 4.01• HTML 5

Help Icon


Help The Help icon displays a windowwith references for all visibleicons in the JustEdit toolbar.This page is sensitive to accesssettings and custom toolbars,and only the icons visible in thecurrent user's toolbar will bevisible in the Help window.

Row 2Font Properties (Family, Size, Paragraph, Formats)


Font Family This Font Family drop-downmenu displays a list of thestandard fonts recognized bymost web browsers. To changethe font of existing text, selectthe text and choose a font fromthe drop-down list. To start typingnew text with a specific font,position the cursor where textwhere the text should be insertedand select a font from the drop-down list, then begin typing.Note that the appearance in theJustEdit Editor may not reflectthe newly applied styling, butwill appear correctly in Previewand on production. To resumetyping in the default font, click onthe font family in the drop-downlist again and continue typing.The text shown in the drop-down

http://www.w3.org/TR/html401/struct/links.html

http://www.w3.org/TR/html5-diff/

should change from the selectedfont family back to "Font Family."

The markup is added as a span;for example:

on the brightplume

Font Sizes This Font Sizes drop-down menuchanges the size of selectedtext. Font size properties areconfigured by administrators.To start typing new text witha specific font size, positionthe cursor where text is to beinserted, select a size from thedrop-down list, then begin typing.Users can alsochange the font size by

highlighting existing text andselecting a size from the list.

To resume typing in the defaultsize, click on the drop-downmenu and click on the selectedsize. The font size will return todefault.

The markup is added as a span;for example:

 Thisis a font sizeapplication.

Paragraph The Paragraph drop-downmenu lists the block-levelstyles that can be applied to aselected paragraph includingheadings. To apply an elementfrom the Paragraph drop-down,click within the paragraph (orselect text), and then click theelement from the drop-down.

Styles The Styles drop-down menu liststhe custom CSS styles made



available to the page. To applyan element from the Styles drop-down menu, highlight text in theWYSIWYG Editor and click theelement from the drop-down.

Text Color, Text Background


Text Color The Text Color drop-down menugives users the ability to changethe text color. The palette comeswith 40 pre-defined colors bydefault. To begin typing with acolor, place the cursor wherenew text is to be placed, select acolor from the drop-down menu,and begin typing. Alternatively,users can select text and applycolor by highlighting the text andselecting a color.

Background Color The Background Color drop-down menu gives users theability to change the backgroundcolor. The palette comes with40 pre-defined colors by default.To begin typing with a specificbackground color, place thecursor where new text is to beplaced, select a color from thedrop-down menu, and begintyping. Alternatively, userscan select text and apply abackground color by highlightingthe text and selecting a color.

Images/Video


Insert/Edit Image The Insert/Edit Image iconallows users to insert an imageon a page by browsing for apreviously uploaded image orusing the Upload/Upload andEdit features to upload andthen place an image. Clickingthe icon will bring up a modal

where users can alter thedimensions, description, tooltip,class, alignment, and more of theimage.

More information about theImage Editor can be found onthe Image Editor page.

Insert/Edit Video The Insert/Edit Video tool allowsusers to insert a video on a pageby pasting a link from a videohosting site such as YouTube orVimeo or browsing for a videouploaded into OU Campus. Clicking the icon will bring up amodal where users can alter thedimensions of the video, provideembed code, and more.

Miscellaneous Functionality


Insert Horizontal Line Adds a horizontal line to thepage. This is the same asentering <hr />

into the source.

Insert Line Break To insert a line break, click theInsert Line break icon. This is thesame as entering intothe source.

Insert Special Character To insert a special charactersuch as an copyright symbol,registered trademark, or othersymbol, click the Insert SpecialCharacter icon. The SpecialCharacter modal providesa selection of 200 specialcharacters from which to choose.Hover or use the left and rightkeyboard arrows to navigate theselection. Clicking a characterwill add it to the page and closethe modal.

http://support.omniupdate.com/oucampus10/pages/edit/image-editor.html

Show/Hide Blocks Toggles the WYSWISYG view toshow or hide block-level elementlabeling. Each element suchas or <blockquote> isdisplayed encapsulated with athin border and labeled with asmall tag.

For more information,visit the Show/Hide BlockElements page.

Source Code


Edit Source Code The Edit Source Code iconallows users to view and edit thecode view of the HTML source.Making changes in the SourceCode modal will be reflected inthe editable region immediatelyafter clicking OK.

Assets and Snippets


Insert Snippet Click the Snippets icon in orderto add preexisting snippets ofHTML or text into the page.Snippets shown in the modal canbe filtered and previewed beforebeing placed on the page. TheSnippets available are set by thesystem administrator.

More information aboutSnippets can be found onthe Snippets page.

http://support.omniupdate.com/oucampus10/pages/wysiwyg/toolbar-row-2/show-elements.html

http://support.omniupdate.com/oucampus10/pages/wysiwyg/toolbar-row-2/show-elements.html

http://support.omniupdate.com/oucampus10/reusable-content/snippets/index.html



Insert Asset Click the Assets icon in order toadd a preconfigured asset intothe page. Assets shown in the modal canbe filtered and previewed beforebeing placed on the page.

For more information aboutAssets, visit the Assets page.

Table Tools


Table Drop-Down Menu The Table drop-down menu isentirely new in JustEdit. This iconwill bring up a drop-down menuwhere all table properties arenow found, from inserting a newtable to merging cells and editingproperties.

To insert a new table, hover overInsert Table and then use themouse to hover over the correctamount of rows and columns.Clicking will create the table.

Table Properties Clicking this button will bringup a modal where users canmodify the properties of a table.The General tab contains basicoptions like table dimensions,cell spacing and padding, borderwidth, toggling a table caption,table alignment, and setting acustom CSS class for the table.

General Tab

http://support.omniupdate.com/oucampus10/reusable-content/assets/index.html



The Advanced tab allows usersto set styling for the table as wellas border and background color.

Advanced Tab

Delete Table Clicking this button deletes theselected table.

Show Table Outlines The Show Table Outlines iconadds/removes the outlines oftables that would be invisibleotherwise, for visual purposesonly. These lines disappearwhen the editable region issaved and the page is viewed inPreview.

Table Cell Options This menu contains threeoptions:

• Cell Properties• Merge Cells• Split Cells



Cell Properties, when clicked,brings up a modal similar to theTable Properties modal above.Merge Cells will merge theselected cells together, and SplitCell will separate a previouslymerged cell into its original cells.

Table Row Options This menu contains the followingoptions:

• Insert row before• Insert row after• Delete row• Row properties (bringing

up a modal similar to theCell Properties and TableProperties modals)

• Cut row• Copy row• Paste row before• Paste row after

Table Column Options This menu contains threeoptions:

• Insert column before• Insert column after• Delete column

Maximize Content Region


Maximize Content Region This icon, when clicked, willexpand the JustEdit editableregion to fill the width of theframe window. This is particularlyuseful when editing tabletransformations, where the tableis extremely wide in the Editorbut the transformed content fitsmore nicely into the editableregion on the page.

JustEdit WYSIWYG Toolbar - El Camino College › administration › public... · OU Campus JustEdit...

Documents

Transcript of JustEdit WYSIWYG Toolbar - El Camino College › administration › public... · OU Campus JustEdit...