Rich Text Editor Quick Reference

Transcription

1 Rich Text Editor Quick Reference Introduction Using the rich text editor is similar to using a word processing application such as Microsoft Word. After data is typed into the editing area it can be formatted using the buttons that appear in the Toolbar. For example, the font can be displayed in bold, or data can be displayed in columns using tables. Note that not all functions that are available in Microsoft Word are available in the rich text editor and that some formatting may look different when it is printed. Some of these differences are unavoidable and some can be minimized with a little experimentation on the part of the user. Toolbar Functions Toolbar Element Function Save - Save the data that has been entered in the text box and close it. Save and Continue - Save the data that has been entered in the text box, but do not close it. This is useful while typing a great deal of text to ensure that none is lost in case of interruption due to power failure or internet access issues. Spell Check - Check the text that has been entered in the editing area for spelling errors. Cancel - Close the text box without saving any changes. Add Image - Insert an image in the text box. Clear Text - Remove the contents of the edit area by creating a new blank page.

2 Preview - Open a new window to display data that has been entered in the text box in a format that can be printed, without including the other fields that might normally be printed on the document. Formatting may not be retained. Cut - Remove highlighted text to the clipboard. Copy - Copy highlighted text to the clipboard. Paste - Paste text that has been copied to the clipboard at the selected position. Paste as Plain Text - Paste text that has been copied from Microsoft Word after removing the formatting. Paste from Word - Paste text that has been copied from Microsoft Word while attempting to retain the formatting. Undo - Undo the most recent action taken. Redo - Redo the most recent action taken. Find - Find a word or phrase within the text. Replace - Find a word or phrase within the text and replace it with another word or phrase. Select All - Select all of the text in the text box (usually used before copying, cutting or to apply a style or format to all of the text). Remove Format - Remove the formatting from the highlighted text. Bold - Apply bold formatting to the highlighted text. Italic - Apply italic formatting to the highlighted text. Underline - Underline the highlighted text. Strike Through - Apply strikethrough formatting to the highlighted text. Insert/Remove Numbered List - Add numbering to highlighted lines of text. Insert/Remove Bulleted List - Add bullets to highlighted lines of text. Decrease Indent - Decrease the highlighted text's indentation. Increase Indent - Increase the highlighted text's indentation. Maximize - Maximize the size of the editing area. (Click to enlarge the text area. Click again to return to the original size.) Left Justify - Left align the highlighted text.

3 Center Justify - Center the highlighted text. Right Justify - Right align the highlighted text. Block Justify - Highlighted text is both left and right aligned. Link - Create a link to a webpage from highlighted text. Unlink - Remove a hyperlink from highlighted text. Table - Insert a table. Lets user change the various table parameters such as the number of columns or rows, table width, height, and borders. Paragraph Format - Apply the selected formatting to the highlighted text. Font Name - Apply the selected font to the highlighted text. Font Size - Apply the selected font size to the highlighted text. Text Color - Apply the selected color to the highlighted text. Background Color - Change the background color behind the highlighted text. Help - Display information about the editor. In addition to the functions that are available on the toolbar, some functions are accessed via context menus and dialog boxes. A context menu is a list of functions that appears when the right button of the mouse is clicked inside the editing area. As its name indicates, the menu is context sensitive, which means that the available items vary depending on where it is clicked. A dialog box is a small window that appears when some functions are activated. It is used to provide the necessary information to accomplish that function. Context Menu Dialog Box

