Home

END USER DOCUMENTATION 1 End-user manual

1. 101 28 5 PROVIDING GOOD COLOR CONTRASTS FOR CONTENT 101 28 6 AHTML VALIDATOR 103 29 USING THE HTML 104 30 THE PREVIEW MOBDB 105 SM CONTENT 106 1 ABOUT THIS GUIDE 1 1 Purpose This guide provides comprehensive guidelines and step by step instructions for working with the Telerik RadEditor for ASP NET AJAX the high end WYSIWYG content editor for ASP NET 1 2 Who should use this guide This guide is intended for end users of RadEditor For deployment and configuration instructions please refer to the Deployment Manual shipped with the product distribution 2 ABOUT RadEditor RadEditor is a powerful WYSIWYG What You See Is What You Get content editor allowing even non technical users to author and manage HTML content as easily as writing a document In its familiar Word like interface users can seamlessly format text se
2. 27 6 7 OTHER KEYBOARD SHORTCUTS DD Dum edente MIU 29 7 cl RE EE 29 Ta C EO ana A EAA 29 T WB E E e e a R A AA AA eren AE 30 7 3 RI AAI E EEE EAE E OA II eM A UE 30 7 4 SETTING TEXT iram mrt NEED qM UN 31 7 5 di O tess esses E A E A E E E A E 32 7 6 Psa e 33 RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX v inminente 34 7 8 APPLYING FORMATTING TROUGH THE FORMAT SET 34 7 9 APPLYING FORMATTING TROUGH THE FORMAT PAINTER TOOL nsssssssssssssessessessessessessessesseeseessessesseeneesss 35 8 COPYING FORMATTED TEXT FROM MICROSOFT WORD AND OTHER APPLICATIONS 36 8 1 PASTE BUTTON DUAE 36 8 2 PASTE FROM WORD BUTTON 37 8 3 PASTE FROM WORD STRIP PONT BUTTOBLaacssnsszisszxczmesticetittiairQus finca their Eun H xcu tU RITE RUIN 37 8 4 E E EAA EE Un EE E E E EA E E 37 8 5 PA EE EEEE 37 8 6 37 8 7 PASTING CONTENT IN NON IE BROWSERS ccccssscssssnsssssscscsonsssitwoisusitevansdnsncyidessensassusscbtacnsecistdexanisussscabsepipanys 38 8 7 STRIP WORD FORMATTING AFTER PASTE ssssssosssssossossosscsssssussussussussussassussassonsessov
3. 15 not simpl lodePlex T Find Replace Y eharePomt Whether pind RadEditor FindMex like content authormg rendering widest cros Replace With Telerik RadEditor Replace Design gt HTML DIY gt RemoveElement Search Options Replace Direction Match case 3 Up Match whole wards i Down Figure 29 Find And Replace dialog demonstrating the replace of current finding in the content area with new text To find and replace a certain abstract of text do the following Select a range of content it may contain images and tables as well if you want to search only in that content li Click the Find and Replace button or press Ctrl F The Find and Replace dialog appears lii Type the word or abstract of text you want to find in the Find field iv Replace If you want to replace this text with a different one click the Replace tab V Replace Choose other options like search direction scope etc vi Replace Click Find Next Replace or Replace All respectively AN Note If you have replaced a given text with the Replace or Replace All functions by mistake you can click Cancel and the replacement will be undone To confirm the replacement click OK FOR ASP NET AJAX RadEditor END USER DOCUMENTATION Stelerik 11 WORKING WITH TABLES RadEditor offers two ways for creating tables The
4. Design gt HTML a PIU l Zoom 27 Characters 185 t DIV gt RemoveElement Figure 72 Expanded Insert Code Snippet dropdown 28 CREATING ACCESSIBLE CONTENT Section 508 and WCAG2 compliant To generate content that can be interpreted by assistive technologies such as the Accessibility Tools integrated in Microsoft Windows the Narrator the Magnifier and the On Screen Keyboard RadEditor includes additional fields in the Table Hyperlink and Image dialogs By making content Section 508 or WCAG2 compliant it means that equivalent access to information is available for all users 28 1 Creating Accessible Tables The narrative software uses the information from the Accessibility table fields heading rows columns caption alignment and summary to produce a Tooltip message for each table cell Users with impaired C RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX vision can see those Tooltips as they hover over the cells with the mouse Also assistive technologies are able to read the text included in these fields and make it available through synthesized speech or Braille output You can create a Section 508 compliant table with the Table Wizard Alternatively you can convert an existing table to a Section 508 compliant table using the Table Properties context menu Table Wizard Table Design M Table Properties Cell Properties Accessibility 1 Ac
5. i e Times Mew lpt Apply 55 Cl RadEditor is not simply an HTML Editor It 12 what Microsoft chose to use in MSDN CodePlex TechNet MOMS and even as an alternative to the default editor in SharePoint Whether you need a mere Textbox with Google like spellchecker or a Word like content authoring environment the result is the same clean KHTML output fast rendering widest cross browser support and tons of features e Cut af the hox AAP exatled Output oumatched Loading Speed and Performance Microsoft Word ike apell checking Design gt HTML OL Preview s Zaom Wards 101 Characters 152 Set editors current content as initial M Figure 68 Set Initial Content button ii Enter delete and format some content and once are ready press the track changes button PE to see the changes lii The dialog displays text that was removed from the initial content in red and text that was added during the editing in green Text that remained unchanged retains its original formatting RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX Track Changes Track Changes Deleted Content hat Microsof chose to use m MSDN Editor in SharePomt Whether you need a thormg environment the result is the same clean XHTML output fast rendering wides amp pross browser supp gt and tons of features Cut af the box ANTAL enabled Cutput Cnmatched Loading Speed and Performanc
6. 5 RemoveAllComments be careful with this button since it will delete all existing comments in the content area a RadEditor for ASP NET AJAX RadEditor is not simply an ML Editor It is what Microsoft E to use in MSDN CodePlex TechNet Mae qois Iac The tm to create world wide web pages which are Whether TUN aes Text read by browsers Saturday May 19 2012 4 09 52 authoring environment the results CICHH IYEL Y cross browser support and tons of ewe ea M E EMI M RE Comment e Out of the b AHTML enabled Output uth The computer language used to create e Unmatched Loading Speed and Performance world wide web pages which are read by Microsoft Word like Spell checkin browsers Seven Ways for Pasting from isi Edit e Multilevel Undo Redo with Action Trails Extended Functionality Through Integrated Controls gt HTML Preview 24 USING THE TRACK CHANGES FEATURES 24 1 USING THE TRACK CHANGES COLLABORATION FEATURE I RadEditor END USER DOCUMENTATION telerik FOR ASP NET AJAX Starting from Q2 2012 we introduced a new collaboration feature in RadEditor which resembles the idea of track changes in MS Word When this feature is enabled any change in the content area inserting pasting deleting or applying formatting to the content is tracked Content that is added is colored and i
7. Figure 77 HTML view mode of RadEditor populated with HTML content 30 THE PREVIEW MODE After editing the document in the editor preview users may like to see a preview before updating the page The editor switches to the Preview Mode with a single click of the preview button a RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX Dear Thank you for inquiring about Your request vill be processed in 46 hours and shipped at the address you have provided Please contact us if you have any problems Design gt HTML Preview Figure 78 Preview mode of RadEditor 31 PRINTING CONTENT To print the whole web page including the RadEditor click the Print button 8 Properties dialog where you can choose a printer and printing options It will open the Printer To print only the content of the RadEditor do the following I sure the cursor is positioned inside the editor s content li Click the Print button to open the Printing Preferences dialog and confirm the printing operation RadEditor END USER DOCUMENTATION Stelerik FOR ASPNET AJAX Index Section 508 Compliancy 96 Hyperlinks 98 Images 100 101 103 Tables 96 Alignment 31 Code Snippet 23 95 Insert 95 Color 30 CSS 33 Document Manager 22 83 Inserting Documents 84 Upload Documents 85 Edit Mode Design Mode 26 Find and Replace 47 Flash 21 Flash Animation 69 73 In
8. RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX ii Click the Insert Table Light button a on the RadEditor toolbar lii Specify the desired number of columns and rows IV Apply the desired alignment cell padding cell spacing and border if needed V Press OK to insert the table Insert Table B Layout Columns Rows Cell Spacing Alignment X Border px All Properties Cancel The Properties button inside Insert Table Light dialog will load Table Properties panel of the Table Wizard dialog which features more table options It is possible to edit the properties a selected table in the content area by clicking on the Insert Table Light button and loading the Insert Table Light dialog 11 4 Inserting a table from Microsoft Excel or other applications Inserting a table from Microsoft Excel or other applications into the RadEditor is an easy copy paste operation Most of the formatting is preserved including borders text numbers and cell color Formulae however will not be pasted 11 5 Toggle Table Borders If you have created a table that has no borders by default you can switch on the auxiliary borders They are not saved in the content but only help you locate and work with your table You can toggle the auxiliary borders using the Toggle Table Borders button L3 on the toolbar RadEditor END USER DOCUMENTATION Stelerik FOR ASP NE
9. 15 5 Editing Image Properties via the Insert Image dialog I Click on the image in the content area li Click the Insert Image dialog button The Insert Image dialog will appear lii Modify the image attributes Image Src Alt Text Width and Height Setting the Alt Text value is a requirement for producing accessible content RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX IV Click the All Properties button to set additional properties through the Properties dialog v Click OK r Insert Image width Height All Properties Figure 49 Insert Image dialog 15 6 Absolute Positioning In some scenarios you may want to position an image absolutely This will make the image float freely so you can move it around the content with the mouse To set absolute positioning for a given image simply select the image and click the Set Absolute Position button on toolbar 16 WORKING WITH FLASH ANIMATIONS Working with Flash animations is quite similar to working with images The Flash Manager allows you to perform almost the same tasks as the Image Manager the only exception being that you cannot create thumbnails of Flash animations In addition the Flash Manager allows you to set some Flash specific properties like quality loop etc 16 1 Inserting a Flash Animation from the Web Server RadEditor END
10. 9 7 Inserting E mail links E mail links do not lead to other web pages but rather open the default e mail application on your machine and prompt you to send a message to the provided addressee When creating e mail links you can also specify default subject for the message e g Request for information RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX Hyperlink Manager E Hyperlink Anchor Address supportg telerik com Link Text Contact Us Subject Request for Information css Class Apply Class Cancel Figure 27 E Mail Tab of Hyperlink Manager with populated fields Select the text or image that you want to set as an e mail link I Click the Hyperlink Manager button The Hyperlink Manager dialog appears li Click the E mail tab lii Enter the e mail address in the Address field IV Optional Enter a text that will appear as an e mail link V Optional Enter a subject for the e mail message in the Subject field vi Optional Select a CSS Class from the dropdown list vii Click OK 9 8 Inserting Custom Links In some cases RadEditor may be configured to display and insert a set of frequently used links Such links may be all the web pages of a site a k a Internal Links They will appear in the Custom Links dropdown list Custom Links As a result you can quickly assign a predefined hyperlink to an object and type its URL address RadEditor END USER DO
11. F Design lt gt HTML l Zoom 34 Words 0 Characters 0 E Figure 31 Expanded Insert Table dropdown with highlighted Table Wizard tool The Table wizard appears and you can use it to create your table and set its properties To add or remove columns or rows click or next to Columns and Rows RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX Table Wizard E Table Design Table Properties M Cell Praperties M Accessibility Y Columns Rows Columns Calumn Span Cancel Figure 32 Table Design Tab of Table Wizard dialog I Click next to Column span to merge the right cell with the cell you have selected Click the button to unmerge the left cell ii The or buttons next to Row span work in a similar way as Column span but for rows If you click the Insert button the defined table will be created Further customization of this table is allowed using the Table Properties Cell Properties and Accessibility tabs of the Table Wizard The next few sections describe in detail how to modify tables 11 3 Creating a Table using the Insert Table Light dialog Insert Table Light dialog is a light version of Table Wizard When enabled its content is rendered on page load and as a result the content is immediately loaded when the dialog is shown without any delay I Position the cursor where you want to create the table lt
12. Print P ASP_AJAX_banner swf 154073 Reporting_banner swf 374546 Flash Menu gy Silverlight banner swf 387271 Transparent HTML Align Baseline Flash Align Left Top Background Color Mo Color Properties J Pagel of 1 Items 1 to 6 of 6 Insert Cancel Figure 53 Selected Flash file properties populated in Properties panel of Flash manager 17WORKING WITH SILVERLIGHT ANIMATIONS Working with Silverlight animations is quite similar to working with images The Silverlight Manager allows you to perform almost the same tasks as the Image Manager and Flash Manager RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX 17 1 Inserting a Silverlight Animation from the Web Server vi Position the cursor at the place where you need to insert the Silverlight animation vii Click the Silverlight Manager button i from the toolbar A dialog box appears S verlight Manager 5 G x EB Gr Upload Marketing Marketin g Filename Ld Banners CJ Banners Lal Logos Width 200 E Print Height 200 CoverFlow xap 1457293 Background Color Color Windowless C Min Runtime Ver 2 0 31005 0 Auto Upgrade Enable Html Properties J Pagelofl Itemslto4of4 Cancel Figure 54 Selected Silverlight animation properties in Silverlight manager viii Locate the Silverlight XAP file that you want to insert and click to se
13. A dialog box appears To go to a new subfolder double click its name or use the Treeview control to expand the parent folder and access the available subfolder s Image Manager c T Image Editor E j4 4 Banners Logos u qum Ll PublicRelations T 276x250 279x50 telerik 125x asp net DMR gif 125 asp gif featured gif telerik_125x sample 200 50 125 orm gif asp net featured jp g F Sitefinity jp g ai _ Cancel Page 1 1 Items 1 10 10 Figure 42 Image Manager dialog IV Ifthe file browser lists more than 100 images use the paging slider to navigate to the rest of the pages RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX Fage 2 of 2 Items LOL to E Figure 43 Page slider inside Image Manager dialog V Locate the image file that you want to insert and click it once A preview of the image appears in the right hand side of the dialog vi set the image properties of the selected image navigate to the Properties tab using Tab key or clicking on the Properties button The Properties panel can be used to set ALT TEXT and LONG DESCRIPTION attributes of the inserted image which is a requirement for producing accessible content vii Click Insert to finish or Close to cancel the operation A oe Upload Image Editor 4 Jy 2 276x250 asp net featured gif eg Marketing Ld
14. content and click Cut The selected text or image is removed from the page and is stored in the clipboard for later use Please note that only the last cut or copied item is stored in the clipboard This tool is very helpful when you need to relocate a word text within the page just select the text click EN place the cursor on the new place and click ey see below Copies the selected content to the clipboard This button works on the selected text image and or table Select some content and click Copy The content is stored in the clipboard for later use Note that only the last copied or cut item is stored in the clipboard This tool is very helpful when you need to type the same text many times just select the text click place cursor on new place and click E see below This way you do not have to type the text over and over This procedure works for images and or tables as well Pastes copied content from the clipboard into the editor RadEditor END USER DOCUMENTATION Stelerik FOR ASPNET AJAX Fet Ctrl V After you have either Cut or Copied an item text image etc you can Paste it using this button Place the cursor where you want the item to appear and click EN Paste From Word Pastes copied content from the clipboard into the editor After you have either Cut or Copied an item text image etc you can Paste it using this button RadEditor cleans all unnece
15. tablestylea i color green tableStyle3 i color blue lt style gt lt head gt lt body gt lt form id forml runat server gt Options Snippet Width B00p 9s Select Language Markup HTML AML ASP Snippet Height OO px px 6 Display Line Numbers C Preview L Preview html xulns http www w3 o0rg 1999 xhtml zhead runat serwver ztitle Untitled Pagez title style type text css gt LtablesStylel color red tableStylez color green LtableStyles3 color blue lt style gt lt r head lt zformid torml runat server Cancel Figure 70 Format Code Block dialog populated with HTML content 26SPELL CHECKING RadEditor END USER DOCUMENTATION telerik FOR ASPNET AJAX RadEditor features a multilingual spellchecker that is invoked when clicking the Spellchecker button on toolbar If there are several spellchecking dictionaries available you will see a dropdown where you can choose which dictionary to use By default the initial spellchecking language is the localization language of RadEditor i e the language in which the editor s menus toolbars modules etc are set The AjaxSpellChecker of RadEditor brings the spellchecking experience to a whole new level with the addition of an inline AJAX spellchecker You can now check your spelling asynchronously and all your mistaken words will be highli
16. Banners Logos Print Lj PublicRelations Controls 125 asp gif T telerik 125x sample 200x50 125 orm gif chart png asp net featured jp 9 m LL Sitefinity jp g Preview fi Properties W gl Page 1 1 Items 1 10 10 Insert Cancel Figure 44 Image Manager dialog with selected image displayed in the preview panel 15 2 Uploading Images on the Web Server I RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX You can use the Image Manager dialog to upload images from your computer to the web server Once uploaded the image appears in the Browse Files tab at the bottom of the file list in the current folder To upload new images on the web server do the following I Click the Image Manager button ET to open the dialog li Navigate to the folder in which you want to upload the image lii Click the Upload button on the toolbar Iv Click Select to select an image from your computer The multiple file upload controls allow you to upload multiple images files simultaneously V Click Upload Image Manager E lt m od X zr Upload Image Editor E Jy 2 Marketing TCI vlarketina 2I6x250 asp net featured gif T a Select Remove ae Lal Print Select x Remove 3 Ld PublicRelations Select Remove _ Add Overwrit
17. Courdavault Grandma s z gt Boysenberry Properties a Spread R ssle Width 465 px 3 Sauerkraut Height 260 px 4 Chartreuse verte Border Color 7 Spegesild Border Width Escargots de Alt Text Amount Spent Chart Bourgogne Long Description Ichartdesc html Image Alignment X 7 Image 5 mages complex_chart jpq TS p Right Bottom t Left CSS Class Apply Class Design HTML Preview OK Cancel Figure 75 Specified Long Description field in Image Properties dialog Here is the produced image tag img src images complex chart png alt Amount Spent Chart longdesc chartdesc html gt RadEditor END USER DOCUMENTATION Stelerik FOR ASPNET AJAX Information on Alt Attribute http www w3 org TR WCAG20 TECHS H37 html Information on LongDesc attribute http www w3 org TR WCAG20 TECHS H45 html 28 4 Using Headers in Content If there is a large amount of text over 750 characters then headers make it much easier for all users to navigate through the content You can see how to apply a heading in RadEditor in the Apply Paragraph Styles section http www w3 org TR WCAG20 TECHS H42 28 5 Providing Good Color Contrasts for Content Accessibility is an important part of web design By choosing the right colors you can ensure that all visitors to your site can read your content The user can change the color appearance
18. DO P Mc RETRO UE RE 86 21 2 WI mtd Ha 87 220 USING THE IMAGE MAP EDITOR pp anima ph 89 29 USINGTHECOMMENTS T BACC 90 27 USING TBE TRACK CHANGES PEATURE oo PER P KIN ROI EHEEGER I GROH 90 24 1 USING THE TRACK CHANGES COLLABORATION FEATURE rrr 90 Aka USING TOS DIALOG nian HE EDU HN RS 92 Zo USING THE PORMAT BLOCK DIALOG nsns iraner aia 93 JSPDIUESDEBORIDUD 94 COME eee sede 95 27 1 Ge CODE nip E eA 95 28 CREATING ACCESSIBLE CONTENT SECTION 508 AND WCAG2 COMPLIANT 96 28 1 van M na eatin cp p ae aD 96 28 2 Ge eatin ED POT OA 98 28 3 CREATING ACCESSIBLE IMAG tU Ra lr ab a 100 RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX 20 4 USING HEADERS EN CONTENT
19. Manager button to open dialog li Navigate to the folder in which you want to upload the Document lii Click the Upload button Iv Click Select to select a Document file from your computer V Click Upload 21 WORKING WITH TEMPLATES RadEditor allows you to insert external files e g a file with pre formatted tables signatures etc into the editable area Those files are called Templates and can be in any format that your server will allow you to read Templates are similar to code snippets the only difference being that they are obtained from individual files the user can browse upload delete etc 21 1 Inserting Templates RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX sti ssn i ot XE3 So Marketing 8 Banners 4 Logos 3g Print 3 2007 06 html 2007 07 html LJ WH Pagel of 1 Items 1 to 5 of 5 Cancel Figure 65 Template manager Click the Insert Template button I A dialog opens to display a list of folders and template files that you are allowed to browse Select the file you want to insert You see the preview of the file in the preview window ii Click Insert The template will be inserted in the editable area 21 2 Uploading Templates You can use the Template Manager dialog to upload template files from your computer to the web server Once uploaded the file appears in the File Browser at the bottom of the file list in t
20. USER DOCUMENTATION Stelerik FOR ASP NET AJAX I Position the cursor at the place where you need to insert the Flash li Click the Flash Manager button 2 from the toolbar A dialog box appears D a gt Marketing Specify Class 1D F M Width 150 1 Banners Banners Logos E Print Quality high zi ASP AJAX banner swf Play Loop Reporting_banner swt Flash Menu Silverlight banner swf Height 150 Transparent HTML Align Baseline Flash Align Left Top Background Color Ma Color LA i Pagel of 1 Items 1 to 6 of 6 Cancel Figure 50 Flash Manager dialog lii Locate the Flash file that you want to insert and click to select it The default Flash properties are displayed in the right hand side of the dialog IV Click the Preview tab to see a preview of the Flash animation Depending on the file size this may take a while RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX IMarketing Marketing Filename Banners Logos Print ASP banner swf 154073 gi Reporting banner swf 374546 gy Silwerlight_banner swf 387221 Preview Properties L 4 Pagel of 1 Items 1 6 of 6 Bice Insert Cancel Figure 51 Flash Manager dialog with selected flash animation shown in the Preview panel V Click Insert to finish or Close to cancel the operation 16 2 Uploading Flash Animations on the Web Server You ca
21. Word like content authormg environment the result is the same clean XHTML output fast rendering widest cross browser support and tons of features A Design lt gt HTML Preview 2 Zoom 3i DIV alicgn center IMG alt product logo src http demoz telerik com aspnet ajax editor Imgq editor jpq z DIV P BRadEditor is not simply an HTML Editor It 15 what Microsoft chose to use in MSDN CodePlex TechNet MCMS and even as an alternative to the default editor in lt title Sharpoint hrsef hnttp www telerik com productz aspnet ajax sharepoint aspx target blank SharePointz Whether you need mere Textbox with Google like spellchecker or Ward like content authoring environment the result is the same clean XHTML output fast rendering Widest cross browser support and 4 hreft http fw telerik com products aspnet ajyax feditor Figure 4 Real Time HTML Inspector populated with the actual HTML content rendered in the content area Design view mode 5 4 Statistics This module provides word character count or other analysis of the content It is especially useful when you have a word character limit for an article RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX CNN 18 Times New 3 Apply CSS Custom Links Normal 4 FOR ASP NET AJAX RadEditor is not simply HTM
22. be i HTML CSS JavaScript as well as C and VB code Track Changes Dialog As of Q2 2013 the Track Changes dialog is obsolete An improved track changes functionality that offers better interaction and usability has been introduced see Enable Track Changes Override below A Provides comparison between two contents Style Builder Dialog Provides options to define cascading style sheet CSS style attributes A CSS EJ style combines individual formatting and positioning attributes into an attribute set that you can apply all at one time Accept Track Change vi Accepts the last change made Reject Track Change Rejects selected change Accept All Track Changes Accepts all changes in document RadEditor END USER DOCUMENTATION Stelerik FOR ASPNET AJAX Reject All Track Changes Rejects all changes in document Enable Track Changes Override BA Turns Track Changes on or off 6 7 Other keyboard shortcuts Some of the general keyboard shortcuts valid for Microsoft Windows and Internet Explorer will work in the RadEditor as well For your reference we have included some of them in addition to the keyboard shortcuts described above Ctrl A Selects the whole content of the editor text images tables etc Ctrl W Closes the active window Alt F4 Closes the active application 7 FORMATTING TEXT 7 1 Changing Text Font To change the font of some text
23. best approach in each particular situation depends on your preferences and the table complexity For simpler tables we recommend the click and drag Table Builder whereas for more complex tables the Table Wizard is more appropriate 11 1 Creating a Table Using the Table Builder I Position the cursor where you want to create the table li Click the Insert Table button lE on the RadEditor toolbar iii Drag the mouse cursor to select the number of rows and columns you want Click the left mouse button Alternatively you can click and drag to make the selection R35 0 U abe itis amp 7 Times Mew lpt Apply CSS CI Custom Lin EH Wizard Es gg 8 du SB dj Hay 8 F Design lt gt HTML 9 Wards 0 Characters 0 E Figure 30 Expanded Insert Table dropdown 11 2 Creating a Table Using the Table Wizard I Position the cursor where you want to create the table RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX li Click the Insert Table button B on the RadEditor toolbar iii Click the Table Wizard button at the bottom to open the Table Wizard dialog Us a Times New 12 Apply CSS LJL JE JE AE JE JL IE d Wizard AT able Wizard EEFE
24. dialog will prompt whether the Word markup should be cleaned If the Clipboard content does not come from Word the dialog will not be shown RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX The page at http demos telenk com says The content you are trying to paste has 5 Word formatting Would you like to clean it Figure 17 Confirmation dialog prompting to clean the MS Word formatting from the pasted content 8 2 Paste from Word button To strip MS Word specific formatting lt o p gt and other Word tags mso styles and classes from the copied from MS Word content before pasting it in RadEditor click the Paste from Word button EJ 8 3 Paste from Word Strip Font button When pasting MS Word content by clicking on the Paste from Word Clean Fonts button editor will clean unnecessary Microsoft Office related tags plus font formatting 8 4 Paste plain text The Paste Plain Text button s works similarly to Paste from Word but removes all HTML formatting and pastes plain text preserving the line breaks 8 5 Paste as HTML The Paste as HTML tool allows you to paste the HTML content from Clipboard as code which may be quite convenient for developer oriented applications e g support systems forums etc The pasted text will look something like this lt img alt src radEditor logo gif gt lt br gt lt br gt lt span style font family arial gt lt
25. follows superscript The button also works on selected text You need to click the button again to switch to normal text typing Makes text or numbers appear as subscript When typing text you can click this button to make the text that follows subscript The button also works on selected text You need to click the button again to switch to normal text typing Converts selected text to lower case When typing text and select it you can click this button to change the text to lower case Converts selected text to upper case When typing text and select it you can click this button to change the text to upper case 6 2 Formatting Paragraphs amp Lists New Paragraph Inserts a new paragraph lt Stelerik RadEditor FOR ASPNET AJAX Ctrl Enter al Paragraph Style Numbered List Bulleted List ii Increase Indent Decrease Indent ana Horizontal ruler END USER DOCUMENTATION This button allows you to insert a new paragraph There is a difference t between clicking this button and clicking Enter Click Enter to t create a new line and keep the paragraph formatting Click E to create a paragraph with different paragraph settings that can be changed later on This feature is important when applying indentation and justification to text Applies standard or predefined text styles to the selected paragraph This dropdown allows you to change the paragra
26. hyperlink Hyperlink manager Ctrl K This button allows you to create a hyperlink from the selected text number or image In the hyperlink dialog you need to choose the type of link you want to insert Hyperlink Anchor or E mail Working with hyperlinks Insert Link lite dialog Makes the selection a hyperlink a This dialog is a light version of Hyperlink Manager The dialog s content is B shown without any delay when loaded Remove Hyperlink Removes hyperlink from the selected text number or image Ctrl Select an image text in a hyperlink anchor or e mail link and click this Shift K button to remove link Insert Special Character Inserts special character s Click this button to display a dropdown list with the built in special characters Select a character to insert at the cursor position If the character you want to insert is not in the list please contact your developer Inserting special character Insert Code Snippet Inserts a predefined code snippet Select an area in editor and click to insert a predefined code snippet The snippet retains the formatting from the paragraph For more information please contact your developer I Nm RadEditor FOR ASPNET AJAX Insert Custom Link Custom Links Insert Time Insert Date fal Insert Form Element etm Insert Form Insert Form Button d Insert Form Reset END USER DOCUMENTATIO
27. of text in RadEditor s content area using the ForeColor and BackColor tools The W3C recommendations define three levels of conformance to their guidelines Priority 1 2 and 3 Their 2 0 color contrast algorithms utilize two of these Priority 2 AA and Priority 3 AAA Whether or not you need to reach an AAA conformance depends on your target audience You can find below examples of contents with various contrast ratios Content with contrast ratio which passes at 3 1 co A 4x scos x 006 ss C0C cor Ss amp Content with contrast ratio which passes at 4 5 1 UU RadEditor END USER DOCUMENTATION Stelerik FOR ASPNET AJAX Text Color HEX color 000033 Another way to apply color decoration to HTML content is through CSS stylesheet Here is an example which provides good color contrast based on CSS that can be applied to the content area of RadEditor lt style type text css gt body font size 18px color 99ff99 background color 333333 Jj lt style gt UU RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX The tag above should be inserted in HTML view mode of RadEditor More information on color contrast http www w3 org TR WCAG20 TECHS G17 http www w3 org TR WCAG20 TECHS G18 html http www w3 org TR WCAG20 TECHS G145 html 28 6 XHTML Validator dialog XHTML Validator is used for r
28. strong gt What s new lt strong gt lt span gt 8 6 Paste HTML This dialog allows you to paste HTML code in to the editor s current selection and render it It is helpful when you need to enter predefined HTML code such as media embed source RadEditor END USER DOCUMENTATION Stelerik FOR ASPNET AJAX E Click the icon to launch dialog il In the textarea paste the HTML content that you want to be rendered in RadEditor s content area lii Click OK Please insert the Html content which you want to paste object width 480 height 385 param name movie value http www youtube com v QIOeS5XqNZdo amp hl en US amp fs l amp param param name allowFullScreen value true gt lt param gt lt param name allowscriptaccess value always gt lt param gt lt embed srce http www youtube com v QT0e5xXqNZdothl en US amp fs l amp type application x shockwave flash allowsecriptaccess always allowfullscreen true width 480 height 385 gt lt embed gt lt abject gt Figure 18 Paste HTML dialog populated with HTML content 8 7 Pasting content in non IE browsers When RadEditor is used under Firefox Opera Safari and Google Chrome and any of the paste events discussed above are used a new dialog window appears This is due to browser restrictions that do not allow accessing the content from the clipboard To copy and paste content from and in Ra
29. the text and click to apply Italic If the cursor is in a single word clicking this button applies italic to the whole word Applies underline formatting to the selected text Select the text and click to apply underline If the cursor is in a single word clicking this button applies underline to the whole word Applies strikethreugh formatting to the selected text Select the text and click to apply strikethreugh If the cursor is in a single word clicking this button applies strikethreugh to the whole word Sets the font typeface This dropdown allows you to change the font of the selected text Sets the font size These dropdowns allow you to change the font size of the selected text Changes the color of the selected text This dropdown allows you to change the font color of the selected text I m 3Stelerik RadEditor FOR ASPNET AJAX Text Color Background CSS Class ApplyClass F Superscript 25 Subscript 28 Convert To Lower Case KE T Convert To Upper Case END USER DOCUMENTATION Changes the background color of the selected text This dropdown allows you to change the background color of the selected text Applies predefined styles to the selected text This dropdown contains predefined text styles that can be applied to the selected text Makes text or numbers appear as Superscript When typing text you can click this button to make the text that
30. the user can quickly configure the element e g set cell width shading image alt text and long description hyperlink title etc without the need to open dialogs Rad Editor FOR ASP NET AJAX reed a mere Textbox with Google lke spellchecker or a ronment the result is the same clean XHTML output iupport and tons of features ied o HTML A Preview zorii URL telerik Target Hyperlink Manager Title Figure 3 Properties Inspector shows the properties of selected hyperlink element in the content area of RadEditor 5 3 Real Time HTML Inspector This module displays a pane with the HTML code of the content This HTML code is updated and kept in synchrony in real time with the WYSIWYG pane The effect is similar to the Split mode of MS FrontPage if you make a modification in the WYSIWYG pane or the HTML pane the other pane will be automatically updated This module is a great fine tuning tool for advanced users Al NU m RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX et 6 gg M a 9 Times New 3 Apply CSS Cl Custom Links Normal RadEditor FOR ASP NET AJAX RadEditor is not simply HTML Editor It 12 what Microsoft chose to use in MSDN CodePlex TechNet MEMS and even as an alternative to the default editor in eharePomt Whether you need a mere Textbox with Google lke spellchecker or a
31. 11 11Resizing Tables a RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX You can resize an existing table in two ways e by specifying dimensions in the Table Properties tab explained in the previous sections by direct drag and drop 9 0 i af Oe ae 2 A 12 uu T Design HTML N ER 9 Zoom Words 0 Characters 0 a Figure 37 Table resize using the resize handlers To resize a table with a drag and drop do the following I Click the table border to select the whole table Eight small squares will appear in the outer area of the table see the screenshot above li You can drag any of these handles vertically horizontally or diagonally to resize table All cells that do not have exact dimensions specified in pixels will be resized evenly to accommodate the new table size 11 12Formatting Tables with CSS Classes CSS class provides an easy and consistent way for formatting tables In order to use the CSS Class you have to first create the table and then open the Table Properties dialog to apply the predefined CSS class To apply a CSS class to a table or an individual cell you need to do the following I RadEditor END USER DOCUMENTATION telerik FOR ASP NET AJAX I Click the table cell Right click to open the context menu li From the menu cli
32. 1211 complete html H33 Hyperlink Manager E Hyperlink X Anchor M E mail URL http www telerik com 14 Link Text Telerik Home Page Target New Window Existing Anchor None Tooltip 55 Class Apply Class Cancel Figure 74 Specified URL Link Text and Target values in Hyperlink manager The produced link markup is a href http www telerik com target blank Telerik Home lt gt I RadEditor END USER DOCUMENTATION telerik FOR ASP NET AJAX 28 3 Creating Accessible Images An image can be interpreted by the narrative software if you specify an additional description in the Long Description field To make an image accessible fill the Alt Text field For example insert a pie chart image and fill the box with Amount Spent Chart Long Description should be set when displaying charts and graphs to provide detailed information The value of this box should point to a separate description file For example create an HTML file named chartdesc html and write more detailed information about the image Amount Spent Chart Description This chart shows the monthly amount spent on different products evausana zm A Normal B J U abe E LA x am Arp CSS Cias 8 oO _ Aniseed Raclette Syrup cold
33. CI listSquare Figure 13 Expanded ApplyClass dropdown popup IA m RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX To clear an activated CSS Class is as easy as applying it To clear the CSS class select the text first and then select Clear Style from the CSS Class dropdown list 7 7 Applying Paragraph Styles Predefined paragraph styles are used to ease the process of formatting paragraphs The user can apply consistent paragraph styles to a document The predefined styles include different heading styles and other styles defined by the developer To apply a paragraph style to some text first place the cursor within the text then from the paragraph styles dropdown list select the style you want to apply Rae Ree Z4pt Apply CSS CI Telerik Rad Editor RadEditor is not simply an HTML Editor It 12 what o CodePlex TechNet MOMS and even as an alternative to eharePomt Whether you need a mere Textbox with Google Heading 2 7 content authoring environment the result is the same cle rendering widest cross browser support and tons of feature Normal Heading 1 e Cut of the box Output e L natched Loading Speed and Performance Design lt HTML OL Preview al Zoom Words 104 Characters 785 Figure 14 Expanded Format Block dropdown popup 7 8 Applying formatting trough the Format S
34. CUMENTATION Stelerik FOR ASP NET AJAX i ii RI Y d amp B I 1 8 9 my 5 D EE AA 4 Sit Qe amp 7 Times New 12 Apply CSS CI Custom Links Normal EP 7 X Zl telerik Products Purchase SLI Client Met i Microsoft Site MSDN Online Windows Update El Search Engines Google w Wl 3A J Design 49 HTML Preview z Zoom Figure 28 Custom Links dropdown popup with expanded TreeView inside it I Select the text or image that you want to set as a hyperlink ii Click the Custom Links dropdown list 0 Links lii From the dropdown list select the desired link 10 Find and Replace To find and subsequently replace a word or passage of text in the content click the 23 button on toolbar to open the Find and Replace dialog This dialog provides options like search direction scope match case and match whole words only S RadEditor END USER DOCUMENTATION telerik FOR ASPNET AJAX T 7A 3m m 2 OF SN BZ U t FH AA IA Be di 0 A dt Times Mew pt Apply 55 Cl Custom Links Normal T EE 7 T A RadEditor B FOR ASP NET AJAX 3 ___________________________ L2 Find And Replace 89
35. Image Manager allows you to perform the following tasks e browse folders and files e select multiple files sort files by name and type e preview images zoom in and out e upload new images to the server if you are given permissions to upload in the respective folder Please contact the developer of your application for details about the given permissions generate thumbnails of the uploaded images if you are given permissions to generate thumbnails Please contact the developer of your application for details about the given permissions e create new sub folders if you are given permissions to create sub folders in the respective folder Please contact the developer of your application for details about the given permissions e delete files and folders if you are given permissions to delete in the respective folder Please contact the developer of your application for details about the given permissions The Image Manager offers two ways of viewing files I m RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX Thumbnails View Image Manager default all files are loaded and displayed as icons in the central area of the dialog Grid View all files are loaded and displayed as a list in the central area of the dialog 15 1 Inserting an Image from the Web Server I Position the cursor at the place where you need to insert the image Click the Image Manager button al from the toolbar
36. L Editor It 12 what Microsoft chose to use in S DH TechNet MEMS and even as an alternative to the default editor in eharePomt Whether you need mere Textbox with Google lke spellchecker or a Word like content authormg environment the result is the same clean XHTML output fast rendering widest cross browser support and tons of features Design HTML a BIS g Zoom 34 7 Words 102 Characters 7 67 Figure 5 Statistics module shows the count of the words and characters in the content area The modules can be shown or hide via the Module Manager split button Zoom Words 102 Characters 167 ge Statistics Taq Inspector 3 amp Praperties Inspector Real Time HTML View Figure 6 Expanded Module Manager popup 6 TOOLBAR BUTTONS 6 1 Formatting Text Appearance I RadEditor FOR ASPNET AJAX The buttons in this section work on a selected portion of text For some tools it is enough to position the END USER DOCUMENTATION mouse cursor in a word to apply the necessary formatting Bold Italic I Ctrl I Underline Ctrl U Strikethrough Ea Font Name Font Size Text Color Foreground LAY Applies bold formatting to the selected text Select the text and click to apply bold If the cursor is in a single word clicking this button applies bold to the whole word Applies italic formatting to the selected text Select
37. N Stelerik Using code snippets Inserts an internal or external link from a preset list This dropdown allows you to create a preset hyperlink on the selected text number or image Select the object you want link click dropdown and select the link that you would like to use Applying CSS Class Click this button to insert the current time in the editable area Click this button to insert the current date in the editable area Inserts a form element from a list of elements Use this dropdown to insert an HTML element in the editable area HTML elements available for insertion are the following Form Button Reset Button Submit Button Checkbox Hidden Field Password Field Radio Button Select Element Text Area and Textbox Inserts an HTML Form Element Click this button to insert an HTML Form Element in the editable area Inserts an HTML Button Click this button to insert an HTML Button in the editable area Inserts an HTML Reset Button RadEditor FOR ASPNET AJAX 1 Insert Form Submit 1 Insert Form Checkbox Insert Form Password Insert Form Radio Insert Form Select Insert Form Textarea ab cd Insert Form Text ab END USER DOCUMENTATION stelerik Click this button to insert an HTML Reset Button in the editable area Inserts an HTML Submit Button Click this button to insert an HTML Submit Button in the editable area Inserts an HTML Ch
38. RadEditor END USER DOCUMENTATION FOR ASP NET AJAX RadEditor FOR ASP NET AJAX Version 2013 2 611 End user manual Last revision July 08 2013 Stelerik RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX 1 APOE T Ue ican eres EUIS 6 1 1 PO A QD NIME 6 12 WHO SROULD USE THIS GUIDE 6 ABOUT RADEDITOR Rm 6 3 AUTHORING TOOL ACCESSIBILITY GUIDELINES 1 0 ATAQG rere 6 4 a A 9 5 8 BL TP occ CT 10 5 1 TAG acct cet acs E UI NEUE 10 5 4 PEOPERTIES SPT 11 5 3 REAL TRIETTTPILOENSPE DUE 11 5 4 EATE tne eee een nme rn re ee eee ee 12 6 TOOLBAR BUTTON 13 6 1 FORMATTING TEXT APPEARANCE sssssssssssssssssessecsscsscssessesssssessessssussossacsacsacsacsassessacesseseessessesseseesessesneeos 13 6 2 FORMATTING PARAGRAPHS amp 15 6 3 WORKING WITH PORTIONS OT TEX 17 6 4 EA AD a E PIE 20 6 5 iuro E eee ee ee ee ee 26 6 6 DE TR cna saat vs tao RI UE
39. RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX I Position the cursor at the place where you need to inset the Windows Media li Click the Media Manager button from the toolbar A dialog box appears Filename J Banners Logos Print RadNavigation avi Preview Properties P rd Figure 58 Media manager dialog lii Locate the Windows Media file that you want to insert and click to select The default Windows Media properties display in the right hand side of the dialog RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX Specify Class ID Marketing Filename Siz Width Hs Banners Banners E a dl Logos Print E RadNavigation avi Properties Height 150 Align Baseline Properties Pagel of 1 Items 1 to 4 of 4 Insert Cancel Figure 59 Displayed Video file properties in Media manager iv Select the Switch to Preview Mode checkbox to see a preview of the Windows Media Depending on the file size this may take a while RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX Media Manager EJ XES Marketing Ma rketing Filename als LA Banners L Banners navigation suite Ld Logos Logos md vicatior Print E Print I SBI RadNavigation avi A Preview Properties A C c ar Page 1 of 1 Items 1 to 4 of 4 Cancel Figur
40. S ee Apply CSS Cl Custom Lin Figure 10 Expanded BackColor dropdown with hovered blue color item 7 4 Setting Text Alignment gU m RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX You can set the paragraph alignment to left center right or justify Select the text and from the toolbar click the button for the alignment you want to set ais 6 a S CM C aa RES Times Mew 12pt Apply 55 Left aligned content Below are some commonly used properties of RadEditor Feel free to experiment wath the various options and witness the effect on the fly Center aligned content Below are some commonly used properties of RadEditor Feel tree to experiment with the various options and witness the effect on the fly Right aligned content Below are some commonly used properties of RadEditor Feel free to experiment with the various options and witness the effect on the fly Justified content Below are some commonly used properties of RadEditor Feel tree to experiment with the various options and witness the effect on the fly F Design lt gt HTML Preview d Toom 3 3 Wards 95 Characters 613 Figure 11 Highlighted Text Alignment tools on the top toolbar 7 5 Indentation Indentation allows you to move the selected paragraph to the left Indent or to the right Outdent The Outdent works only if Indent has been applied To a
41. SER DOCUMENTATION Stelerik FOR ASPNET AJAX The image properties that can be managed are described below the options may vary depending on the customization of the dialog I Border Width Specifies the width thickness of the image border Select No Border to remove the border li Border Color Specifies the color of the image border lii Image Alt Text Specifies the alternative text that is displayed in some cases instead of the image iv Long description This is an Accessibility option The text entered in the Long Description field will be read by the Windows Narrator tool V Image Alignment Specifies the alignment of the image with respect to the adjacent text images When you choose left or right alignment the text wraps around the image vi Margin Specifies the margin distance to the top to the left to the right and to the bottom between the image and the adjacent text images vii Width Specifies a custom width for the image you can constrain the proportions to avoid distortion The image is not resampled or modified but rather displayed with the specified width viii Height Specifies a custom height for the image you can constrain the proportions to avoid distortion The image is not resampled or modified but rather displayed with the specified height Ix CSS Class Specifies image CSS class and style Only advanced users should use this property X Title Text Specifies a title for the image
42. T AJAX 11 6 Formatting Tables The Table Properties dialog allows you to fine tune the appearance of a new or an existing table You can reach the Table Properties tab in either of the following ways e From the Table Wizard click the Table Properties tab Table Wizard ES Table Design Table Properties Cell Properties M Accessibility Dimensions C55 Class Layout Height 50 pixels telerik reTable 3 Width 3007 pixels 26 Apply special formats to Layout Heading Row Last Row First Column Last Column Cell Spacing Cell Padding Preview Alignment East Background Color wiest South Style Builder Total 55 Class Back Image Id Cancel Figure 33 Table Properties Tab of Table Wizard dialog e Right click inside an existing table and select Table Properties from the context menu This opens the Table Properties dialog 11 7 Table Properties Explained Once the Table Properties dialog tab is opened you can set the appearance of the table This involves setting one or more of the following table properties 2 RadEditor END USER DOCUMENTATION Stelerik FOR ASPNET AJAX Width Height Specifies the height and the width of the table in pixels or percent e Background Sets the background color of the table e Alignment Aligns the table to the left center or right side of the page e Cell spacing Increases or decreases the space between the borders of t
43. XPLAINED csotoertnetencenesteimnnecekririiadiam ege anrertereastatcecucrhxsxerc rir irivr Pr rtvertc ns 54 11 9 INSERTING DELETING ROWS AND COLUMNS eere nnne terat ntn 56 11 10 MERGING SPLITTING CELLS petu Dec i irap 5 LLII TABLES seididh EE E UU B 11 12 FORMATTING TABLES WITH CSS CLASSES rernm eee 58 12 CREATING BULLETED NUMBERED LIS 5 aaccenziscku ncie as ckucis la rta 59 13 INSERTING SPECIAL CHARACTERS 9 E 60 14 INSERTING DROPDOWN MENUS INSERT SELECT DIALOG 61 15 WORKING WITH IMAGES REUTERS 62 15 1 INSERTING AN IMAGE FROM THE WEB SERVER ussssssosscsscssssssussussssussussussussussorsovsossoseoveoussureaueaeenesassansaneas 63 15 2 UPLOADING IMAGES ON THE WEB SEBYVBB tosscccsscssssectecrtseisrcassoiserincsdsanssasescnniteiesnsevecasuvecetanspiuaisteatipaaanns 64 153 IMAGE EDITOR DIALO renee rer rr wpe mcr rir ert tr reer 65 15 4 Sal PROPERTIES eee enn oe n DH tau NI ee ee ey ene 66 15 5 EDITING IMAGE PROPERTIES VIA THE INSERT IMAGE DIALOG 68 155 OLUT tet rere au rumeur DNE MUNDI eet 69 I5 VV TIN EU 69 16 1 INSERTING A FLASH ANIMATION FROM THE WEB SERVER posesssssssssssssessessssssssessessessess
44. a Manager again The properties pane in the right hand side of the dialog loads the properties of the current media file and allows you to change them Specify 0 E Marketing Filename Size Width M Lo i Ld Banners Banners Height 150 Logos Print Align Baseline UE i Baseline RadNavigation avi Properties Bottom Left Middle Hight Properties Fage 1 of 1 Items 1 to 4 of 4 Cancel Figure 62 Setting selected video file properties in Properties panel in Media manager 19 Inserting YouTube and Vimeo videos Starting from Q3 2011 the RadEditor for ASP NET AJAX has a new dialog Insert External Video which provides the ability to easily embed a YouTube or a Vimeo stream providing just the URL Steps to insert a video 1 Open the oe Insert External Video dialog and paste the copied video link into the Paste Youtube or Vimeo video URL textbox e g http www youtube com watch v AWv11JDPy24 u RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX 2 To preview the video and enable the Embed video settings panel click outside of the textbox after you paste the URL 3 Itis possible to configure the video using the Aspect ratio Width and Height customization options as well as to choose whether the video will play automatically on load to display the video title before the pl
45. administrator I RadEditor END USER DOCUMENTATION telerik FOR ASP NET AJAX lt div style text align centers gt lt img alt product lago src htkp demos telerik com aspnet ajaxfeditor Imgfeditor jpg gt lt div gt lt p gt RiadEditor is not simply an HTML Editor It is what Microsoft chose to use in MSDN CodePlex TechWet MOMS and even as an alternative to the default editor in lt a hreF hkkp Sian telerik cor producks aspnet ajax sharepoink aspx target _blank gt SharePoint lt a gt Whether you need a mere Textbox with Google like spellchecker ar a Word like content authoring environment the result is the same clean XHTML output Fast rendering widest cross browser support and lt a href http f www telerik com products aspnet ajaxjeditor aspx target _blank tans of Features slas lt p gt gt lt li gt em out af Ehe bax SHTML enabled Gutput lt fem gt lt li gt lt li gt gt Loading Speed and Performance clem lt li gt lt li gt zem MicrasofE Word like Spell checking stem gt lt li gt lt li gt lt em gt Seven Ways Far Pasting From Word lt fen gt lt li gt lt li gt gt UndofRedo with Action Trails lt fen gt lt li gt lt li gt lt em gt Extended Functionality Through Integrated Controls stem lt li gt lt li gt lt em gt Industry best Cross browser Support etem lt li gt Design HTML A Preview
46. arkdown content in the editor you can use the provided Paste Markdown dialog as shown on the screenshot below You can write or paste the markdown text in the textarea inside the popup and press the Paste button to insert the plain text as XHTML into the content area E Q RadEditor E M a 4 x Ill Fort Name Size This is a paragraph with bold and italic words This is another paragraph with a link in it An in a bulleted unordered list _ subitem indented with 4 s EI Paste Markdown Another item bulleted list Please insert the Markdown content which you want to paste RadEditor logo Img editor jpg RadEditor logo This is a paragraph with bold and italic words This is another paragraph with a link hktp www telerik com in it B Design Preview An item in a bulleted unordered list A subitem indented with 4 spaces Another item in a bulleted list Paste Cancel Figure 21 Paste Markdown dialog 9 WORKING WITH HYPERLINKS 9 1 Inserting a Hyperlink RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX I Select the text or object that you want to set as a hyperlink li Click the Hyperlink Manager button The Hyperlink Manager dialog appears lii In the URL field enter the web address that you want the link to point to or from the Existing Anchor dr
47. arker image E RadEditor END USER DOCUMENTATION Stelerik FOR ASPNET AJAX pF v RadEditor also offers a rendered view of a document named Design mode where the user could edit the content using the tools provided by the editor without going to HTML view mode Y RadEditor can be configured to load a local style sheet which will override published style of the document in the editing view gt Allow the author to edit all properties of each element and object in an accessible fashion Y RadEditor allows the author to individually edit almost all of the attributes of the elements in an HTML or XML document using various tools Properties Inspector Module directly modify the markup in HTML view mode Set Image Properties dialog Set Table Properties dialog Set Cell Properties Dialog v RadEditor allows the author to specifies Alt Text and Long Description for images using the Set Image Properties dialog Y RadEditor provides Properties Inspector Module to allow authors to directly modify properties attributes of the selected element in Design mode Y RadEditor offers tag specific context menus to access the properties attributes of the selected element Ensure that the editing view allows navigation via the structure of the document in an accessible fashion v Another accessibility feature of RadEditor that allows access to the parent elements of the selected element in the content area is the Ta
48. ay May 08 2012 5 59 41 PM Tracking is enabled by default so any changes you make will be noted You can disable it by clicking the Z Track Changes Override button When tracking is disabled you can still modify the content but it will not be highlighted and the rest of your team will not have a visual indication Once the author is done with desired modifications he she can accept selected changes via Accept Track Change button To make things faster there is also the A Accept All Track Changes button which automatically accepts all the changes Alternatively if you are not happy with the modifications you can reject the selected change and revert to the old content by using the 1 Reject Track Change button or the v Reject All Track Changes for all of them at once RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX 24 2 USING THE TRACK CHANGES DIALOG Track Changes dialog lets you compare two text blocks The implementation would compare the initial content which was in the editor when it was originally loaded on the page with the current content i e it allows the user to track the changes made during the editing process and before submitting content back to the server Here are the steps to set the current content as initial and to compare it with a subsequently entered and formatted content Press Set current content as initial button to specify the initial content
49. ayback starts and to enable the full screen button 4 The Advanced mode section below the preview screen is expandable and contains the embed code of the video 5 Once all settings are configured press the Save button to insert the video in the content area InsertExternalVideo Paste Youtube or Vimeo video URL http www youtube com watch vz AWvy11 DPy24 Embed video settings Aspect ratio 4x3 Width 400 Height 20 Play the video automatically on load Display title before video starts playing Enable fullscreen button pf iic Advanced mode Embed code Save Cancel 20 WORKING WITH DOCUMENTS The Document Manager allows you to insert hyperlinks to document files stored on the web server by simply selecting them from a list The dialog is similar to the Image Manager and allows you to browse upload and delete documents RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX 20 1 Inserting Documents 3 Marketin g Banners Banners Logos a Print Telerik at TechEd doc Link Text Telerik at TechEd doc but Telerik RadContrals doc 304 Target None Tooltip Telerik at TechEd CSS Class Apply Class Pagel of 1 Items1to5 of 5 Cancel Figure 63 Document manager preview I Optional Select some text or an image that you want to set as the hyperlink to the document li Click the Insert Document button l
50. cessibility Options Heading columns Max 2 sample Caption Text Caption Caption Align sample Summary Text Summary Associate cells with headers Cancel Figure 73 Accessibility tab of Table Wizard dialog I Create a new table with the Table Wizard or open the Table Properties dialog li Click the Accessibility tab lii In the Accessibility tab fill in the fields Heading rows columns Caption and Summary about the table Select the Associate cells with headers checkbox a The caption should specify the title of the table For information about table captions http www w3 org TR WCAG20 TECHS H39 html b Summary is used to give more details on the contents of the table This attribute only needs to be completed if user sets 2 for the Heading rows or Heading columns field For more E RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX information about Summary attribute include link to http www w3 org TR WCAG20 TECHS H73 html C Always select the Associate cells with headers checkbox Here is an example demonstrating how the produced accessible table should look table summary This table gives per diem rates for hotels and meals in Denver and Seattle for the Winter and Summer gt lt caption gt Per Diem Rates lt caption gt lt tr gt lt th gt lt th gt lt th colspan 2 id hotels gt Hotels lt th gt lt th colspan 2 id meal
51. ck Set Table Cell Properties to open the Table Cell Properties dialog tab lii Select the CSS class from the dropdown list at the bottom of the dialog Iv Click the Update button IE i Apply CSS Custom Links Normal 5 B Table Wizard Table Design Table Properties Cell Praperties M Accessibility Dimensions C55 Class Layout Height pixels CSS Class Layout v Width pixels Apply special formats to Layout Heading Raw Last Row First Column Last Calumn Cell Spacing Cell Padding Preview Alignment East H Background Color West Design Clear Class Sauth Style Builder tableStylel Total CSS Class tableStyle2 Back Image tableStyle3 Id Cancel Figure 38 Table Properties Tab of Table Wizard dialog with expanded CSS Class dropdown 12 CREATING BULLETED NUMBERED LISTS To create bulleted or numbered lists do the following I Select the text that you want to convert to a bulleted numbered list a JU uuu RadEditor END USER DOCUMENTATION telerik FOR ASPNET AJAX li Click the Bulleted Numbered list button gt on the toolbar lii Press Enter to create a new list item iv Press Ctrl Enter to end the list w 0 ate E 7 2 7 Times New L2pt Apply CSS Custom Links Bulleted List EF Amo
52. dEditor the user should use the Ctrl C and Ctrl V shortcuts The text to be pasted is entered in this dialog After the OK button is clicked this text is added to the editor text area RadEditor END USER DOCUMENTATION Stelerik FOR ASPNET AJAX Paste from Word Please use CTRL V to paste below the content you would like to be cleaned Cancel Figure 19 Paste for Word dialog 8 7 Strip Word formatting after paste As an alternative to the Paste from Word tool you may paste the formatted content first and then strip it using the Format Stripper tool Once you have pasted the formatted text in the editor you can remove the Word specific formatting that is not suitable for the web To do that first select the text and then select Strip Word Formatting from the Code Stripper dropdown list Strip All Formatting Strip Css Farmatting Strip Font Elements Strip Span Elements Strip Ward Formatting Figure 20 Highlighted Strip Css Formatting item in Format Stripper dropdown RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX 8 8 Paste Markdown Markdown is a lightweight formatting syntax which allows people to produce rich text markup by writing simple plain text without the use of any XML HTML tags and styles The Markdown language was originally created by John Gruber and you can find detailed information about its syntax and rules at the official site here In order to paste M
53. e Afterosoft Word like Spell cheching Seven Ways for Pasting from Word Miuitilevel Undo Redo with Action Trails Extended Functionality Through Integrated Controls Indusiry hest Cross browser Support Browser OS Windows Mac OS Linux Explorer 6 0 E Firefox e CX Figure 69 Track Changes dialog showing highlighted deleted and new content 25 USING THE FORMAT CODE BLOCK DIALOG The RadEditor Format Code Block Dialog provides the ability to edit and format code blocks of Markup HTML XHTML ASPX XML CSS JavaScript e C VB code blocks PHP Delphi Python SQL NU RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX Click the Format Code button EN paste lines of text or code into the upper pane of the Format Code dialog then select the format from the Select Language dropdown and finally click the OK button to insert the formatted content into the editor The dialog also provides a Preview button which allows you to see how the formatted content will look depending on the selected Language item in the dropdown before insertion into the content area You can see a sample dialog preview below which shows formatted content prior to insertion in the content area For mat Code Block E Faste source code below lt runat server gt ztitle Untitled Page lt title gt lt style type text css gt tableSrylel i color red
54. e 60 Video preview in Media manager v Click Insert to finish or Close to cancel the operation 18 2 Uploading Windows Media on the Web Server You can use the Media Manager dialog to upload Windows Media from your computer to the web server Once uploaded the Windows Media appears in the File Browser at the bottom of the file list in the current folder RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX Specify Class ID Upload Lx Banners RadNavigation avi Remove Print x Remove x Remove ad Overwrite if file exists Max file size allowed 200 00 File extensions allowed wmy avi mpeg mpg mpe mp3 m3u mid rnidi snd mkv Pagel of 1 Items 1 to 4 of 4 Inset Cancel Figure 61 Upload dialog of Media manager To upload a new Windows Media file on the web server do the following I Click the Media Manager button to open dialog li Navigate to the folder in which you want to upload the Windows Media file lii Click the Upload button IV Click the Select button to select a Windows Media file from your computer V Click Upload 18 3 Setting Windows Media Properties m RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX Once a Windows Media file is inserted you can manage its properties Click the Windows Media object and then open the Medi
55. e if file exists Max file size allowed 200 00 KB File extensions allowed qif xbm xpm png pg Jpeg tiff tif rgb g3f xwd pict ppm pgm pbm pnm bmp ras pod cgm dsf cmx dxf svf ri k cheer Bhan pec Dec Upload k Page 1 1 Items 1 10 10 Insert Cancel Figure 45 Upload dialog inside Image Manager 15 3 Image Editor dialog The Image manager includes an Image Editor which provides the ability to Resize Flip Rotate Crop Rename Add text Insert image Print and set the Opacity of the selected image To access this dialog select an image in the Image Manager and click on the Image Editor button placed in the Preview panel lt RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX 2 Click the Image Editor button Image Manager e Go X c 1 Select image Image Editor 3 Edit the image Banners n EAT Logos Banners Logos Print Ld Print LJ PublicRelations 279x60 telerik 125x DNR gif 125 asp gif ail we H telerik 125x sample 200x50 125 orm gif chart png asp net featured jp 9 Sitefinity jp g Iu Page 1 1 Items 1 10 10 Zoom 100 Size 276x250
56. e to the folder in which you want to upload the Silverlight viii Click the Upload button IX Click the Select button to select a XAP file from your computer The multiple file upload controls allow you to upload multiple Silverlight files simultaneously X Click Upload 17 3 Setting Silverlight Properties I RadEditor END USER DOCUMENTATION Stelerik FOR ASPNET AJAX Once a Silverlight object is inserted you can manage its properties Click the Silverlight animation to open the Silverlight Manager A again The properties pane in the right hand side of the dialog loads the properties of the current animation and allows you to change them Silverlight Manager gt D du d Marketing Filename Banners Logos Width 20 Lg Print Height 200 CoverFlow xap 1457293 ig 000 RadChart xap 584761 Background Color Mo Color x Windowless No Color Min Runtime Ver Auto Upgrade arem Enable Html Acc Properties Bi H Pagel of 1 Items 1 to 5 of 5 Cancel Figure 57 Highlighted Properties panel in Silverlight manager 18 WORKING WITH WINDOWS MEDIA Working with Windows Media files is quite similar to working with images and Flash The Media Manager allows you to perform the same tasks as the Flash Manager This includes setting Media specific properties like display size rate etc 18 1 Inserting Windows Media from the Web Server B
57. eal time validation of XHTML compliance This dialog uses the W3C XHTML Validator Page to perform validation of the current editor content The W3C service returns compliancy report right within the editor dialog This feature eliminates the need for manual copy pasting of the HTML and validation in a separate browser window You can check the HTML content you are currently working on by clicking the button RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX XHTML Validator ES XHTML 1 1 O XHTML 1 0 Strict XHTML 1 0 Transitional HTML 4 01 Markup Validation Service Check the markup HTML HTML of Web documents Jump To Congratulations Icons Source Listing This document was successfully checked as AHTML 1 1 Result Passed Browse Pu Use the file selection box above you wish to re validate the uploaded RadEditorzontent htm Modified undefined server undefined size undefined Content Type text html Figure 76 XHTML Validator dialog 29 USING THE HTML MODE More advanced users sometimes need to modify the HTML code of the content directly For this reason RadEditor provides so called HTML mode that gives you access to the content code The author could switch to HTML mode either by clicking on the HTML button using the mouse or navigating to the HTML button using the TAB key Please note that the HTML mode may be disabled by the site
58. eckbox element Click this button to insert an HTML Checkbox in the editable area Inserts an HTML Hidden Field Click this button to insert an HTML Hidden Field in the editable area Inserts an HTMLPassword Field Click this button to insert an HTML Password Field in the editable area Inserts an HTML Radio Button Click this button to insert an HTML Radio Button in the editable area Inserts an HTML Select Element Click this button to insert an HTML Select Element in the editable area Inserts an HTML Text area Field Click this button to insert an HTML Text Area in the editable area Inserts an HTML Text Field Click this button to insert an HTML Text Box in the editable area RadEditor END USER DOCUMENTATION Stelerik FOR ASPNET AJAX 65 View Show Hide Table Borders Shows hides table borders Toggles borders of all tables within editor ON and OFF The ON function works on tables with hidden borders Design Mode Click this button to switch the editor WYSIWYG to design mode HTML Mode Click this button to switch the editor to HTML mode Preview Mode Click this button to switch the editor to preview mode to see the result of your changes Full Screen Mode 5 11 Click this button to expand editor to full screen When in full screen E mode click again to return the editor to the previous state Modules Select a module to activate or deactivate from the dropdown list Currently acti
59. eeseeseeseesessessseseess 69 16 2 UPLOADING FLASH ANIMATIONS ON THE WEB SERVER eene rre tentent s stata tassnss 71 163 72 17 WORKING WITH SILVERLIGHT ANIMATIONT S erret 73 RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX 17 1 INSERTING A SILVERLIGHT ANIMATION FROM THE WEB SERVER eren nnns 74 17 2 UPLOADING SILVERLIGHT ANIMATIONS ON THE WEB SERVER eerte nnne nnne nnns 75 17 3 EE 76 I8 WORKING WITT WINDOWS MED LB FEL SFO es 18 1 INSERTING WINDOWS MEDIA FROM THE WEB SERVER erret nnne nnn nnn rnnt nennt nnns FE 18 2 UPLOADING WINDOWS MEDIA ON THE WEB SERVER rennen nennen nennen nnne tnter nans 80 18 3 SETTING WINDOWS MEDIA PROPERTIES cciaoskkcikiniintsi vicinis iononcconcacero occaeca 81 19 INSERTING YOUTUBE AND VIMEO VIDEOS appetit uide addi 02 20 WOR ERI EU MOERORE ARENA 03 20 1 LES EET eR an DONE 84 20 2 UPLOADING DOCUMENTS ON THE VVEB SERVER nina 85 ag WY alle diu GP UM EMINENS Nd M dU dif 86 21 1 lic dose Eie M Bo
60. et tool Use the Format sets tool to apply formatting to the content of the editor There are three groups of sets in the dropdown e Element Format Sets modify the selected DOM element or the first container which has the same tag name as the one set in the tag property of the format set Inline Format Sets behave as the Apply CSS Class tool e Block Format Sets apply formatting similar to the Paragraph Styles tool RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX Format sets a R X EE ES u Font 16 m Element Format Sets NET AJAX m square red list inline Format Sets ML Editor It is what Microsoft chose to use in MSDN magenta text nd even as an alternative to the default editor SharePomt i Block Format Sets nox With Google hke spellchecker or a Word like content is the same clean XHTML output fast rendering widest green header 1 diues e Out of the box XHIML enabled Output e Microsoft Word like Spell checking e Seven Ways for Pasting from Word e Multilevel Undo Redo with Action Trails Extended Functionality Through Integrated Controls Browser OS Design HTML A Preview Figure 15 Expanded Format Sets dropdown popup 7 9 Applying formatting trough the Format Painter tool The Format Painter tool allows the end user to copy formatting from one piece of text and apply it to others in the content area of RadEdit
61. g Inspector Module v RadEditor can be configured to use the HTML accesskey attribute which sets the focus on the content area when the user executes the accesskey shortcut RadEditor satisfies some of the requirements for Conformance Level AA and Conformance Level AAA of Authoring Tool Accessibility Guidelines 1 0 ATAG RadEditor allows the author to preserve markup not recognized by the browser The user could define his or her own custom tags or attribute and the editor will not modify or strip them gt The RadEditor s Accessibility Validation dialog provides the author with a summary of the document s accessibility status The dialog uses the HiSoftware Compliance Sheriff Accessibility Module InCREATING ACCESSIBLE CONTENT Section 508 compliant section of this document you will find all features of RadEditor that promote the production of accessible content RadEditor partially allow editing of the structure of the document in an accessible fashion For example you can copy an image and or a table along with its properties and content still not supported by Safari and Chrome browsers RadEditor allows the author to search within editing views using the Find and Replace tool NN RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX 4 RadEditor TOOLBARS RadEditor toolbars are a set of buttons and dropdown lists you click to perform common tasks e g make text bo
62. ghted inline in yellow The context menu on every word gives you a quick and easy way to Change Ignore or Add the word to a custom dictionary m RadEditor FOR ASP NET AJAX 2 RadEditor is not an HTML Editor It 12 what Microsoft chose to use CodePlex Tech simply alternative to the default editor in Whether you 5 mple or a Word like content authoring environ output tast rendering widest 3 amp Ignore cross browser 5 p Change Manually Add ta dictionary Design HTML Figure 71 Highlighted in yellow misspelled words in RadEditor 27 USING CODE SNIPPETS The Code snippets dropdown list is a very convenient tool for inserting predefined chunks of content HTML like signatures product description templates etc 27 1 Inserting Code Snippets RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX I Place the cursor where you want to insert the code snippet li Click the Insert Code Snippet button lii From the dropdown list select the respective snippet 5125 JAAG OF 882 d o Times New Llpx Apply CSS Custom Lin Order Confirmation Email Signature Problem Report F sxlback John Wigham Web Developer johnny site com Disclaimer The contents of this e mal are privileged and confidential and Ink the addressees at the specified e mall addresses any
63. he cells e Cell padding Increases or decreases the space between the content and the border of a cell e Border Includes setting border width color and layout e ID Setting an ID for a table gives some options for advanced table handling e Background Image Sets an image as the table background e CSS Class Specifies table CSS class and style This property should be used only by advanced users e Style Builder Provides options to define cascading style sheet CSS style attributes A CSS style combines individual formatting and positioning attributes into an attribute set that you can apply all at one time 11 8 Cell Properties Explained The Cell Properties dialog allows you to fine tune the appearance of individual cells of a given table You can reach the Cell Properties tab in either of the following ways e From the Table Wizard click the Cell Properties tab RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX Table Wizard ES Table Design M Table Properties Cell Praperties A Accessibility Cell Properties Height piels Width pixels Content X T Alignment Background Style Builder ally C55 Class Apply Class text wrapping Cancel Figure 34 Cell Properties Tab of Table Wizard dialog e Right click a table cell and select Cell Properties from the context menu This opens the Cell Properties dialog Once the Cell Properties dia
64. he current folder RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX Template Manager e Marketing Marketing Ld Banners Logos 2007 06 html Select X Remove Print Select X Remove Select X Remove a Overwrite if file exists File extensions allowed htrml htm Upload r Silverlight 1 0 es RadEditor for _ Pagel of 1 Items 1 to 5 of 5 Cancel Figure 66 Upload dialog of Template manager To upload a new template file on the web server do the following li Navigate to the folder in which you want to upload the template file lii Click the Upload button iv Click Select to select a template file from your computer V Click Upload RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX 22USING THE IMAGE MAP EDITOR The Image Map allows you to create images containing one or more invisible regions which are linked to other pages otherwise known as a hotspots Here are the steps to create steps to set image maps to an image Select an image content area and click Image E button you can also use the Image Map Editor to open modify and insert an image file ii Once the Image Map Dialog opens you can create a hotspot in the opened image select the shape type click and drag within the image to set the size of the Image Map Area iil You can also customize the newly crea
65. ii A dialog opens to display list of folders and documents that you are allowed to browse Select the document you want to insert iv Optional Type a tooltip This is an Accessibility option as well The tooltip will be read by the Windows Narrator v Optional Select a target for the link m RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX vi Click Insert In case you have selected some text or an image in step i it becomes a hyperlink to the document In case you have not the name of the document appears at the cursor point and is set as a hyperlink to the document 20 2 Uploading Documents on the Web Server You can use the Document Manager dialog to upload document files from your computer to the web server Once uploaded the documents will appear in the File Browser at the bottom of the file list in the current folder Logos Telerik at TechEd doc Select x Remove Print T n Select x Remove Select x Remove Overwrite if file exists Max file size allowed 200 00 KB File extensions allowed doc txt docx xls xlsx pdf Upload 1 Pagel of 1 Items1 to 5 of 5 _ Inset Cancel Figure 64 Upload dialog of Document manager To upload new Document files on the web server do the following RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX I Click the Document
66. ld apply color build tables open the image dialog etc Most of these buttons work in the same way as in Microsoft Word 7 RadEditor FOR ASP NET AJAX RadEditor is not simply HTML Editor It 12 what chose to use in MSDN 27 TechNet MOMS and even as an alternative to the default editor in eharePomnt Whether you need a mere Textbox with Google lke spellchecker or a Word like content authormg environment the result is the same clean XHTML output fast rendering widest cross browser support and tons of features Design lt gt HTML Preview 9 2 P gt A gt RemoveElement URL Ihttp www telerik Target hlank gt Hyperlink Manager ToolTip Classname Classname Figure 1 RadEditor s toolbars and modules structure Note Depending on your particular application you may not be able to see all the buttons as displayed above Alternatively you may have additional buttons with custom functionality In the latter case please consult the developer of the application The functions of the various buttons and dropdowns on the RadEditor toolbar are described further in this manual You will also find instructions on how to complete common tasks such as formatting text inserting hyperlinks working with images etc RadEditor END USER DOCUMENTATION telerik FOR ASPNET AJAX 5 SYSTEM MODULES The System Modules are special tools
67. lder Option2 Value Option3 Valuel C55 Class Apply Class Option3 Id Select Size 2 Name SelectName Multiple OK Cancel Figure 41 Insert Select Dialog RadEditor END USER DOCUMENTATION Stelerik FOR ASPNET AJAX Add Remove Options Panel Add Option Adds an option element to the drop down list Remove Option Removes an option element from the drop down list Options Shows the list of the options elements Text Sets Gets the text for selected option element from the Options field Value Sets Gets the value for selected option element from the Options field Properties Panel Width Height Specifies height and the width of the drop down list in pixels or percent e Style builder Opens another dialog that allows for fine tuning the appearance of the drop down list e g borders alignment spacing etc e CSS Class Specifies Select CSS class and style This property should be used only by advanced users e Id Defines the ID attribute for the drop down list e Size Specifies the number of visible options in the drop down list e Name Defines a name for the drop down list e Multiple Specifies that multiple options can be selected at once 15 WORKING WITH IMAGES The Image Manager dialog allows you to browse folders on the web server just like in a regular Windows Explorer The folders to which you have access are pre set by the site administrator The
68. lect it The default Silverlight properties are displayed in the right hand side of the dialog IX Click the Preview tab to see a preview of the Silverlight file Depending on the file size this may take a while RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX Silverlight Manager D a Filename Banners Lal Logos Print CoverFlow xap 1457283 dece uum Preview Properties a br Fage 1 of 1 Items 1 to 5of5 _ Cancel Figure 55 Silverlight Manager dialog with selected Silverlight animation shown in the Preview panel X Click Insert to finish or Close to cancel the operation 17 2 Uploading Silverlight Animations on the Web Server You can use the Silverlight Manager dialog to upload Silverlight XAP files from your computer to the web server Once uploaded the XAP file appears at the bottom of the file list in the current folder RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX Silverlight Manager am Upload Marketing m Overwrite if file exists Max file size allowed 200 00 KB File extensions allowed xap Upload J b Page 1 of 1 Items 1 to 5 of 5 Insert Cancel Figure 56 Upload dialog of Silverlight Manager To upload new Silverlight files on the web server do the following vi Click the Silverlight Manager button ito open the dialog vii Navigat
69. log tab is opened you can set the appearance of the individual cells This involves setting one or more of the following cell properties Width Height Specifies the height and the width of the selected cell in pixels or percent e Content alignment Aligns the content within the selected cell vertically and horizontally e Background color Changes the background color of the selected cell e Background Image Sets an image as the cell background a lt RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX e Style Builder Provides options to define cascading style sheet CSS style attributes A CSS style combines individual formatting and positioning attributes into an attribute set that you can apply all at one time e ID Setting an ID for a cell gives options for some better cell handling for advanced users and developers e No Wrapping Enables disables text wrapping i e forces a new line when the text reaches the Cell border e CSS Class Specifies cell CSS class and style This property should be used only by advanced users 11 9 Inserting Deleting Rows and Columns Once you have created a table you can easily add or delete rows and columns To do this right click inside a table cell to display the context menu To insert a new row do the following I Place the cursor in the row on top or beneath which you want to insert a new row li Right click to open the context menu lii From
70. mations Opens the media dialog The Windows media dialog allows you to insert upload media objects AVI MPEG WAV etc and set their properties Working with Windows media Opens the Insert External Video dialog The Insert External Video provides the ability to easily embed a YouTube or a Vimeo stream providing just the URL Opens the document manager dialog The document manager dialog allows you to insert a predefined document at the cursor position into the editor Working with documents Opens the template manager dialog The template manager dialog allows you to manage templates Working with templates Opens the Image Map editor The Image Map allows you to create images containing one or more invisible regions which are linked to other pages otherwise known as a hotspots Working with Image Maps Inserts a table in the RadEditor Inserting a table in the RadEditor is as easy as in Microsoft Word just click the button and select the number of rows and columns you would like to I RadEditor END USER DOCUMENTATION Stelerik FOR ASPNET AJAX create The table is inserted at the cursor position Working with tables Insert Table Light f Insert Table Light dialog is a light version of Table Wizard When enabled its content is rendered on page load and as a result the content is immediately loaded when the dialog is shown without any delay Insert a Hyperlink Makes the selection a
71. n use the Flash Manager dialog to upload Flash animations from your computer to the web server Once uploaded the Flash appears in the File Browser at the bottom of the file list in the current folder RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX Select x Remove Select x Remove Select Remove Overwrite if file exists Max file size allowed 200 00 KB File extensions allowed swf Upload Pagel of 1 Items 1 to 6 of 6 Cancel Figure 52 Upload dialog of Flash Manager To upload new Flash animations on the web server do the following I Click the Flash Manager button i to open the dialog li Navigate to the folder in which you want to upload the Flash lii Click the Upload button IV Click the Select button to select a Flash animation from your computer The multiple file upload controls allow you to upload multiple flash files simultaneously V Click Upload 16 3 Setting Flash Properties I RadEditor END USER DOCUMENTATION telerik FCR ASP NET AJAX Once a Flash animation is inserted you can manage its properties Click the Flash animation to open the Flash Manager 2 again The properties pane in right hand side of dialog loads properties of the current animation and allows you to change them Flash Manager 11 Sip Upload Specify Class ID Width 150 2 Banners Banners Bill Logos Height 150
72. ng the hottest features of RadEditor are Cut of the box YATMIE enabled Output Unmatched Loading speed and Performance MAhcrosoft Word lke apell checking never Ways for Pasting from Word Multilevel Cdo Redo with Action Trails Extended Punc ona ty Through hutegrated Controls Incdustry best Cross browser Support Design gt HTML Preview 29 Zoom 35 Wares 37 Characters 306 Figure 39 Unordered list content in RadEditor to create an inner level of numbering or V Click the Indent or Outdent buttons bullets 13INSERTING SPECIAL CHARACTERS E etc To insert a special character do the following I Select the place where you want to insert a special character Lh li Clickthe Insert Special Character button lii Click to select the respective character in the dropdown list JU RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX f Custom Links Normal H D x Figure 40 Expanded Insert Symbol dropdown 14 Inserting Dropdown menus Insert Select Dialog Insert Select dialog offers a way to easily create or edit lt select gt dropdowns in RadEditor It consists of two panels the first one is for adding and removing options elements while the second one is for setting up the properties of the drop down list r Insert Select B Add Remove Options Properties Height pixels Tet Width pixels Optiot Style Bui
73. opdown list choose an anchor inserted in the current document It is also possible to A insert a link pointing to a document by pressing the Document manager B icon in the link manager selecting a file and pressing the Insert button Iv Optional Fill the Link Text field if you want to specify the text of the link V Optional Select a target for the link vi Optional Enter a tooltip This text will appear when the mouse cursor is placed over the hyperlink text or image vii Click OK Hyperlink Manager Hyperlink 1 Anchor M E mail M O CSS Class Apply Class Cancel Figure 22 Hyperlink Manager dialog 9 2 Inserting a Hyperlink via the Insert Link dialog i Select the text or object that you want to set as a hyperlink il Click the Insert Link dialog button gi The Insert Link dialog appears A gU RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX iil In the URL field enter the web address that you want the link to point to iv Optional Fill the Link Text field if you want to specify the text of the link V Optional Select a target for the link vi Optional Click the All Properties button to set additional properties through the Hyperlink Manager vii Click OK Insert Link Ee Target Mone All Properties Figure 23 Insert Link dialog 9 3 Modifying a Hyperlink I Click inside
74. or The tool is very similar to the Format Painer of MS Word It can be quite useful and time saving when you need to apply identical formatting to multiple sections of the edited document Format a section with the desired bold italic underline font size font family or other formatting tool and press the Copy Format option inside the Format Painter dropdown This operation will save the formatting of the selected content e Toapply the saved formatting select the text that you want to format and click the Apply Format button e f needed you can also reset the saved clipboard formatting by pressing the Clear Format option RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX ind italic formatting which you can copy by clicking on the Copy ly Format Apply Form s E Clear Format Apply Format Design gt HTML Preview Figure 16 Expanded Format Painter dropdown popup 8 COPYING FORMATTED TEXT FROM Microsoft Word AND OTHER APPLICATIONS Copying formatted text from Microsoft Word Internet explorer and other applications is pretty straightforward RadEditor introduces a number of tools that help users paste formatted text from Microsoft Word or other applications and apply different types of format stripping Here is the list of different Paste buttons dialogs 8 1 Paste button or Ctrl V In case the user is trying to paste Word content with the regular Paste button key or Ctrl V a
75. ph style Click anywhere in the paragraph you want to format and select the preferred style from the dropdown Creates a numbered list from the selection Select some text or place the cursor inside a paragraph and click this button to make the text a numbered list Click the button again to turn the numbered list into a regular paragraph of text Creates a bulleted list from the selection Select some text or place the cursor inside a paragraph and click this button to make the text a bulleted list Click the button again to turn the bulleted list into a regular paragraph of text Indents a paragraph to the right This button indents a paragraph to the right Each time this button is clicked the paragraph is indented further to the right Decreases the paragraph indent to the left This button works only if indent has been applied to a paragraph beforehand To use this button click anywhere in the paragraph you want to indent to the Wel left and click Inserts a horizontal line ruler stelerik RadEditor END USER DOCUMENTATION Stelerik FOR ASPNET AJAX Click this button to insert a horizontal line below the cursor position ili Align Left Aligns the selected paragraph to the left Click this button to align selected paragraph to left Center Aligns the selected paragraph to the center Click this button to center the lines in the selected paragraph Align Right Aligns the
76. pper ES Format Painter END USER DOCUMENTATION telerik for developer oriented applications e g support systems forums etc The pasted text will look something like this lt img src Image example gif br strong What s new in version 6 0 lt strong gt Pastes copied content from the clipboard into the editor This dialog allows you to paste HTML code in to the editor s current selection and render it It is helpful when you need to enter predefined HTML code such as media embed source Pastes Markdown formatted text in the editor This dialog allows the user to paste content with Markdown syntax in the editor and render it Strips removes the formatting from the selected or the whole text Removes Word custom or all formatting Copies formatting from one piece of text and applies it to others in the content area of RadEditor To save the formatting of a selection press the Copy Format option inside the Format Painter dropdown To apply the saved formatting select the text that you want to format and click the Apply Format button If needed you can also reset the saved clipboard formatting by pressing the Clear Format option 6 4 Inserting elements Image Manager Opens the image dialog RadEditor END USER DOCUMENTATION Stelerik FOR ASPNET AJAX x Ctrl gG The image dialog allows you to insert upload create thumbnails and set image properties Working with images Set Image P
77. pply indentation to the selected text place the cursor inside a paragraph and click the indentation button I RadEditor END USER DOCUMENTATION telerik FOR ASP NET AJAX i E che Le gi uU T 5 gt A E b c W Ill XO X o 7 Times New R 12 Apply CSS Custom Links Normal d et Below are some commonly used properties of RadEditor Feel free to experiment wath the various options and witness the effect on the fly METER Ontdent Below are some commonly used properties of RadEditor Feel free to experiment with the various options and witness the effect on the fly Cri d Below are some commonly used properties of RadEditor Feel free to experiment with the various options and witness the effect on the fly Indent Below are some commonly used properties of RadEditor Feel free to experiment with the various options and witness the effect on the fly Design 49 HTML a g Zoom 345 Words 67 Characters 555 Fr Figure 12 Highlighted Indent and Outdent buttons 7 6 Applying CSS Classes Predefined CSS classes are used to ease the process of formatting To apply a CSS class select the text first and then select a class from the CSS Class dropdown list on the toolbar ss D f wf Times Mew 12pt Apply CSS
78. pported image formats v The RadEditor s Accessibility Validation tool dialog can be used to check if the produced output is not accessible The dialog uses the HiSoftware Compliance Sheriff Accessibility Module gt RadEditor preserves all accessibility information during authoring transformations and conversions gt RadEditor generates out of the box XHTML compliant markup gt RadEditor does not automatically generate equivalent alternatives and does not reuse previously authored alternatives without author confirmation An exception is that the ConvertToXhtml filter of RadEditor automatically inserts an empty alt tag if the alt tag is not set by the user The ALT tag is a requirement for producing XHTML compliant content gt Document all features that promote the production of accessible content this requirement is handled in this document RadEditor allows the author to change the presentation within editing views without affecting the document markup RadEditor offers the ability to zoom the content without affecting the produced XHTML markup using the Zoom dropdown zoom In addition the content appearance could be changed by external CSS style sheet provided by the developer v The RadEditor s HTML view mode displays the source structure of a document using graphic representations of tags and provides the author with the option of displaying the text of the elements instead i e html rather than a generic m
79. px Pos Last Action None Save As 276x250 asp net featured thumb gif 7 Overwrite if file exists Save Cancel Figure 46 Image Editor dialog open from Image Manager 15 4 Editing Image Properties By selecting an image in the Image Manager you can use the properties tab on the right to set its properties before insertion Once the image is inserted you can manage its properties through the right click Options context menu vtelerik END USER DOCUMENTATION Image Alignment X Properties Width 276 px Height 250 px Border Color Border Width Alt Text Product Logo a Long Description Image Src Marketing 276x250 asp net ain 2 m sj CSS Class Apply Class Sb Image Editor 44 Width 276 px Image Alignment 9 Height 250 4 Banners Logos Print Border Color Border Width Alt Text Product Logo Title Text Product Logo 270x250 telerik 125x DNR gif 125 asp gif Long Description 3 5 asp net featured gif P um i TT z iil Ld Margin j telerik 125x sample 200x50 Bottom chart png asp net featured j CSS Class Apply Class 125 orm gif g Properties Cancel Sitefinity jp g _ i Page 1 1 Items 1 10 10 Figure 48 Set Image Properties of a selected image within Image Manager A NU RadEditor END U
80. roperties Edit image properties of an already inserted image Properties dialog To edit image properties such as Width Height Border Color Border Width Alt Text Long Description Image Alignment Image Src Margins and apply Css Class to it use the Set Image Properties dialog It could be launched either from the image context menu or through the Properties button of the Insert Image dialog Insert Image Light dialog Insert and edit images t3 This dialog is a light version of Set Image Properties and its content is immediately loaded without delay The user could insert images with HREF paths that come from internal or external domains Image Editor x This dialog could be launched via the Image Manager and provides the ability to resize flip rotate crop selected image element as well as set its Opacity Absolute Positioning Sets an absolute position of an object Ei Enables you to move an object image table or media freely into the editor Flash Manager Opens the flash dialog The flash dialog allows you to work with flash files insert and upload Rl animations Working with flash animation RadEditor FOR ASPNET AJAX Windows Media Manager Insert External Video Document Manager i53 Template Manager Image Map Editor Insert Table END USER DOCUMENTATION stelerik The Silverlight manager allows you to work with XAP files insert and upload ani
81. s gt Meals lt th gt lt tr gt dealer eabi EST ela th id hwinter gt Winter lt th gt th id hsummer gt Summer lt th gt th id mwinter gt Winter lt th gt th id msummer gt Summer lt th gt m SEE th id loc headers city gt Seattle lt th gt td headers loc hotels hwinter 200 td lt td headers loc hotels hsummer gt 150 lt td gt tdheaders loc meals mwinter 5570 td td headers loc meals msummer gt S90 lt td gt AT lt tr gt th id loc2 headers city gt Denver lt th gt lt td hheaders loc2 meals hwinter gt 170 lt td gt lt td headers loc2 meals hsummer gt S180 lt td gt lt td headers loc2 meals mwinter gt S7 5 lt td gt td headers loc2 meals msummer gt S 75 lt td gt lt table gt 28 2 Creating Accessible Hyperlinks A hyperlink can be interpreted by the narrative software if you specify an additional description in the Tooltip field Note that link text should never be click here or more information The link text should always describe specifically where the user will navigate to once activating the link RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX In the example below the Link Text should be Telerik Home Page there does not need to be a Tooltip added Optionally the user could include the text Link opens in New Window see information at http www w3 org TR 2008 NOTE WCAG20 TECHS 2008
82. s underlined added deleted content is marked with a strike through line deleted and modified formatting is wrapped with vertical bars formatted In addition a tooltip and a little popup with information about the applied change will appear at the bottom right corner of the browser Eg s Ge RadEditor is not simply an HTML Editor It 15 what Microsoft chose to use in IMSDN E CodePlex 2 215 TechNet MC and even as an to the default editor in SharePoint r van need as sth Goan snellchecler or a Word like content authoring T RadEditorUser on s 08 2012 s 50 41 der erms widest cross browser support and Wis of features Single Ig drag and dro deployment RadEditor takes full advantage of NET embedded resWurces guisa you to deploy RadEditor with a single assembly file and jump start your development process Built on top f ASP NET AJAX RadEditor is a native Net 2 0 component designed upon AMP NET AJAX utilizing its common chent side framework and programming modeMThis allows for previously impossible performance and architecture optimizati amp ps to offer small size efficient and optimized component with mdustry unique levekof performance Hl Ihe computer language used to create wehid wide web pages which are read by browsers 4 HTML Preview Format change ltalic by RadEditorUser on Tuesd
83. select the text first and then select a font from the dropdown list on the toolbar RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX T E ur D me x 24 J Times New R l2pt Apply 55 Custom Lin E Courier Mew L3ararnond Georgia ql MS Sans Serif Sec n UI Gi Tahoma Times Hew Romar verdana Figure 7 Expanded Font Name dropdown popup 7 2 Changing the Text Size To change the font size of some text select the text first and then select a font size from the dropdown list on the toolbar T v5 8 315 GG TEAME BZ U te HF iS C 07 Times Mew L2pt Apply CSS Custom Linl Figure 8 Expanded Real Font Size dropdown popup 73 Applying Text Colors RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX I To apply a foreground color to some text select the text first and then click the Foreground Color button on the toolbar This opens a color picker where you select a color to apply Custom Lin Yerdana Figure 9 Expanded ForeColor dropdown with hovered red color item li To apply a background color to some text select the text first and then click the Background cb Color button on the toolbar This opens a color picker where you select a background to apply AAI a
84. selected paragraph to the right Click this button to align the selected paragraph to the right Justify Justifies the selected paragraph to the left and to the right Click this button to justify the selected paragraph Remove Alignment Removes the alignment of the selected paragraph Click this button to removes the alignment of selected paragraph 6 3 Working with portions of text AjaxSpellChecker Launches the inline AjaxSpellChecker RadEditor FOR ASPNET AJAX Print Ctrl P E Cut Ctrl X E Copy Ctrl C END USER DOCUMENTATION Stelerik The spellchecker is a tool for checking spelling of the written text RadEditor brings the spellchecking experience to a whole new level with the addition of an inline AJAX spellchecker You can now check your spelling asynchronously and all your mistaken words will be highlighted inline The context menu on every word gives you a quick and easy way to Change Ignore or Add the word to a custom dictionary Spell checking Prints the contents of the RadEditor or the whole web page Click this button to launch your default printer s dialog box Click OK or Print to print the current page in your web browser You can set your printers properties before printing Printing web page Cuts the selected content and copies it to the clipboard This button works on the selected text image and or table Select some
85. sert 69 74 Set Properties 72 76 Upload 71 75 Font 29 Formatting Paragraphs 15 34 35 Formatting Text 13 HTML Inspector 11 HTML Mode 104 Hyperlink Accessibility 98 Anchors 44 Custom Links 46 E mail links 45 Insert a Hyperlink 23 40 Remove Hyperlink 23 43 Image 20 62 Absolute Positioning 69 Accessibility 100 101 103 Edit Properties 66 Insert 63 Upload 64 Indentation 32 Lists 59 Modifying a Hyperlink Modifying a Hyperlink 42 43 Modules 10 Paste 18 Paste As HTML 19 Paste From Word 19 Paste From Word Cleaning Fonts and Sizes 19 Paste Plain Text 19 Preview mode 105 Print 18 106 UU RadEditor END USER DOCUMENTATION telerik FOR ASPNET AJAX Properties Inspector 11 Resize 57 Size 30 Special Character 23 60 Spellcheck 94 Statistics 12 Table 22 Accessibility 96 Create using the Table Builder 49 Create using the Table Wizard 49 Format with CSS classes 58 Formatting Tables 53 Insert from Excel or other applications 52 Insert Delete Rows or Columns 56 Merge Split Cells 57 Show Hide Table Borders 26 52 Tag Inspector 10 Template Manager 22 86 Insert Templates 86 Upload Templates 87 Time and Date Insert Date 24 Insert Time 24 Windows Media 22 77 Insert 77 Set Properties 81 Upload 80 XHTML Validator 103
86. soseoseoueeutsureaesaneaeeneanean 39 8 8 acces ane PEE MUI MEM MIENNE 40 9 WORRING 40 9 1 A 40 9 2 INSERTING A HYPERLINK VIA THE INSERT LINK DIALOG rrr nre 41 9 3 Becca eva ccc cares Fab 42 9 4 MODIFYING A HYPERLINK VIA THE INSERT LINK DIALOG 43 9 5 REMOVINGA hid du 43 9 6 ANCHOR a suco ne oe ni ee ee 44 9 7 INSEDTENG EMAILLE 45 9 8 CUSTOM LINE 46 10 FINDAND REFLAGE DRA 47 IL MELE enaena 49 11 1 CREATING A TABLE USING THE TABLE BUILDER 49 RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX 11 2 Re TABLE USING THE TABLE WIZARD 49 11 3 CREATING A TABLE USING THE INSERT TABLE LIGHT DIALOG erret tnra 51 11 4 INSERTING A TABLE FROM MICROSOFT EXCEL OR OTHER APPLICATIONS eerte 52 LIIS ener eee eee een ee 52 DEO DABEDS uuassetuenetie RHEINE EAA N NEUE 53 11 7 TABLE PROPERTIES EXPLAINED sssssssssssssssssessesscsscsscssessessessessessessucsussussussassacsacsassacsacsaceseessessesesssesneeneeneess 53 11 8 CELL PROPERTIES E
87. ssary Microsoft Office related tags Place the cursor where you want the item to appear and clic ele In case you try to paste Word content with the regular Paste button or Ctrl V a dialog will appear asking whether to clean the Word markup If the Clipboard content does not come from Word the dialog does not show Paste From Word Cleaning Pastes copied content from the clipboard into the editor Fonts and Sizes E After you have either Cut or Copied an item text image etc in Microsoft Word you can Paste it using this button RadEditor cleans unnecessary Microsoft Office related tags plus font formatting Place the cursor where you want the item to appear and click Paste Plain Text Pastes copied content from the clipboard into the editor Ctrl V After you have either Cut or Copied an item text image etc you can Paste it using this button The Paste Plain Text button works similarly to Paste from Word but it removes all HTML formatting and pastes plain text preserving the line breaks Paste As HTML Pastes copied content from the clipboard into the editor Ctrl V After you have either Cut or Copied an item text image etc you can allows you to paste HTML content of the Clipboard as code which may be quite convenient Paste it using this button This new too n RadEditor FOR ASPNET AJAX Paste HTML Paste Markdown Format Stri
88. t hyperlinks build tables and insert images Flash documents etc Note Some of the features described in this manual may not be available in your specific application Please consult your product developer for availability of features and further instructions 3 Authoring Tool Accessibility Guidelines 1 0 ATAG RadEditor END USER DOCUMENTATION Stelerik FOR ASPNET AJAX Authoring Tool Accessibility Guidelines 1 0 ATAG is a guideline which assists developers in designing authoring tools that produce accessible Web content and assists developers in creating an accessible authoring interface It is just as important that all people be able to author content as it is for all people to have access to it Telerik RadEditor fully satisfies the requirements for Conformance Level A of Authoring Tool Accessibility Guidelines 1 0 ATAG gt Ensure that the author can produce accessible content in the markup language s supported by the tool RadEditor offers support for producing and editing XHTML Y RadEditor supports all XHTML and HTML specifications and structural features of these markup languages v The editor allows the author to directly edit the source markup so knowledgeable authors can ensure accessible content The author is able to see and edit the produced content in HTML mode Y The RadEditor s Image manager and Insert Image dialog allow the addition of equivalent alternatives for all su
89. ted Image Map area from the provided Properties pane and set the URL to link the hotspot to another web page iv Click OK to insert the modified image map in the content area Image Map Editor EJ Choose Image Choose Image Marketing 276x250 asp net Select Area Shape O L O S amp Rectangle Circle Define Area Properties Left 10 px Top 10 px Mew Area Width 20 px Height 20 px URL http www telerik com etelerik IS Ta rget 1 Ta rget Alt Text Telerik Update rea Remove rea RemoveAll Cancel Figure 67 Image Map Editor Preview I RadEditor END USER DOCUMENTATION telerik FOR ASP NET AJAX 23 USING THE COMMENTS FEATURE RadEditor offers an easy way to add edit or remove comments in the content area This functionality is particularly handy when collaborating or sharing HTML content The comments feature is based on the following three buttons C AddComment Use this button to insert a comment over selected content e g i highlight the area of text which you want to comment ii click the Add Comment button to open the Comments dialog ii type comment and save it via the Save dialog button The inserted comment will be highlighted with a color dashed border in the content area The Comments dialog will show up once a comment is selected amp RemoveComment to remove an existing comment select it and press the Remove Comment button
90. the hyperlink or in the image if you have an image link li Right click to open the context menu and click Properties Alternatively you may click the Hyperlink Manager button E3 again The Hyperlink Manager dialog will appear iii Modify the hyperlink attributes URL tooltip etc and click OK RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX 2 Design gt HTML Preview 2 Baal URL http www telerik Target Hyperlink Manager Title Telerik Classname Figure 24 Highlighted Properties tool from hyperlink element s context menu 9 4 Modifying a Hyperlink via the Insert Link dialog I Click inside the hyperlink or in the image if you have an image link li Click the Insert Link dialog button Sj The Insert Link dialog will appear iii Modify the hyperlink attributes URL Link Text etc and click OK 9 5 Removing a Hyperlink I Select the text or image that has been set as a hyperlink li Click the Remove Link button You will notice that all formatting related to links blue color underline etc will be removed from the text This holds true for the inserted documents as well RadEditor END USER DOCUMENTATION Stelerik FOR ASP NET AJAX 9 6 Inserting Anchors The anchor function is particularly helpful if you have a very long web page With this function your readers will be able to jump from one section of the page
91. the menu select the Insert Row Above Below B 7 Ug A Custom Lin Li 4 2 4 eb un 4 E t d T t t ry wi e Insert Row Above Insert Row Below w B Il aa Delete Row Insert Column to the Left Insert Column to the Right Delete Column Figure 35 Highlighted Insert Row Below tool of table s context menu a RadEditor END USER DOCUMENTATION Stelerik FOR ASPNET AJAX You can insert new columns in a similar fashion To delete rows or columns simply place the cursor in the respective row column and select Delete Row Column from the context menu 11 10Merging Splitting Cells Insert Column to the Left Insert Column to the Right Delete Column Merge Cells Horizontally Merge Cells Vertically Merge Cells Horizontally Split Cell amp Split Cell Horizontally Figure 36 Highlighted Merge Cells Horizontally tool of table s context menu To merge a cell with the adjacent cell do the following I Select the cell li Right click to open the context menu lii From the menu select Merge Cells Horizontally Vertically To split a cell do the following I Select the cell li Right click to open the context menu lii From menu select Split Cell Split Cell Horizontally
92. to another In other words the anchor is used for hyperlinks that lead to the same page or a particular place in another page The anchor defines the destination to which a hyperlink must lead Then you can create a hyperlink and point it to that anchor Hyperlink Hyperlink Anchor E mail Anchor Cancel Figure 25 Anchor Tab of Hyperlink Manager dialog with populated Name filed I Define the Anchor Place the cursor where you want the hyperlink to lead ii Click the Hyperlink Manager button ial Select the Anchor tab Enter a unique name for the anchor e g product1 iii Click OK W Create the hyperlink that will lead to the Anchor Select some text or an image v Click the Hyperlink Manager button 2 again Select the Hyperlink tab vi Inthe URL filed type followed by the name of the anchor in our case Anchor1 so you will have to enter 1 In addition from the Existing Anchor dropdown list you can select an anchor inserted in the current document RadEditor END USER DOCUMENTATION FOR ASP NET AJAX stelerik Hyperlink Manager H SS yperlink Anchor URL http A ag Link Text Existing Anchor Mane gt Mone Anchor CSS Class Apply Class Tooltip Cancel Figure 26 Hyperlink Manager dialog with expanded Existing Anchor dropdown vii Change the Type to Other viii Click OK
93. used to provide extra information for the users who work with RadEditor in Edit mode Currently there are four modules shipped out of the box with the editor e Tag Inspector e Properties Inspector e Real Time HTML Inspector e Statistics Module 5 1 Tag Inspector This module displays the path of the selected item i e the DOM path of the current element It also allows you to select the last innermost tag in the hierarchy and remove it using the Remove Element button This system module fulfill the ATAG requirements to allow the author to navigate through parent elements of the currently selected one i a Apply CSS CL Custom Links Normal RadEditor FOR ASP NET AJAX RadEditor is not simply an HTML Editor Itis what Microsoft chose to use in MSDN odePlex TechNet MOMS and even as an alternative to the default editor in SharePoint Whether you need a mere Textbox with Google like spellchecker or a Word like content authorng environment the result is the same clean XHTML output fast rendering widest cross browser support and tons of features Design 49 HTML Preview gt A gt RemoveElement Figure 2 A selected hyperlink element in the Tag Inspector module UU RadEditor END USER DOCUMENTATION telerik FOR ASPNET AJAX 5 2 Properties Inspector This is a powerful module that displays the relevant properties of the currently selected element As a result
94. ve modules are marked with a check mark Inactive modules are marked with a cross Zoom In Out Click here to zoom in or out the editable area This tool satisfies the requirements of ATAG accessibility guidelines RadEditor END USER DOCUMENTATION Stelerik FOR ASPNET AJAX 6 6 Miscellaneous Help Shows help on the functionality of buttons e Click to open a window with a short description of each button its functions a keyboard shortcut if such is available Undo Disregards the last action 2 Ctrl Z Click to undo your last changes This includes but is not limited to inserting tables moving images and formatting text Expand the dropdown list to select multiple actions to undo Redo Redoes the last undone action Ctrl4 Click to redo the last undone action Expand the dropdown list to select Shift Z multiple actions to redo Ctrl Y Find and Replace 34 Ctrl F Opens the Find and Replace dialog Find and Replace Select All Ctrl A Selects the whole content of the editor text images tables etc E Insert Groupbox Inserts a fieldset element in the content area A m RadEditor END USER DOCUMENTATION Stelerik FOR ASPNET AJAX XHTML Validator Uses the W3C XHTML Validator Page to perform validation of current editor content Format Code Block Provides the ability to edit and format code blocks of text whether they

END USER DOCUMENTATION 1 End-user manual

Contents

Download Pdf Manuals

Related Search

Related Contents