Using the Content Editor - Instructor - Blackboard Learn 9.1 SP12

The content editor allows you to add and format text, insert equations and hyperlinks, tables, and attach different types of files to content. The editor appears throughout the system as the default editor.

The content editor or WYSIWYG (What You See Is What You Get) editor is based on the industry standard TinyMCE platform. TinyMCE is a javascript-based WYSIWYG content editor that provides a stable, robust user experience. The legacy WebEQ equation editor has been replaced with a new mathML equation editor (WIRIS).

The content editor is always available to all users. Your school can control the availability of specific tools within the content editor, but users no longer need to explicitly opt in or opt out of using the content editor.

Note: Your instructor and school control the content editor's features and availability. If you have difficulty accessing the content editor, contact your school for assistance.

Two Views of the Content Editor

The content editor has two view modes: simple mode and advanced mode. Change the view in the upper-right corner of the content editor.

Simple Mode

The simple mode contains a minimal set of the most used text formatting functions. Click the show more ( show me more button ) function—represented by two down pointing arrows—to access more editor functions. To learn more, see Simple Content Editor Features.

 Image illustrating associated text.

Advanced Mode

The advanced mode includes every available formatting and object attachment function. Click the show less ( show less button ) function—represented by two up pointing arrows—to view only one row of functions. To learn more, see Advanced Content Editor Features.

Image illustrating associated text.

Functions not currently available appear grayed out. For example, the functions to apply or remove a hyperlink are available only when you select text or an object in the text box.

Note: Your school can disable certain functions such as spell check and the math editor. Depending on your school's HTML policy, certain tags and attributes are not allowed in the content editor and will not work. If you have questions about this, contact your instructor or school about being granted the appropriate privilege for using unrestricted/trusted HTML input.

Adding and Editing Content

By default, Blackboard Learn formats text to 12-point, left-justified Arial. Use the content editor functions to apply other formatting. With the mouse pointer positioned in the text box, you can use four methods for adding, formatting, and editing text and objects:

Best Practice: Copying and Pasting Text to Prevent Loss

To protect against losing work if an internet connection loss or software error occurs, you may choose to type in an offline simple text editor, such as Notepad or TextEdit, and copy and paste your work into Blackboard Learn.

Alternately, before submitting or saving, you can select and copy all of the text typed in Blackboard Learn. Select the text and right-click to copy it. You may also use key combinations for copying and pasting:

  • Windows: CTRL+A to select all the text, CTRL+C to copy, and CTRL+V to paste.
  • Mac: COMMAND+A to select all the text, COMMAND+C to copy, and COMMAND+V to paste.

Simple Content Editor Features

In the content editor's simple mode, you see a single row of functions. Click the show more ( show more button ) function—represented by two down pointing arrows—to access more editor functions.

Image illustrating associated text.

The following table defines each function.

FunctionDescription
bold text button Bold the selected text.
italics button Italicize the selected text.
underline text button Underline the selected text.
select font face Select the font face for the text. Click the down arrow next to the displayed current font to select from a list of all available fonts.
select font size Select the size of the text. Click the down arrow next to the displayed current font size to select from a list of all available font sizes.
select text color button Set the text color. Click the down arrow to select a different text color.
create bulleted list button Create a bulleted list. To learn more, see Working With Lists.
create numbered list button Create a numbered list. To learn more, see Working With Lists.
spell check button Begin the automatic spell check. Click the down arrow to select a different language. To learn more, see Using the Spell Checker.
create hyper link button Add a new or edit an existing hyperlink. To learn more, see Using the Link Function.
remove hyper link button Remove a hyperlink from the selected text or object.
preview button Opens a preview window showing how the content will appear after submitting.
help button Open the context editor help information pop-up display.
expand to full screen button Expand the content editor window to fill the entire browser frame.
Open advanced content editor button Access the advanced content editor features.

Working With Lists

 

  • Ordered/Numbered List: Creates an ordered or numbered list, or adds a numbered list item. Click the down arrow ( insert numbered list button ) to select from the available list ordering schemes. Choices include:Bullet List: Creates an unordered or bullet list, or adds a bulleted list item. Click the down arrow ( insert bulleted list button ) to select from the available bullet list symbols.
    • Alphabetic
    • Roman numerals
    • Greek symbols

Spacing Between Bulleted or Numbered Items

You can easily increase the amount of space between bulleted or numbered items. You can do this in the WYSIWYG view or code view.

By default, bulleted and numbered lists have the same spacing as lines in a paragraph. Each item in the list uses the <li> tag to create each bulleted or numbered item.

Image illustrating associated text


Adjust Spacing in WYSIWYG View

In WYSIWYG view, after you create your list, place your mouse pointer at the end of each bulleted or numbered line and click SHIFT + ENTER. You are adding a line space between each list item. If you continue to click the key combination, additional line spaces are added. In code view, you will see <br /><br /> for each line space. This code appears insideeach bulleted or numbered item's closing tag (the </li>).

Image illustrating associated text

Adjust Spacing in Code View