4 Edit Options There are three methods of pasting information within the rich text editor. Paste can be used to paste data that is copied from one part of the text box to another part of the same text box or to paste something from another source. In the latter case, formatting may not be retained or may not respond predictably when using the text editor commands. Pasting text from Word can result in unpredictable formatting. When using Paste from Word editor attempts to retain the formatting that was used in Word, but it is not always successful., the text For better control of the formatting, use Paste as Plain Text text editor controls. and then apply formatting using the rich While trying to cut or paste text, the following dialog boxes may appear. If so, follow the directions on the dialog box using the keyboard command indicated. Usually, when the Enter key is pressed, a blank line appears between the end of one line of text and the beginning of the next. Sometimes, particularly when text has been pasted from another source, too much blank space appears between lines. When this happens, use Select All to highlight all of the text (or just select a portion, if preferred) then select Normal (DIV) on the Format dropdown list. It may remove some of the blank lines. Creating Numbered and Bulleted Lists Numbers can be added to existing lines of text, or formatted lists can be created while they are being typed. To create a numbered list, click on the toolbar. If no text has been entered yet, 1. appears where the text should be typed. As each new line of text is typed and the Enter key is clicked, the next number in the sequence appears. In order to end the numbered list, either click Enter twice, or click again. Numbers can be added to existing lines of text by selecting the lines of text and clicking toolbar. on the

5 To change the list properties, click the right mouse button any place inside the list. A context menu appears. Choose Numbered List Properties. A dialog box appears. Start - Enter the number the list should begin with. Type - Select the type of numbers desired. Bulleted lists can be created in the same way as numbered lists. To change the list properties, click the right mouse button any place inside the list. A context menu appears. Choose Bulleted List Properties. A dialog box appears. Type - Select the style of bullets desired. A list can be converted into a multiple-level bulleted list or an outline numbered list by using the Increase Indent and Decrease Indent functions. For example, by highlighting the second and third lines of text below and clicking Increase Indent, the two lines of text are indented and numbering for the new level begins with 1 again. If desired, the properties of selected lines of text can be changed via the Numbered List Properties dialog box.

6 Tables Sometimes it is desirable to display data in a tabular format. For example: When using an application such as Microsoft Word, this can be accomplished by using the Tab key to align data and move to the next column of data. In a rich text field, however, the Tab key can not be used to do this because its intended purpose within a form field is to exit that field and move to the next. The information can still be displayed in columns within the rich text field though by using a table. A table is made up of rows and columns of cells that you can fill with text. Bear in mind that the mouse must be used to advance to another cell within the table when entering data. To create a table, click the Table button on the toolbar. The Table Properties dialog box appears. The number of rows and columns must be entered in order to create a table. The rest of the fields are optional. Note that some attributes are not recommended because they may not be retained in the printed document that is produced. Rows: Columns: Headers: Border size: Alignment: Width: Cell spacing: Cell padding: Caption: Summary: The number of rows in the table (required). The number of columns in the table (required). Indicates whether the text in the first column and/or row of the table is a header. If so, the value is displayed in bold. The thickness of the table borders. If set to zero, no borders will print (although there will appear to be borders while working in the text box.) The alignment of the table in the text box. It can be set to the left, center or right. (This does not affect the text alignment within the cells. See Cell Properties.) The width of the table in pixels or as a percentage. The amount of blank space between cells. The amount of blank space between the borders of a cell and the text within it. A title of the table can be entered, but it will not print on the resulting document. (Not recommended.) A comment can be entered, but it will not appear anywhere. (Not recommended.)

7 Table Context Menu To change the properties of a table, right click the mouse while inside the table. A context menu appears. Select Table Properties. The same dialog box that was used to create the table appears. To delete a table select Delete Table. The other three options on the table context menu are Cell, Row and Column. When any of them are selected, another context menu is displayed. Cell Context Menu Insert Cell Before: Insert Cell After: Delete Cells: Merge Cells: Split Cell Horizontally: Split Cell Vertically: Cell properties: Insert a new cell before the cell the cursor is in. Insert a new cell after the cell the cursor is in. Delete the cell the cursor is in. Merge highlighted cells into one cell. One cell is split into two columns. One cell is split into two rows. Open the Cell Properties dialog box. Cell Properties Width: Height: Word Wrap: Horizontal Alignment: Vertical Alignment: Rows span: Columns span: Background color: Border Color: The cell width in pixels or as a percentage of the table width. The cell height. Turn on/off word wrapping. The horizontal alignment of the text in the cell. It can be set to Left, Center or Right The vertical alignment of the text in the cell. It can be set to Top, Middle, Bottom or Baseline. Allow a cell to span more than one row. Allow a cell to span more than one column. The background color of the cell. The color of the cell borders.

