Step-By-Step
Using the WYSIWYG Editor
(Text version)

1. The WYSIWYG (What You See IS What You Get) web editor is available to all instructors and TAs accessing Blackboard with a Windows computer and using Microsoft Internet Explorer as their browser. Content created with the WYSIWYG editor can be view by all students via any computer or browser.

2. The WYSIWYG web editor allows instructors and TAs to create content and edit it at any time within the Blackboard course site. The editor is available when using the Add Item, Add Folder, Add Course Link, Add External Link, Add Learning Unit and Add Assignment functions in all content areas. It is also available to some extent in creating tests, creating surveys, posting announcements and adding information to the course calendar.

3. You can use the WYSIWYG editor to format text, correct spelling errors, add equations, add hyperlinks, attach files, display images, display MPG or Quick Time movies and Flash Presentations. If effect, you can add all of the content you might choose to add to a course site by adding it through the WYSIWYG editor.

4. The WYSIWYG editor consists of 3 rows of icons that allow access to various tools and a text box for adding content.

5. To add text to the WYSIWYG editor:

• Type text in to the text box or cut-and-paste from another document. To paste use CONTROL + V or click on the "Paste" icon. Unlike most text boxes, pasting text from another document into the WYSIWYG editor will preserve all of the formatting of the original.

6. To change the font or size of text in the WYSIWYG editor:

• select the text in the text box and use the dropdown boxes to select a new font or a new font size.

7. To Bold, Italicize, or Underline text in the WYSIWYG editor:

• select the text in the text box and click on the "Bold", "Italicize" or "Underline" icon.

8. To align the text to the center, left or right in the WYSIWYG editor:

• select the text in the text box and click on the "Align Center", Align Left" or "Align Right" icon.

9. To add automatic numbering or bullets to the text in the WYSIWYG editor:

• select the text in the text box and click on the "Numbering" or "Bullets" icon.

10. To Indent Left or Indent Right the text in the WYSIWYG editor:

• select the text in the text box and click on the "Indent Left" or "Indent Right"icon.

11. To Check the spelling of any text in the WYSIWYG editor:

• Click on the "Spell Check" icon. This will open a new spell check window which will allow you to replace misspelled words with suggested spellings.

12. You can undo or redo operations by clicking on the "Undo" or "Redo" buttons.

13. To add a hyperlink to text in the WYSIWYG editor:

• select the text in the text box and click on the "Hyperlink" icon. This will open a new window allowing you to type in a URL for the link. Click "OK" and the selected text will now link to the web URL.

14. To create a table in the WYSIWYG editor:

• Click on the "Create Table" icon. This will open a new window allowing you to select the number of rows and columns for the table as well as set other table attributes. Click "OK" and the new table will be inserted at the point of your cursor.

15. To create a line in the WYSIWYG editor:

• Click on the "Line" icon. This will draw a horizontal line across the display.

16. To Highlight the text in the WYSIWYG editor:

• select the text in the text box and click on the "Highlight" icon. This will open a new window allow you to choose a color for the highlight. Choosing a color will return you to the editor with the selected text highlighted.

17. To change the color of the text in the WYSIWYG editor:

• select the text in the text box and click on the "Font Color" icon. This will open a new window allow you to choose a color for the font. Choosing a color will return you to the editor with the selected text colored.

18. To add a Web Equation to the WYSIWYG editor:

• Click on the "WebEQ" icon. This will open a new window allowing you to create an equation. Make sure to provide a name for the equation in the box marked "Equation Name". When you have finished creating the equation, click on the "Add" button. This will close the window and place the equation in the text box at the point of the cursor. You will not be able to see the actual equation but rather the java code for the equation will be displayed. To see the equation, click on the "Preview" button. This will display the content of the whole WYSIWYG editor. To edit an existing equation, click on the "Web EQ" icon. Choose the name of the equation from the dropdown list and click on "Modify".

19. To add a Math Equation to the WYSIWYG editor:

• Click on the "MathML" icon. This will open a new window allowing you to create an equation. MathML equations are created on your keyboard. Make sure to provide a name for the equation in the box marked "Equation Name". When you have finished creating the equation, click on the "Add" button. This will close the window and place the equation in the text box at the point of the cursor. You will not be able to see the actual equation but rather the java code for the equation will be displayed. To see the equation, click on the "Preview" button. This will display the content of the whole WYSIWYG editor. To edit an existing equation, click on the "Web EQ" icon. Choose the name of the equation from the dropdown list and click on "Modify".

20 Note: You cannot use MathML and WebEQ in the same text box.

21. You can at anytime preview the contents of the WYSIWYG editor by clicking on the "Preview" button. This will open a new window displaying what the contents of the editor will look like when submitted.

