Blackboard’s Content Editor

 
Print Friendly, PDF & Email

The content editor in Blackboard allows you to add text using the text entry box in many areas of Blackboard where content is created and displayed (e.g. Add file, add item), as well as collaboration spaces such as the discussion board, blogs and wikis. Aside from adding and formating text, you can 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 java script-based WYSIWYG content editor that provides a stable, robust user experience.

  • Copy and paste from Word and retain formatting
  • Edit box which can be expanded to full screen, and has Preview function
  • Simple & advanced modes for editing
  • New MathML equation editor

newcontenteditor

 

 

 

 

 

By default text is formatted to 12-point font size and left-justified Arial. The content editor functions can be used 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:

Content Editor Functions

The content editor has two view modes: Simple Mode and Advanced Mode.:

The Simple Mode is the default editor mode and contains a minimal set of the most used text formatting functions.  Upon entering any area where text can be added to Blackboard, the Content Editor will have one row (the top row) of basic formatting icons displayed.

The Advanced Mode includes every available formatting and object attachment function.

Hovering over the icon (function) with your mouse will reveal the name of the function.Each function in the Content Editor inserts the HTML code necessary to create the desired effect when the page is displayed in a web browser (Firefox, Chrome, Safari, Internet Explorer).The display you see is how the page will look once submitted. The HTML code used is “hidden” from view. However, you can review the HTML code and enter additional HTML tags by selecting the HTML icon  in the last row of the tool bar. If you would like to preview the page, click on the preview icon to the far right. A box will overlay the Content Editor revealing how the page will look once you click Submit.

important

Note:
Functions (icons) not currently available appear greyed out. For example, the functions to apply or remove a hyperlink are available only when you select text.

Simple Mode

The simple mode contains a minimal set of the most used text formatting functions (icons).

simplemodecontent

 

 

The following table defines each function in the top row of content editor defined as the simple mode:

 
Icon Function Description
boldce Bold the selected text.
italicize Italicize the selected text.
underlinece Underline the selected text.
fontfacece 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.
fontsizece 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.
fontcolour Set the text color. Click the down arrow to select a different text color.
bulletlist Create a bulleted list. To learn more, see Working With Lists.
numbered listce Create a numbered list. To learn more, see Working With Lists.
spellchecker Begin the automatic spell check. Spelling will be checked when you select the spell check iconClick the down arrow to select a different language.Click the spell checker 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.

 

 

 

 

Right-click an underlined word to view a menu, allowing you to:see a list of suggested correction; ignore the single instance or ignore all occurrences of the indicated word.

If you are using Internet Explorer 9 the right click context menu may not display, you have to tell IE to use “Compatibility Mode” (the “torn paper” icon in the address bar). Select the ‘torn paper icon to view the context menu.

insertlink Add a new or edit an existing hyperlink. You can specify a link to a website, a file from your computer, Course Files, or the Content Collection.

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.

We recommend opening external websites in a new window.

removelink Remove a hyperlink from the selected text or object.
previewce Opens a preview window showing how the content will appear after submitting.
helpce Open the context editor help information pop-up display.
fullscreen Expand the content editor window to fill the entire browser frame.
showmore Access the advanced content editor features (show more).

Select the show more  function – represented by two arrows pointing down showmorecontent – to access more editor functions.

Click the show less  function –  represented by two arrows pointing up showlesscontent to view only one row of functions.

Return to top

Copying and Pasting

You may choose to type your text or information using any Word Processing Program, Text Editor, or Notepad and copy and paste this into the text entry box. Best practice if you are typing a large piece of work in the text box entry in the content that editor that you regulary save.

 

Advanced Mode

The advanced mode includes every available formatting and object attachment function. Select the show more  function represented by two arrows pointing down showmorecontent  to access more editor functions. Two further rows are displayed for you to make use of in the content editor.

 

The following table defines each function in the second row of the content editor

When the show more function is selected, the spell checker icon, add link and remove link in the simple mode (first row) is moved to the second row and two more functions are added to the top row in addition to the advanced rows, these include:

