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
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
- Right-click contextual menu
- Keyboard shortcuts
- Direct editing of the HTML code
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.
 |
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).
The following table defines each function in the top row of content editor defined as the simple mode:
| Icon Function | Description |
|---|---|
 |
Bold the selected text. |
 |
Italicize the selected text. |
 |
Underline the selected text. |
 |
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 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. |
 |
Set the text color. Click the down arrow to select a different text color. |
 |
Create a bulleted list. To learn more, see Working With Lists. |
 |
Create a numbered list. To learn more, see Working With Lists. |
 |
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. |
 |
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:
We recommend opening external websites in a new window. |
 |
Remove a hyperlink from the selected text or object. |
 |
Opens a preview window showing how the content will appear after submitting. |
 |
Open the context editor help information pop-up display. |
 |
Expand the content editor window to fill the entire browser frame. |
 |
Access the advanced content editor features (show more). |
Select the show more function – represented by two arrows pointing down 
– to access more editor functions.
Click the show less function – represented by two arrows pointing up 
to view only one row of functions.
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 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 |
|---|---|
 |
Set the text highlight (background) color. Click the down arrow to select a different highlight color. |
 |
Remove all formatting, leaving only the plain text. |
Second Row
| Icon Functions | Description |
|---|---|
 |
Cut the selected items. |
 |
Copy the selected items. |
 |
Paste the most recently copied or cut items. |
 |
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 the previous action. |
 |
Redo the previous action—available only if an action has been undone. |
 |
Align text to the left margin. |
 |
Align text in the center. |
 |
Align text to the right. |
 |
Align text to both the left and right margins. |
 |
Move the text or object to the right (indent). Click again to indent further. |
 |
Move the text or object to the left (outdent). Click again to outdent further. You cannot outdent text beyond the left margin. |
 |
Make the text into a superscript. |
 |
Make the text into a subscript. |
 |
Add a new or edit an existing hyperlink. |
 |
Remove a hyperlink from the selected text or object. |
 |
Enter text to the left of the current mouse pointer location (default). |
 |
Enter text to the right of the current mouse pointer location. |
|
|
Add a thin horizontal line to the current mouse pointer position, spanning the entire width of the text area. |
|
|
Add a thin centered line, setting width, height relative to the current mouse pointer position, and whether to use shadows. |
 |
Insert a nonbreaking space character at the current mouse pointer position. |
 |
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. |
The following table defines each function in the third row of the content editor in the advanced mode
| Icon Functions | Description |
|---|---|
 |
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. |
 |
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. |
 |
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:
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.
|
 |
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 |
 |
Opens the WIRIS Formula Editor page—the visual math equation editor page. Find out more about the Math Editor. |
 |
Add a mashup.You can choose to embed content from the following third party websites into your Blackboard course
Find out more about mashups including issues such as copyright. |
 |
Click to show all nonprinting characters. Click again to hide them from view. |
 |
Format the text as a blockquote. |
 |
Opens the Select Special Character window. Select a symbol to insert at the current mouse pointer position. |
 |
Opens the Insert Emoticon window. Select the emoticon to insert at the current mouse pointer position. |
 |
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. |
 |
 Click to open the Insert/Edit Table window. |
 |
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. |
 |
Click to open the Table Cell Properties window. |
 |
Insert a blank row in the table above the current mouse pointer position. |
 |
Insert a blank row in the table after the current mouse pointer position. |
 |
Delete the current row from the table. If you select multiple rows, all are deleted. |
 |
Insert a blank column in the table to the left of the current mouse pointer position. |
 |
Insert a blank column in the table to the right of the current mouse pointer position. |
 |
Delete the current column from the table. If you select multiple columns, all are deleted. |
 |
Merge two or more selected table cells into a single cell. |
 |
Split previously merged table cells. If the cell or cells are not ones that were merged, nothing happens. |
 |
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. |
 |
Edit the cascading style sheet (CSS). This feature is included for experienced web developers. To learn more, see Advanced Image Settings. |
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
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.
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.
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. |
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.