8 Row Context Menu Insert Row Before: Insert Row After: Delete Rows: Insert a new row before the row the cursor is currently in. Insert a new row after the row the cursor is currently in. Delete highlighted rows or the row the cursor is currently in. Column Context Menu Insert Column Before: Insert Column After: Delete Columns: Insert a column before the column the cursor is currently in. Insert a column after the column the cursor is currently in. Delete highlighted columns or the column the cursor is currently in. Table Creation Example A table can be used to display information neatly in a rich text field. For example: To create a table, click the Table button on the toolbar. The Table Properties dialog box appears. The number of rows and columns must be entered in order to create a table (4 rows and 3 columns in this example). The rest of the fields are optional and default values will be used if not entered. (They can be changed later, if desired.)

9 A blank grid is created. Click inside a cell with the mouse to begin entering information. As this is done, the column widths and row heights may change. That is normal. Using the mouse, click in the next cell to enter more data. Continue in this manner until all data is entered; formatting it after it is completed. To add a row or column, click in a cell that is next to the location where the new row/column should be inserted. Once the cell is selected, small arrows are displayed pointing up, down, left, and right. Click on the arrow that points where the row/column should be inserted. To delete a row/column, click between the two small arrows in the row/column to be deleted.

10 Once all of the data has been entered, it can be formatted using the Cell Properties dialog box. To center the Standard Scores and Percentile Ranks, select the two columns and then right click. The cell context menu is displayed. Select Cell Properties. The Horizontal and/or Vertical Alignment can be changed. (Note that the ability to select a column of a table can vary depending on the internet browser being used.) The evaluation names can be left justified in a similar manner. It may also be a good idea to check to see if the Word Wrap is set to Yes. If not, there is a chance that the data could be truncated in the printed document although it may appear properly in the text box. To change the size of the table, click on it to select it. Small square anchors appear on the borders of the table. Hover over an anchor to get a double ended arrow. Click and drag the arrow in the direction the table size should be changed. To make the table print without borders, use the Table Properties dialog box to set the Border Size to be zero. The text box and the resulting report each use a default font which may or may not be the same. If desired, the text can be formatted so that it displays in both the text box and the report using a specific format.

11 Click Select All (if the formatting should apply to everything in the text box). Using the Font dropdown list, select the desired font. In addition, the column headers can be bolded by selecting them, and clicking Bold. The resulting table in the text box: The resulting table using the Preview button: Adding an Image To insert an image in the text box, click cursor is currently located. Click Browse to locate the image to be inserted. Valid file types are png, gif, jpeg, jpg, jpe and bmp. The image size is limited to 1MB. Once the image has been selected, click Send it to the Server. on the toolbar. The image is inserted wherever the

12 The image is inserted wherever the cursor is currently located when it is uploaded. It may appear larger or smaller than desired. To resize it, right click the mouse to display the image context menu. Select Image Properties. The width will automatically be set to a maximum of 600 if greater than that and the aspect ratio will be preserved. To change the size, enter a value for either the Width or the Height. (Since the aspect ratio is locked by default, the corresponding value will update automatically.) To reset the image display size, click If desired, an Alternative Text can be entered. This text displays in the unlikely event that the image cannot be displayed. (Note that some attributes are not recommended because they may not be retained in the printed document that is produced.)

13 A chart that has been created in Excel can be added to a rich text field as an image. Select the chart in Excel and click Copy. A picture editor such as Paint can be used to save the chart as an image. Paint can usually be found by clicking Start All Programs Accessories Paint. Click Paste and then use Save As to save the file with a png file type. The image can then be uploaded in the manner described above.