If you want to control the amount of spacing between list items, you need to work in code view. In the content editor, click (  ) to access the HTML code view window. You can add an amount to each tag creating each list item. For example, where you see <li>, replace each with <li style="margin-bottom: 8px;">. For the 8px, you can add the amount you need. The spacing is added to the bottom of each bulleted or numbered item, creating space between the list items.

Image illustrating associated text

 

Tip: You can adjust paragraph spacing using the same methods.

Using the Spell Checker

Click the spell checker ( spell check button ) icon to turn the automatic spell check function on or off. Click the down arrow to select a different language's dictionary. You will see wavy, red underlining for words detected as potentially misspelled or not found in the loaded dictionary. If you resume typing text, the spell checker function switches off.

 Image illustrating associated text.

Right-click an underlined word to view a menu, allowing you to:

  • See a list of suggested correction.
  • Ignore the single instance.
  • Ignore all occurrences of the indicated word.

 Image illustrating associated text.

Note: Your school determines if the spell checker function is available and which spelling dictionaries are loaded in.

Using Find and Replace

Use find ( find and replace button ) to search for matching text and, optionally, replace it with other text.

Finding Text

In the pop-up window, click the Find tab and type the text to find.

For Direction, choose whether to search up or down from the current mouse pointer position. Select the Match Case check box to match upper and lower case. Clear the check box to ignore case. If the text is located, it appears highlighted in the text box.

Image illustrating associated text.

Click Find Next to locate the next match or Close to close the window.

You can also click the Replace tab to switch to the replace text function.

Replacing Text

To search for and replace text from one tab, click the Replace tab.

Image illustrating associated text.

Type the text you want to replace. For Direction, choose whether to search up or down from the current mouse pointer position. Select the Match Case check box to match upper and lower case. Clear the check box to ignore case. Click Enter or Return. If the text is located, it appears highlighted in the text box.

In the Replace with text box, type the text to replace the located text with and choose an action:

  • Replace: Replace the next instance found.
  • Replace All: Replace every matched instance.
  • Find Next: Find the next match and highlight it, but do not change the text.

You can also click the Find tab to switch to the search-only function.

Using the Link Function

Select text or an object, and click the link function (create hyperlink button ) to add a new hyperlink or edit an existing hyperlink. To remove a link, select the link and click the remove link function ( remove hyperlink button ). You can also link and remove links using the right-click contextual menu. You must use the http:// protocol when typing or pasting an address for the link.

Note: Unless you select text or an object, the insert/edit link and remove link functions are grayed out and unavailable. If you click remove link for something that has no hyperlink, nothing happens.

You can specify a link to a website, a file from your computer, Course Files, or the Content Collection.

Image illustrating associated text.

In the Target drop-down list,choose where to open the link:

  • Open in this window/frame.
  • Open in a new window.
  • Open in parent window/frame.
  • Open in top frame, replacing all current frames.

Type an optional title for the window or frame displayed when users click the link. Optionally, select a link class. If no other choices are available, the drop-down list may only show Not Set.

Inserting Lines and Horizontal Rules

Line: Click the line function ( insert horizontal line button ) to add a thin horizontal line to the current mouse pointer position, spanning the entire width of the text area.

Horizontal Rule: Click the horizontal rule function ( insert horizontal rule button ) to add a thin centered line. You can set:

  • Width in pixels or as a percentage of the total available width of the text area.
  • Height of the line relative to the current position.
  • Whether to have the line shadowed or not—default is with shadow.

Use the Width drop-down list to choose pixels or percentage. Use the Height drop-down list to choose Normal or a height increment from 1 to 5. Click Insert to add the line or Cancel to close the window.

Image illustrating associated text.

Adding Images

Click the insert/edit image function ( insert image button ) to embed an image in the text area or edit an existing selected image. Alternatively, embed an image using the right-click contextual menu. You can also use the options in the contextual menu to edit the properties of an existing selected image.

You can add the common image types, such as GIF, JPG, JPEG, BMP, PNG, and TIF.

Note: Whenever possible, use compact, compressed file formats such as JPG or PNG to reduce the time required to download the embedded image.

General Image Settings

On the General tab, embed an image from one of the following:

  • To create a link to a file outside of the local system, type or paste a URL in the Image URL text box. You must use the http:// protocol.
  • To upload a file from your computer, click Browse My Computer.
  • To upload a file from the course's storage repository:
    • If Course Files is the course's storage repository, click Browse Course.

      -OR-

    • If your school licenses content management, click Browse Content Collection.

Note: To email a link to a file you are including, you must first submit the content item so the file can be assigned a permanent URL. In the Content Collection or Course Files, access the file's 360 view. Copy the permanent URL address and paste it in an email.

Image description: Optionally, type a description for the image. Recommended for accessibility readers.

Title: Optionally, type a title for the image.

Appearance Settings

The Appearance tab allows you to control image placement and appearance. A sample thumbnail display on the right side of the window shows how the various choices will appear.