Icon Functions Description
highlight Set the text highlight (background) color. Click the down arrow to select a different highlight color.
removeformatting

Remove all formatting, leaving only the plain text.

 

Second Row

Icon Functions Description
cutce Cut the selected items.
copce

Copy the selected items.

pastece Paste the most recently copied or cut items.
find Search for and replace text. In the pop-up window, click the Find tab and type the text to find.To search for and replace text from one tab, click the Replace tab.
undo Undo the previous action.
redoce Redo the previous action—available only if an action has been undone.
alignleft Align text to the left margin.
centrece Align text in the center.
rightce Align text to the right.
justfied Align text to both the left and right margins.
indentce Move the text or object to the right (indent). Click again to indent further.
outdent Move the text or object to the left (outdent). Click again to outdent further. You cannot outdent text beyond the left margin.
superscriptce Make the text into a superscript.
subscript Make the text into a subscript.
inserteditlink Add a new or edit an existing hyperlink.
removelinksecondrow Remove a hyperlink from the selected text or object.
directionlefttoright Enter text to the left of the current mouse pointer location (default).
directionrighttoleft Enter text to the right of the current mouse pointer location.

 

line

Add a thin horizontal line to the current mouse pointer position, spanning the entire width of the text area.

 

horizontalrule

Add a thin centered line, setting width, height relative to the current mouse pointer position, and whether to use shadows.
nonbreakingspace Insert a nonbreaking space character at the current mouse pointer position.
spellcheckerrow2 Begin the automatic spell check. Click the down arrow to select a different language.Click the spell checker 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.

 

 

 

 

Right-click an underlined word to view a menu, allowing you to:see a list of suggested correction; ignore the single instance or ignore all occurrences of the indicated word.

 

Return to top

The following table defines each function in the third row of the content editor in the advanced mode

 

 Icon Functions Description
recordwebcam Record a video. Note you must have a YouTube account and channel created to use this feature. There is no connection here to your Blackboard account at DMU.(Please ensure that you familiar with the terms of YouTube if you choose to use this). Record directly from Blackboard with a webcam and microphone or on a smart- device. Video will be uploaded to YouTube as unlisted and embedded in the course.
insertfile Add a link to a file in the text box. The Insert Content Link window appears. You can link to the following file types: DOC, DOCX, EXE, HTML, HTM, PDF, PPT, PPTX, PPS, PPSX, TXT, WPD, .XLS, XLSX, and ZIP. You can link to a file from your computer, from Course Files, the Content Collection, or a URL.
inserteditimage

Embed an image in the text box or edit an existing selected image. The Insert/Edit Image window appears. You can add the following file types: GIF, JPG, JPEG, BMP, PNG, and TIF. You can add images from your computer, from Course Files or the Content Collection, or a URL.

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.

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

Title: Optionally, type a title for the image.

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.

  • 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.
inserteditmedia Embed a media clip in the text box or edit an existing selected media object. The Insert/Edit Media window appears. From the Type drop-down list, select the type of media you want to add: Flash (default), HTML 5 video, QuickTime, Shockwave, Windows Media, Real Media, lframe, and Embedded Audio. You can add media files from your computer, from Course Files or the Content Collection, or a URL. To learn more, see Media Settings
mathsformula Opens the WIRIS Formula Editor page—the visual math equation editor page. Find out more about the Math Editor.
mashups Add a mashup.You can choose to embed content from the following third party websites into your Blackboard course

 

 

 

 

  • Flickr© Photo
  • SlideShare Presentation
  • YouTube™ Video

Find out more about mashups including issues such as copyright.