22. To attach a file to the WYSIWYG editor:

• Click on the "Attach File" icon. This will open a new window called "Insert Content Link". Here you can either upload a file or create a link to an existing web page. If you want to attach a file, click on the "Browse" Button. This will display your computer's file locater dialogue box. Using the dropdown box on the top of the file locator, locate the directory and folder that contains the file you want to attach. Click on the name of the file then click on the "Open" button on the file locator. The locator dialogue box will disappear and the path to the file will be located in the box next to the "Browse" button.
• To link to a web page, type in the complete URL into the box marked "Or Specify URL".
• Under section #2 type in a name for the link. The name of the link are the words you want the students to click on to see the file or the web page.
• Under section #2 decide if you want the attached file or the web site to open in a new window or within Blackboard. It is usually best to select the "Yes" radio button and have the content open in a new window.
• Finally, Click on the "Submit" button. A receipt will appear in the window telling you that the file has been uploaded and attached as a link at the point of your cursor. Click on the "Submit" button and you will be returned to the WYSIWYG editor and the link to the file or web site should be displayed.

23. To display and image in the WYSIWYG editor:

• Click on the "Attach Image" icon. This will open a new window called "Insert Image". Here you can either upload and display an image file or create a link to an existing image located somewhere on the web. If you want to attach and display an image file, click on the "Browse" Button. This will display your computer's file locater dialogue box. Using the dropdown box on the top of the file locator, locate the directory and folder that contains the image file you want to attach and display. Click on the name of the file then click on the "Open" button on the file locator. The locator dialogue box will disappear and the path to the file will be located in the box next to the "Browse" button.
• To link to an image located somewhere on the web, type in the complete URL to that image into the box marked "Or Specify URL".
• Under section #2 type in the image width and height. If you leave these items blank the image will be displayed at its original width and height.
• Under section #2 decide if you want a border around the image and if you want to provide alternate text for those who turn off images in their browser.
• Finally, Click on the "Submit" button. A receipt will appear in the window displaying the image and telling you that the image file has been uploaded and will be displayed at the point of your cursor. Click on the "Submit" button and you will be returned to the WYSIWYG editor and the image should be displayed. Note only .JPG, .GIG and .PNG files can be displayed in the WYSIWYG editor.
  
• Note: To display an image already somewhere on the web in the WYSIWYG, you will need the absolute URL of that image. To obtain the absolute URL of an image on the web, right-click the image and choose image properties. This displays the URL of the image. Copy this address to your clipboard and paste it into the "Or Specify URL" box in the "Insert Image" window.

24. To display an AVI or MEPG movie in the WYSIWYG editor:

• Click on the "Add MPEG/AVI content" icon. This will open a new window called "Insert MPEG/AVI File". Here you can either upload and display an MPEG or AVI movie file or create a link to an existing MPG or AVI movie file located somewhere on the web. If you want to attach and display an MPG or AVI movie file, click on the "Browse" Button. This will display your computer's file locater dialogue box. Using the dropdown box on the top of the file locator, locate the directory and folder that contains the movie file you want to attach and display. Click on the name of the file then click on the "Open" button on the file locator. The locator dialogue box will disappear and the path to the file will be located in the box next to the "Browse" button.
• To link to an MPEG or AVI movie file located somewhere on the web, type in the complete URL to that movie into the box marked "Or Specify URL".
• Under section #2 type in the image width and height. YOU MUST SET THESE VALUES. If yo do not know the width and height of the movie set the width to 320 and the height to 240.
• Under section #2 decide if you want the movie to start paying automatically upon loading. It is usually best not to start the movie on load allowing the student to start the movie on their own.
• Under section #2 use the dropdown box to select the movie controls. "None" "Mini" or "Full". If you chose to not start the movie on load it will need some sort of controls. The "Mini" controls is a good choice.
• Finally, Click on the "Submit" button. Depending on the size of your file, it may take a long time to upload the movie. When it is uploaded, a receipt will appear in the window displaying the movie in its player and telling you that the movie file has been uploaded and will be displayed at the point of your cursor. Click on the "Submit" button and you will be returned to the WYSIWYG editor and the movie in its controller should be displayed.
• You can test out the movie by clicking on the "Preview Button"
• See also: Blackboard Step-By-Step - "Posting Movie and Sound Files"

25. To display a QuickTime movie in the WYSIWYG editor:

• Click on the "Add QuickTime content" icon. This will open a new window called "Insert QuickTime File". Here you can either upload and display a QuickTime movie file or create a link to an existing QuickTime movie file located somewhere on the web. If you want to attach and display a QuickTime movie file, click on the "Browse" Button. This will display your computer's file locater dialogue box. Using the dropdown box on the top of the file locator, locate the directory and folder that contains the movie file you want to attach and display. Click on the name of the file then click on the "Open" button on the file locator. The locator dialogue box will disappear and the path to the file will be located in the box next to the "Browse" button.
• To link to a QuickTime movie file located somewhere on the web, type in the complete URL to that movie into the box marked "Or Specify URL".
• Under section #2 type in the image width and height. YOU MUST SET THESE VALUES. If yo do not know the width and height of the movie set the width to 320 and the height to 240.
• Under section #2 decide if you want the movie to start paying automatically upon loading. It is usually best not to start the movie on load allowing the student to start the movie on their own.
• Under section #2 decide if you want to include movie controls. If you chose to not start the movie on load it will need movie controls. It is a good idea to include movie controls.
• Under section #2 decide if you want the movie to loop.
• Finally, Click on the "Submit" button. Depending on the size of your file, it may take a long time to upload the movie. When it is uploaded, a receipt will appear in the window displaying the movie in its player and telling you that the movie file has been uploaded and will be displayed at the point of your cursor. Click on the "Submit" button and you will be returned to the WYSIWYG editor and the movie in its controller should be displayed.
• You can test out the movie by clicking on the "Preview Button"
• See also: Blackboard Step-By-Step - "Posting Movie and Sound Files"

26. To add Audio content in the WYSIWYG editor:

• Click on the "Add Audio content" icon. This will open a new window called "Insert Audio File". Here you can either upload and display an Audio file (WAV or MP3) or create a link to an existing Audio file located somewhere on the web. If you want to attach and display an Audio file, click on the "Browse" Button. This will display your computer's file locater dialogue box. Using the dropdown box on the top of the file locator, locate the directory and folder that contains the audio file you want to attach and display. Click on the name of the file then click on the "Open" button on the file locator. The locator dialogue box will disappear and the path to the file will be located in the box next to the "Browse" button.
• To link to an Audio file located somewhere on the web, type in the complete URL to that audio file into the box marked "Or Specify URL".
• Under section #2 decide if you want the audio to start paying automatically upon loading. It is usually best not to start the audio on load allowing the student to start the audio on their own.
• Under section #2 decide if you want to include audio controls. If you chose to not start the audio on load it will need audio controls. It is a good idea to include audio controls.
• Under section #2 decide if you want the audio to loop.
• Finally, Click on the "Submit" button. Depending on the size of your file, it may take a long time to upload the audio file. When it is uploaded, a receipt will appear in the window displaying the audio in its player and telling you that the audio file has been uploaded and will be displayed at the point of your cursor. Click on the "Submit" button and you will be returned to the WYSIWYG editor. Because of a bug in Blackboard, your audio controls may not be visible in the editor, however they will be displayed in the final version when you submit.
• You can test out the audio by clicking on the "Preview Button"
• See also: Blackboard Step-By-Step - "Posting Movie and Sound Files"

27. To add Flash or Shockwave content in the WYSIWYG editor:

• Click on the "Add Flash/Shockwave content" icon. This will open a new window called "Insert Flash / Shockwave File". Here you can either upload and display a Flash / Shockwave file (SWF) or create a link to an existing Flash file located somewhere on the web. If you want to attach and display a Flash file, click on the "Browse" Button. This will display your computer's file locater dialogue box. Using the dropdown box on the top of the file locator, locate the directory and folder that contains the Flash file you want to attach and display. Click on the name of the file then click on the "Open" button on the file locator. The locator dialogue box will disappear and the path to the file will be located in the box next to the "Browse" button.
• To link to a Flash file located somewhere on the web, type in the complete URL to that audio file into the box marked "Or Specify URL".
• Under section #2 type in the Flash width and height. YOU MUST SET THESE VALUES. If you do not know the width and height of the Flash file set the width to 540 and the height to 400.
• Under section #2 decide if you want the Flash to start paying automatically upon loading. It is usually best not to start the Flash on load allowing the student to start the Flash on their own.
• Under section #2 decide if you want the audio to loop.
• Under section #2 use the dropdown box to set the display quality.
• Finally, Click on the "Submit" button. Depending on the size of your file, it may take a long time to upload the Flash file. When it is uploaded, a receipt will appear in the window displaying the Flash file in its player and telling you that the Flash file has been uploaded and will be displayed at the point of your cursor. Click on the "Submit" button and you will be returned to the WYSIWYG editor with the Flash player displayed.
• You can test out the Flash file by clicking on the "Preview Button"

28. After adding and formatting all of your content in the WYSIWYG editor, click on the "Submit" button at the bottom of the page. A receipt will be displayed telling you that the item has been updated.

If you have any questions or comments regarding this Step-By-Step procedure contact the Tufts Blackboard Administrator at: nhirsig@tufts.edu