Image illustrating associated text.

  • Alignment: Placement of the image relative to the nearby text. Choices include baseline, top, middle, bottom, text top, text bottom, left, and right.
  • Dimensions: Image size displayed in pixels. Important: If not set, the actual image size populates the boxes.

    If you select the check box for Constrain Proportions and add a measurement, the image is resized without horizontal or vertical distortion.

  • Vertical space: In pixels, the margin reserved above and below the image.
  • Horizontal space: In pixels, the margin reserved on either side of the image.
  • Border: In pixels, applies a border around the image.
  • Style: Whenever you change the appearance settings, this box displays the HTML code used to format the image. If necessary, you can enter additional code or alter the existing code.

Advanced Image Settings

Use the advanced image settings to specify an alternative image based on mouse activity. You can also set additional identification, language, and link parameters. Normally, you do not need to set or change these settings.

Image illustrating associated text.

Adding Media Files

Click the insert/edit embedded media function ( insert media button ) to embed a media clip in the text area or edit an existing selected media item. You can also use the right-click contextual menu to edit the properties of an existing selected media clip.

General Media Settings

Image illustrating associated text.

Type: From the drop-down list, select the type of media you want to add, including:

  • Flash (default)
  • QuickTime
  • Shockwave
  • Windows Media
  • Real Media
  • lframe
  • Embedded Audio
  • To create a link to a media file outside of the local system, type or paste a URL in the File/URL text box. You must use the http:// protocol.
  • To upload a file from your computer, click Browse My Computer.
  • To upload a file from the course's storage repository:Dimensions: Size displayed in pixels. Important: If not set, the actual size populates the boxes.
    • If Course Files is the course's storage repository, click Browse Course.

      -OR-

    • If your school licenses content management, click Browse Content Collection.

    Note: To email a link to a file you are including, you must first submit the content item so the file can be assigned a permanent URL. In the Content Collection or Course Files, access the file's 360 view. Copy the permanent URL address and paste it in an email.
  • If you select the check box for Constrain Proportions and add a measurement, the file is resized without horizontal or vertical distortion. You are able to preview the file in the window.

Advanced Media Settings

On the Advanced tab, you can set advanced display parameters, as well as a number of options specific to Flash media only.

Image illustrating associated text.

Advanced:

  • ID: Set an identification code for the media.
  • Name: Type a name for the media.
  • Align: Set whether to align the media to the top, right, bottom, or left.
  • Background: Set a background color for the media.
  • V-Space and H-Space: Set vertical and horizontal margins for space around the embedded media.

Flash options:

  • Quality: Set the playback quality for the Flash media. Choices are high, low, autolow, autohigh, and best.
  • Scale: Select a resizing option for Flash media. Choices are show all, no border, exact fit, and no scale.
  • WMode: Set a display mode for the media. Choices are window, opaque, and transparent.
  • SAlign: Set the position alignment for the media within the Flash media player. Choices are left, top, right, bottom, top left, top right, bottom left. and bottom right.
  • Auto Play: Select to have the Flash media play automatically when selected.
  • Loop: Select so the media file loops (replays) after reaching the end.
  • Show Menu: Select to show the Flash media player menu.
  • SWLiveConnect: Used only in older Flash media. When selected, allows the player and browser to exchange information. Typically, this parameter is not necessary.
  • Base and Flash Vars: Manually configure the Flash options. These features are intended for advanced web developers needing a high degree of control and customization over the Flash player appearance and behavior.

Media Source Settings

In the Source tab, you can enter custom media HTML code. This feature is intended for advanced web developers.

Adding Mashups

A mashup combines elements from two or more sources. When you view a YouTube™ video in a Blackboard Learn course as part of the course content, you are experiencing a mashup.

Click the insert mashup function ( insert mashups button ) to display a drop-down list and select from the following:

  • Flickr© Photo
  • SlideShare Presentation
  • YouTube™ Video
  • NBC Content

Note: Your school determines the availability of specific mashup types.

After you select a mashup type, you can search for content to fit your course. Then, you set viewing and presentation options.

Note: After selecting a YouTube video, choose No for the Show YouTube Information option if you do not want to show YouTube’s suggested videos at the end of playback.

Before submitting, click the preview function ( preview button ) to see how the mashup will appear in the content item. Close the preview window to make changes. When you are satisfied with the selection and options, click Submit to continue orCancel to abort adding the mashup.

To learn more about how instructors can use mashups in their courses, see How to Create Mashups. To learn more about how students can use mashups, see Mashups.

Using Anchors

You can use anchors to position (anchor) other items and objects, such as images. Position the mouse pointer where you want the anchor to appear, and click the anchor function ( insert anchor button ) to open the Insert/Edit Anchor window. Type a name for the anchor and click Insert to add it.

To modify an existing anchor, select it and click the anchor function.

To remove an anchor, select it and press the Delete key.

Note: Deleting an anchor also deletes the object or text anchored to it.

Topic Information
  • Topic #: 8261-1551
  • Date Created: 5/6/2013
  • Last Modified Since: 7/29/2013
  • Viewed: 63
Welcome Guest