nonprintcharacters Click to show all nonprinting characters. Click again to hide them from view.
blockqoute Format the text as a blockquote.
symbol Opens the Select Special Character window. Select a symbol to insert at the current mouse pointer position.
emotions Opens the Insert Emoticon window. Select the emoticon to insert at the current mouse pointer position.
anchor Position the mouse pointer where you want the anchor to appear and click to open the Insert/Edit Anchor window. Use anchors to position (anchor) other items and objects, such as images.
insertedittable Click to open the Insert/Edit Table window.
tablerowprop Click to open the Table Row Properties window.You can also right-click anywhere inside an existing table to access a contextual menu. Select Insert/Edit Table to access some editing properties for an existing table.
tablecellprop Click to open the Table Cell Properties window.
insertrowbefore Insert a blank row in the table above the current mouse pointer position.
insertrowafter Insert a blank row in the table after the current mouse pointer position.
deleterow Delete the current row from the table. If you select multiple rows, all are deleted.
insertcolumnbefore Insert a blank column in the table to the left of the current mouse pointer position.
insertcolafter Insert a blank column in the table to the right of the current mouse pointer position.
deletecol Delete the current column from the table. If you select multiple columns, all are deleted.
mergetablecells Merge two or more selected table cells into a single cell.
splitmergetablecells Split previously merged table cells. If the cell or cells are not ones that were merged, nothing happens.
htmlcodeview Click to open the HTML Code View window. Then, you can directly edit the content HTML code. This feature is intended for experienced web developers. To learn more, see HTML Code View.
css Edit the cascading style sheet (CSS). This feature is included for experienced web developers. To learn more, see Advanced Image Settings.

Return to top

Working With Lists

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

 

Media Settings

 

mediageneral

 

 

 

 

 

 

 

 

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:

     

     

     

     

     

    If Course Files is the course’s storage repository, click Browse Course.

    • To email a link to a file you are including, you must first submut the content item so the file can be assigned a permanet URL.
  • Dimensions: Size displayed in pixels. Important: If not set, the actual size populates the boxes.

     

     

     

     

     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.

advancedmedia

 

 

 

 

 

 

 

 

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.

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

Return to top

The Math Editor

Please note: The maths editor in the Blackboard Learn content editor does not work when using Internet Explorer 8.

Javascript must be enabled for the math editor to function.

The math editor  provides an interface for creating and managing math formulas in your course. The math editor is written by WIRIS and is standard- based using the latest MathML standard for describing math formulas for display in browsers. Additionally, the created formulas are saved as the MathML for future editing AND as a PNG file for rapid deployment to browsers.

The following features are supported in the maths editor

  • Basic operations
  • Matrix calculus
  • Calculus and series
  • Logic and set theory
  • Units
  • Greek alphabet

Math Editor Highlights

  • The math editor automatically converts formulas and equations to images so that users do not need to download an applet to view them. The formulas and equations continue to remain fully editable for an author.
  • The math editor supports copying and pasting of MathML formulas and equations directly in the editor.
  • Supports Legacy Equations – the math editor continues to support W3C MathML standards and extracts MathML from the pre-SP8 legacy math editor.
  • If upgrading from other platforms such as CE 4 or Vista, the math editor can accommodate the formulas and equations from these platforms.

The tabs at the top of the page allow you to select different elements:

  • General
  • Operators
  • Symbols
  • Big operations
  • Matrix mathematics
  • Arrows
  • Greek symbols
  • Superscript, subscript, and accents
  • Other miscellaneous math elements
  • Functions

Right Click Contextual Menu

In the content editor, in the text area you can right-click to access a contextual menu. The menu includes the editor’s most commonly used functions:

  • Cut the selected text or object.
  • Copy the selected text or object.
  • Paste the most recently cut or copied text or object.
  • Visible only when you select text or an object and opens the insert/edit link window.
  • Remove Link: Visible only when you select text or an object and removes any hyperlink. If you click remove link for something that has no hyperlink, nothing happens.
  • Image: Add or edit an image.
  • Alignment: Open a sub-menu, allowing you to align text to the left margin, center, right margin, or both margins.
  • Insert/Edit Table: Place your mouse pointer inside an existing table and click this option to access the available editing features.

 

Note: Cut, Copy and Paste functions may not be available in all browsers

Keyboard Shortcuts

The content editor supports the keyboard shortcuts listed in the following table. Please note that Mac users use the COMMAND key instead of the CTRL key. In the table, these are indicated by “MAC:” and COMMAND is abbreviated as CMD.

