The Telerik Rad Editor might not be available if you are using a browser other than Internet Explorer or Firefox.

Transcription

1 TELERIK RAD EDITOR The Telerik Rad Editor is another project that DNN makes use of for creating formatted content. The editor includes a toolbar with buttons similar to those you'd find in a word processor or web design application. The Telerik Rad Editor might not be available if you are using a browser other than Internet Explorer or Firefox. TELERIK RAD EDITOR TOOLBAR BUTTONS Print AJAX Spellchecker Find And Replace Select All Cut Copy Paste Paste Options Undo Redo Image Manager Document Manager Hyperlink Manager Remove Link SuperScript Subscript Horizontal Rule Insert Date Insert Time Paragraph Style Sends the current content to the printer. Runs a spellcheck. Lets you search for and/or replace text. Selects all content. Moves selected elements to the clipboard. Copies the selected elements to the clipboard. Pastes the content of the clipboard. Lets you specify paste options. Undoes your last change. Undoes and Undo. Lets you insert an image. Creates a link to a file. Creates a link to another resource or a page within your site. Remove the link from the selected element. Inserts a superscript (for equations or footnotes) Inserts a subscript (for chemical formulas) Inserts a horizontal line useful for separating content Inserts the current date (does NOT update automatically) Inserts the current time (does NOT update automatically) Sets the block-level HTML style Font Name Real font size Bold Italic Underline Strikethrough Changes the typeface of the text Specifies the size of the text Add/remove boldface Add/remove italic style Add/remove underline Add/remove strikethrough 35

2 Align Left Align Center Align Right Justify Remove alignment Indent Outdent Numbered List Bullet List Foreground Color Background Color Apply CSS Class Format Stripper Insert Symbol Insert Table Emoticons About RadEditor Forces left alignment Forces center alignment Forces right alignment Forces full-text justification Removes forced alignment Add blockquote tags to indent content OR demotes content in a bulleted/numbered list Removes blockquote tags OR promotes content in a bulleted/numbered list Converts text to a numbered list Converts text to a bulleted list. Changes the text color. Applies a background color. Applies a standard DNN style Removes various levels of formatting code. Inserts non-standard characters. Inserts a table. Inserts a smiley image Opens the About Rad Editor window. FORMATTING TEXT IN DNN You should be extremely conservative when changing text formatting in DNN (or any web site, for that matter). When all of your content is formatted differently, formatting begins to become meaningless. In addition, if you are applying a lot of formatting in the Rich Text Editor and WANT your content to be consistent, you're creating more work for yourself. When typing content, use the Enter key to begin a new Paragraph. Use SHIFT-Enter to begin a new line without starting a new paragraph. You can force words to remain together by using non-breaking spaces between those words. To insert a nonbreaking space, use CTRL-SHIFT-Spacebar. 36

3 PASTING CONTENT When you paste content into the Rad Editor, the default paste option will strip out all formatting of that content. This is typically the best option since it s easier to reapply any desired formatting than removing existing formatting. This makes it easier to have your text consistent within your site. If you want to retain the formatting of the content when you paste, click the dropdown arrow in the Paste Options button and choose the desired option. IMAGE MANAGER You can add as many images in a rich text area as you like. These will help break apart large "walls" of text. To insert an image, position the cursor at the point you are adding the image and click the Image Manager button. You can then browse to the desired image, set any options and Insert the image. Clicking the Properties tab lets you specify additional options for the image such as the size, borer coor and thickness, alignment, margins, etc., 37

4 You can also select an image and click the Image Editor to make some basic modifications to the image such as setting opacity, flipping, rotating and resizing. 38

5 While in the Image Manager, you can click the Upload button to upload images to your website. By default, the Upload dialog lets you upload up to 3 images at once. Clicking the Add button adds rows for additional images. DOCUMENT MANAGER Use the Document Manager to create a link to a file within your site. When you select a file to link to, you can modify the Link Text and enter a Tooltip (if desired). You can also Upload files in the same way as you upload images. 39

6 INSERT LINK (HYPERLINK MANAGER) You can easily create links to other resources and pages within your site using the Hyperlink Manager. Select the text or image that will serve as the link and click the Hyperlink Manager. Choose a Page from your site, enter the URL you are pointing to, or use the hyperlink button to the right of the URL field to select a file from your site. 40

7 INSERT TABLE Clicking the Insert Table button lets you choose a table with the number of rows and columns you select. You can also open the Table Wizard and build the table using that dialog. The table wizard also lets you specify additional Table and Cell properties. Right-click within an existing table and choose Table/Cell Properties to access these options for an existing table. FORMAT STRIPPER The Format Stripper lets you remove formatting elements on text and other objects. Select the desired objects and click the drop-down from the Format Stripper to choose the desired removal option. 41

8 INSERT SYMBOL Use Insert Symbol to insert commonly used characters that do NOT appear on your keyboard. EMOTICONS The Emoticons button lets you select from a preset library of smilies and other small images. HTML VIEW Entering and editing content in the RadEditor s Design View modifies the underlying HTML code that is delivered to visitors and processed by their browsers. You can manually edit the HTML code by clicking the HTML button at the lower-left of the editing window. This allows you to enter/edit content the RadEditor does NOT provide tools to manipulate. RESIZING EDITOR You can easily resize the editor window of the RadEditor. Simply drag the resize corner at the lower-right of the editor window. 42