Keyboard Shortcut Description
RIGHT ARROW Move one character to the right.
LEFT ARROW Move one character to the left.
DOWN ARROW Move down one line.
UP ARROW Move up one line.
CTRL+RIGHT ARROW
MAC: CMD+RIGhT ARROW
Move right one word.
CTRL+LEFT ARROW
MAC: CMD+LEFT ARROW
Move left one word.
END Move to the end of the line.
HOME Move to the start of the line.
CTRL+DOWN ARROW
MAC: CMD+DOWN ARROW
Move down one paragraph.
CTRL+UP ARROW
MAC: CMD+UP ARROW
Move up one paragraph.
PAGE DOWN Move down one page.
PAGE UP Move up one page.
CTRL+HOME
MAC: CMD+HOME
Move to the beginning of the text.
CTRL+END
MAC: CMD+END
Move to the end of the text.
Selection
SHIFT+RIGHT ARROW Extend the selection one character to the right.
SHIFT+LEFT ARROW Extend the selection one character to the left.
CTRL+SHIFT+RIGHT ARROW
MAC: CMD+SHIFT+RIGHT ARROW
Extend the selection right one word.
CTRL+SHIFT+LEFT ARROW
MAC: CMD+SHIFT+LEFT ARROW
Extend the selection left one word.
SHIFT+UP ARROW Extend the selection up one line.
SHIFT+DOWN ARROW Extend the selection down one line.
SHIFT+END Extend the selection to the end of the current line.
SHIFT+HOME Extend the selection to the start of the current line.
SHIFT+PAGE DOWN Extend the selection down one page.
SHIFT+PAGE UP Extend the selection up one page.
CTRL+SHIFT+END Extend the selection to the end of the document.
CTRL+SHIFT+HOME
MAC: CMD+SHIFT+HOME
Extend the selection to the beginning of the document.
CTRL+A
MAC: CMD+A
Select all elements in the document.
Editing
BACKSPACE Delete the selection. Or, if you make no selection, delete the character to the left of the mouse pointer.
CTRL+BACKSPACE
MAC: CMD+BACKSPACE
Delete all of a word to the left of the mouse pointer.
CTRL+C
MAC: CMD+C
Copy the selection.
CTRL+V
MAC: CMD+V
Paste cut contents or copied contents.
CTRL+X
MAC: CMD+X
Cut the selection.
DELETE Delete the selection.
INSERT Toggle between inserting and overwriting text.
CTRL+Z
MAC: CMD+Z
Undo the most recent formatting command.
CTRL+Y
MAC: CMD+Y
Redo the most recent undone command.
CTRL+F
MAC: CMD+F
Find text.
SHIFT+F10 Display the contextual menu. This is the same as a right-click.
Formatting
CTRL+B
MAC: CMD+B
Select or clear bold formatting.
CTRL+I
MAC: CMD+I
Select or clear italic formatting.
CTRL+U
MAC: CMD+U
Select or clear underlining.

Return to top

Direct Editing of the HTML Code

Clicking the HTML code view allows you to directly edit the content HTML code. When finished, click Update to apply your changes or Cancel to abort.

The content editor performs some code verification. To keep the code valid and working, HTML tags are added or removed as needed. However, you might enter invalid codes or tags, and the content editor’s auto-correcting capabilities may not catch all issues. Displayed results can be unpredictable.

Please note that this feature is intended for experienced web developers.

Editing CSS

Click the edit CSS icon allows you to edit the cascading style sheet (CSS) for the page.

Please note that this feature is intended for experienced web developers.

In the Edit CSS Style window, using the tabs and individual settings, you can customize nearly all of the basic formatting defaults for the current content editor display. Each tab controls a different category of style overrides.

  • Text: Set the font face, size, style, weight, and aspects of text appearance.
  • Background: Use a background color or image, and set how it is displayed.
  • Block: Set formatting options at the paragraph level, including word and letter spacing, alignment, indenting.
  • Box: Set defaults for drawn boxes.
  • Border: Set the style, width, and color for all aspects of table and object borders.
  • List: Set defaults for formatted lists.
  • Positioning: Set the overall page positioning, placement, and clipping preferences.

Click Apply or Update to make the changes or Cancel to abort.

Return to top