Home

Version 6.5 End-user manual Last revision: June 29

1. 24 12 WORKING WITH TABLES ec cece cececeececececeececececnceececececeeneeseeeeenensseeeuenseseeeeeusnseseeenenenseaseees 25 12 1 CREATING A TABLE USING THE TABLE BUILDER ccccccccecececececececececucucecucucutecececececececececeees 25 12 2 CREATING A TABLE USING THE TABLE WIZARD cccccccccececccecececececececucucucucucetececececececececececas 26 12 3 INSERTING A TABLE FROM MICROSOFT EXCEL OR OTHER APPLICATIONS 27 12 4 TOGGLE TABLE BORDERS cccccececececececececacacaccccccucucuceacacauacauauaeaucucecuceaenenenenenenenenenenenenenenes 27 12 5 FORMATTING TABLES eudaedtesshceuaeasdeniinaddueesenstaediawdadaedeacdees 27 12 6 TABLE PROPERTIES EXPLAINED cantieri ian ius cadet Moda vats ac aso just abend 28 12 7 CELL PROPERTIES EXPLAINED aio bode voro jeavdauacpesdadwanava born bot with 29 12 8 INSERTING DELETING ROWS AND COLUMNS cccccccccecccecececececececececucucucucucececscecscecececececececeeas 30 Tes ns GP Visual Studio net NH as racedilor The high end WYSIWYG editor for ASP NET Stelerik M eee 12 9 MERGING SPLITTING 8
2. 31 12 10 Nc 31 12 11 FORMATTING TABLES WITH CSS CLASSES ccecececececccccccceccceneneneuececececeneaeuenenenenenenenenenens 32 13 CREATING BULLETED NUMBERED LISTS 2 0 0 cee cece ceceeeecececneeecececneesceceeucecnenseeceeaensceseeeens 33 14 INSERTING SPECIAL CHARACTERS 6 E poste 33 15 WORKING WITH IMAGES 34 15 1 INSERTING AN IMAGE FROM THE WEB SERVER cscscccsccccecececccecececececececucucucacucececececececececececenes 34 15 2 UPLOADING IMAGES ON THE WEB SERVER csceccccccccececececececececececececucucueecececstececececacecacecececas 35 15 3 CREATING IMAGE THUMBNAILS ccecececececcccccccccccecececececececeaenenenenenenenenenenenstetecstacecacacececeees 35 15 4 EDITING IMAGE PROPERTIES ccececececececececececcccacacacauacaeaeceaecuaeaeaeeeseauaeaenenenenenenenenenenenenenss 36 15 5 ABSOLUTE POSITIONING ccccccecececececccecececcccccccucucucuacacaectacauauauauaeaucenenenenenenenensneneneneceauaenss 37 16 WORKING WITH FLASH ANIMATIONS eere nnne 37 16 1 INSERTING A FLASH ANIMATION FROM THE WEB SERVER cccececececececececececececececaceuauaua
3. 3 spat Cell Background Image x Delete Cel Set Table Properties CSS Class Clear Style Show Hide Border Once the Cell Properties dialog 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 images as the cell background e Content specifies default content for the cell You can input the content after you insert the table as well e ID setting an ID cell gives options for some better cell handling for advanced users and developers No Wrapping enables disables text wrapping i e forces a new line when the text reaches the Cell border CSS Class specifies cell CSS class and style This property should be used only advanced users 12 8 Inserting Deleting Rows and Columns Once you have created a table you can easily add or delete rows and columns This is done from the context menu which appears on right click inside a table cell 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 Right click to open the context me
4. Aog cem H E Jj 1 E e D 3 MH m B 1 1 g te ee Se ete See Se ee eee qn ae s Sete E r7 Cancel Update To resize table with a drag and drop do following I Click on the table border to select the 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 the table All cells which do not have exact dimensions specified in pixels will be resized evenly to accommodate the new table size 12 11 Formatting Tables with CSS Classes CSS class provides 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 Click in the table cell Right click to open context menu li From the dropdown menu click on 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 on the Update button ASSY Ba Blo r E d Cell Spacing f 4 4 5 s s S Fonts Size 7 A
5. ab tu qu ra 17 8 2 CHANGING THE TEXT SZE a ee EM PE CLER DUE FPE 17 8 3 APPEYING TEXT COLORS ico vous ots LUN PEE 18 8 4 SETTING TEXT ALIGNMENT TT EP 18 8 5 Tm 19 8 6 APPLYING CSS CEASSES 20 8 7 APPLYING PARAGRAPH STYLEG cccccccccececececececececececececetecsceceueceuenenecetecetecetscscacacecacecacauacacecas 20 9 COPYING FORMATTED TEXT FROM MICROSOFT WORD AND OTHER APPLICATIONS 21 10 WORKING WITH HYPERLINKS 21 10 1 INSERTING 21 10 2 MODIFYING scicisodecetecdscccvececetacdececeseavalactiacsiacnwedcsueuwsdwohes iesdhesweeseasiateadiennedeadedeuees 22 10 3 REMOVING A HYPERLINK ccccececececececececececccecuauacacaecetaeceaeauceaeaueauaeaeaeaeaeneneneneneneneenuaeaeass 22 10 4 INSERTING ANCHORS ccscscscececececececccccacccacacaccucuccacacacacauauauauauauauaeauceaeauaenenenenenenenecucucuauaenes 23 10 5 INSERTING E MAIL 23 10 6 INSERTING CUSTOM LINKS c ccecececececececececcccauacacauauaeneueceaeauauauauaeauauaeaeaeaeneneneneneneneneneneaeass 24 11 FIND AND REPLACE
6. can Paste it using this button This new tool e allows you to paste the HTML content of the Clipboard as code which may be quite convenient for developer oriented applications e g support systems Ctrl V forums etc The pasted text will look something like this lt IMG src Image_example gif gt lt BR gt lt BR gt lt FONT face Arial gt lt STRONG gt What s new in version 6 0 lt STRONG gt lt FONT gt Format Stripper ts Fomati sinope Strips removes the formatting from the selected or the whole text Removes Word custom or all formatting 7 4 Inserting elements Image Manager Pressing this button will open the image dialog which allows you to x Ctrl G manage images inserting uploading creating thumbnails and setting image properties Working with images Tes 14 Visual Studio net The high end WYSIWYG editor for ASP NET Stelerik Absolute Positioning Sets an absolute position of an object Pressing this button will help you move an object image table or media freely into the editor E T Flash Manager Opens the flash dialog The flash dialog is used for working with flash files inserting and uploading animations Working with flash animation The Windows media dialog is used for inserting and uploading media objects AVI MPEG WAV etc It also lets you set the objects properties Working with Windows media
7. Cancel 7 TOOLBAR BUTTONS 7 1 Formatting Text Appearance The buttons in this section work on a selected portion of text For some tools it is enough to position the mouse cursor in a word to apply the necessary formatting E Select the text and press this button to apply bold formatting If the cursor is positioned in a single word pressing this button will bold the entire word H Italic Applies italic formatting to the selected text Select some text and press this button to apply formatting If the I Ctrl I cursor is positioned in a single word pressing this button will apply italic to the entire word Select some text and press this button to apply underline formatting If Ctrl U the cursor is positioned in a single word pressing this button will underline the entire word Tor 11 GP Visual Studio net The high end WYSIWYG editor for ASP NET Stelerik Strikethrough Applies strikethrough formatting to selected text Select some text and press this button to apply strikethreugh formatting Ar If the cursor is positioned in a single word pressing this button will strikethrough the entire word Font Name Sets the font typeface This dropdown allows you to change the font of the selected text _ Font Size Sets the font size PE oe These dropdowns allow you to change the font size of the selected text px Text
8. k am du 1 1 I 3 ic E So nni cb TimesNewRome 3 Apph C55 Class Custom Links Normal dx m y LT Insert Row Below J t F Tesis ELLA X Insert Column the Left 3 Insert Column tothe Right Delebe Column mM Merge Cells Horizontally TM m Backyard _ Merge Cells Vertically amer EL Spit Cell E CeiPaMing Ex Delete 9 Set Cell Properties Bigard a Set Table Properties Table C55 URS Cm Cea Xe 4 Shew Hide Border 12 6 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 e Width Height specifies the height and the width of the table in pixels or percent e Background sets the background color of the table Optimised Tog 226 Gh Visual Studio net pU rac edilor The high end WYSIWYG editor for ASP NET Stelerik 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 the cells Cell padding increases or decreases the space between the content and the border of a cell Border includes setting border width color and layout ID setting an ID for a table gives some options for advanced ta
9. i Search Direction n DEL p Selection only Down E T Match case cancel Match whole worda only lt gt adate To find and replace certain abstract of text do the following I 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 will appear lii In the Find field type the word or abstract of text you want to find iv Replace lf you want to replace this text with a different one click on 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 After you have replaced given text with the Replace or Replace All functions you can click Cancel and the replacement will be undone To confirm the replacement click OK 12 WORKING WITH TABLES r a d editor offers two ways for creating tables The best approach in a given situation depends your preferences and the table complexity For simpler tables we recommend the click and drag Table Builder while for more complex tables the Table Wizard is more appropriate 12 1 Creating a Table Using the Table Builder i Position the cursor where you want to create the table ii Click on the Insert Table button D on the r a d editor toolbar iii Dr
10. 5 4 Statistics This module provides word character count or other analysis of the content It finds its main usage area for writing articles with given character word limit ay Z n BH P Defining the next level of browser based content editing KHTML 1 1 and Accessibility compliance improved perormance enhanced cross browser support Optimized Tor zi Gh Visual Studio net Stelerik 5 5 Integrated XHTML Validator This module is used for real time validation of XHTML compliance You can enable the XHTML validation module by selecting it from the Modules list If you do not see the module in the list this means that it has not been defined in the ToolsFile Connect the developer of your application for details i zt Words 18 Characters 192 L9 Statistics Tag Inspector Properties Inspector 2 Real Time HTML View gt SHTML Validator Once the XHTML validation module is enabled you can check the HTML content you are currently working on by clicking the Validate XHTML button M Expand Report Pane Select Doctype XHTML 1 1 validate xHTML Validation C3 Markup Validation wc Assurance N 7 RA DEA En Home ABOUT News Help amp FAL Feedback Jump To Result Passed validation File RadEditorontent htm his HIT E moo Fi mol 6 DOCKING TOOLB
11. Other viii Press OK 10 5 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 Hyperlink Manager Hyperlink ais Anchor gt E mail Address suppartiitelerik com OK Link Text Contact Us Cancel Subject Request for Information CSS Class Class Select the text or image which you want to set as an e mail link I Click the Hyperlink Manager button The Hyperlink Manager dialog will appear li Click on the E mail tab lii Enter the e mail address in the Address field Iv Optional Enter a text which will appear as an email link v Optional Write down a subject for the e mail message in the Subject field vi Optional Choose a CSS Class from the dropdown menu vii Press OK Tor 23 GP Visual Studio net E s NH as rac edilor The high end WYSIWYG ASP NET telerik D L 10 6 Inserting Custom Links In some cases r a d editor 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 menu L lins 7 As a
12. Place the cursor where you want to insert the code snippet li Click the Insert Code Snippet button lii From the dropdown menu select the respective snippet Optimized Tor 44 G5 Visual Studio net E The bisb end WYSIWYG editor for ASP NET Stelerik 4 Ha d d m RIO al E x FE 3 0 09 _ X D Times Mew Romer 2 C55 Class Order Confirmation E 2 Signature ASCII Ark Ar T ET NEI ENNE SE EA E EE EEEE ee eee John Wigham p senior Web Developer site com Disclaimer The of this e mal are privileged and confidentia and Intended for the addressees dt ihe specified e mai addresses only gt Cancel Update 20 CREATING ACCESSIBLE CONTENT Section 508 compliant In order to generate content that can be interpreted by the Accessibility Tools integrated in Microsoft Windows the Narrator the Magnifier and the On Screen Keyboard r a d editor includes additional fields in the Table Hyperlink and Image dialogs 22 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 vision can hear those Tooltips as they hover over the cells with the
13. Pressing this button will open the dialog which will help you insert a predefined document at the cursor position into the editor Working with documents Template Manager Opens the template manager dialog Opens the template manager dialog which allows you to manage Blue Meis Working with templates Insert Table Inserts a table in the r a d editor Inserting a table in the r a d editor is as easy as in Microsoft Word just click the button and select how many rows and columns you would like inserted in the editor The table will be inserted at the point where the cursor is Working with tables Insert a Hyperlink Makes the selected text number or image a hyperlink This button lets you create a hyperlink from the selected text or image The hyperlink dialog window will open It allows you to choose what type ie Ctrl K Mc of link you want to insert Hyperlink Anchor or E mail Working with Remove Hyperlink Removes hyperlink from selected text number and image Ctrl If you press this button after you have selected an image some text in a es mE Shift K special characters that are built in the r a d editor The special character Insert Code Snippet Inserts a predefined code snippet code snippets hyperlink anchor or e mail link the link will be removed from this object will be inserted at the location of the cursor If you want to insert a symbol Pressing this button will insert a pr
14. L Signature html Bb fonthly Rep ProductA January Projected Actual Press the Insert Template button Bh I dialog will open to display a list of folders and template files which you are allowed to browse Select the file you want to insert You see the preview of the file in the preview window li Press Insert The template will be inserted in the editable area 19 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 will appear in the Choose Template tab at the bottom of the file list in the current folder Choose HTML Template ip Choose template CL Directory fe ditor WMpbad File template Fini Browse file size allowed 200 File extensions allowed hbml To upload a new template file on the web server do the following I Click the Template Manager button ip open the dialog li Navigate to the folder in which you want to upload the template file lii Press the Upload Template tab Iv Click Browse to select a Document file from you computer v Click Upload Tor 43 G5 Visual Studio net rac edilor The biob end WYSIWYG editor for ASP NET telerik 20 SPELL CHECKING r a d editor features a multilingual spellchecker which can be invoked by clicking on t
15. 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 Browse Files tab at the bottom of the file list in the current folder Document Manager Web Page Dialog Browse Files Upload Document Document Directory ir a d editor O UserDir HumanResources Docs DacumertstendLserManual pdf Browse Max file size allowed 500 KB File extensions allowed doc pdt To upload new Document files on the web server do the following I Click the Document Manager button B to open the dialog li Navigate to the folder in which you want to upload the Document lii Press the Upload Document tab Iv Click Browse to select a Document file from you computer v Click Upload Optimised Tor 42 GP Visual Studio net 19 WORKING WITH TEMPLATES r a d editor allows you to insert external files e g a file with pre formatted tables signatures etc to 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 with the only difference that they are obtained from individual files which the user can browse upload delete etc 19 1 Inserting Templates i Choose HTML Template Upload template URL a 4 editor img UserDi Templates Table mm
16. css Cla Cell Padding B CSS formatted table Background Image Product 25 Product 2 345 Table C55 Product3 45 CSS Clase Style DropDown TableStyle3 Optimised Tor 32 Gh Visual Studio net coc Bee racedilor The high end WYSIWYG ASP NET Stelerik z m 13 CREATING BULLETED NUMBERED LISTS To create bulleted or numbered lists do the following I Select the text which you want to convert to list li Click the Bulleted Numbered list button FE on the toolbar lii Press Enter to create a new line of the list iv Press Ctrl Enter to end the list E xD Times New 2 Apply C55 Class Custom Links Normal E Ar e User Interface skinning e Floating Toolbar Multiple editors in a single page E In i Lij D Cancel Update A lt gt el E Pressing the Indent or Outdent button L3 allows you to enter to an inner level of numbering or bullets 14 INSERTING SPECIAL CHARACTERS etc To insert a special character do the following I Select the place where you want to insert a special character li Click on the Insert Special Character button e lii Click on the respective character in the dropdown menu Tes
17. d ER Fo HER ER 10 6 DOCKING TOOLBARS AND 10 6 1 DOCKABLE TOOLBARS MODULES 10 6 2 UN DOCKING TOOLBARS AND MODULES cccccecccecececececececececececucccucucececececececutucacacecucececececas 11 7 TOOLBAR BUTTONS 11 7 1 FORMATTING TEXT APPEARANCE ccccccccccecececececececececececucucucucuceneceuetececeuecscecscetecacacetacececucenes 11 T 2 FORMATTING PARAGRAPHS amp LISTS ccccccccecececececececececececucucucecucucececetecececsteceteuucacececacececacenas 12 7 3 WORKING WITH PORTIONS OF 13 7 4 INSERTING Ec RR RTT 14 715 ilz EEN E 16 7 6 ERROR ERR 16 T T OTHER KEYBOARD 17 8 FORMATTING 17 8 1 CHANGING THE TEXT FONT
18. inter word newspaper distribute all lines distribute inter ideograph auto none capitalize uppercase lowercase length percentage auto normal embed bidi override visible hidden inherit normal break all keep all normal length value auto zoom Sets or retrieves the magnification scale of lt percent gt 53 Optic Tes GP Visual Studio net rac edilor The bigh end WYSIWYG editor for ASP NET telerik Tes 54 Gh Visual Studio net
19. the respective field Include the prefix e g clsid v Click Insert to finish or Close to cancel the operation 16 2 Uploading Flash Animations on the Web Server You can use the Flash Manager dialog to upload Flash animations from your computer to the web server Once uploaded the Flash will appear in the Browse Files tab at the bottom of the file list in the current folder Flash Manager Web Page Dialog Browse Files amp Upload Flash Directory Ir a d editor Wweb Img LserDir 12 5A dvertisingiMovie2 swf Note file size alowed 100 KE To upload new Flash animations on the web server do the following I Click the Flash Manager button D to open the dialog ii Navigate to the folder in which you want to upload the Flash iii Press the Upload Flash tab iv Click Browse to select a Flash animation from you computer v Click Upload 16 3 Setting Flash Properties Once a Flash animation is inserted you can still manage its properties Simply click on the Flash animation and then open the Flash Manager P again The properties pane in the right hand side of the dialog will load the properties of the current animation and will allow you to change them Optimised for m 38 GP Visual Studio net UU rac edilor The bigh end WYSIWYG editor for ASP NET telerik Browse Files amp Upload Flash Directory fr a d editorWebsImog UserDirfradEditorBannerO
20. 1 4 borderBottomStyle borderBottomWidth The borderBottomWidth property is used thin thick to specify the width of a table s bottom medium length gll uk border The value may be one of three keywords or a length which can be used to achieve relative widths Negative values are not allowed borderLeftColor The borderLeftColor property sets the color color of the left border of a cell or table transparent borderLeftStyle The borderLeftStyle property sets the none groove style of the left border of a table or cell dotted ridge This property must be specified for the dashed inset border to be visible The borderStyle solid outset property has priority over borderLeftStyle double 1 4 borderLeftWidth The borderLeftWidth property is used to thin thick specify the width of a table s left border medium length Negative values are not allowed borderRightColor The borderRightColor property sets the color color of the right border of a table transparent borderRightStyle The borderRightStyle property sets the none groove style of the right border of a table This dotted ridge property must be specified for the borderto dashed inset be visible The borderStyle property has solid outset priority over borderRightStyle double 1 4 borderRightWidth The borderRightWidth property is used to thin thick specify the width of a table s right border medium length Negative
21. 1 swf Specify Class ID O YES o Ma width Height HumanResources Marketing radEditorBanner 1 swf Guality High radEditorBannerO swf Loop Q ves 9 No radEditorBannerOs swf Flash hlenu ves 9 HTML Alien Baseline Flash Align Left Background Color Color Note 1 you know the exact class ID of the flash file provide it in the respective field Include the prefix e g 9 17 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 17 1 Inserting Windows Media from the Web Server I Position the cursor at the place where you need to inset the Windows Media li Press the Media Manager button e from the toolbar A dialog box will appear Media Manager Web Page Dialog Browse Files amp Upload Directory Ir a d editor web Img LlserDir radEditorBannert 3 awi d Switch To Preview wth HumanResnources Marketing Align 1 radEditorBanner03 avi Properties Select Property v Salue IA lii Locate the Windows Media file which you want to insert and click on it once Default Windows Media properties will be displayed in the right hand side of the dialog Tor 39 Gh Visual Studio net The high e
22. 33 GP Visual Studio net i 2 b s edilor The high end WYSIWYG editor for ASP NET Stelerik Bie PEG 15 WORKING WITH IMAGES The Image Manager dialog allows you to freely 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 Image Manager allows you to perform the following tasks browse folders and files sort files by name and type preview images zoom in and out upload new images to the server if you are given permissions to upload in the respective folder Please contact the developer of your application to receive 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 to receive details about the given permissions create new sub folders if you are given permissions to upload in the respective folder Please contact the developer of your application to receive 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 to receive details about the given permissions 15 1 Inserting an Image from the Web Server i Position the cursor at the place where you need to insert the image ii Press the Image Manager button from the tool
23. 48 26 APPENDIX GeTMT 48 Opti Tor Ee GP Visual Studio net The high end WYSIWYG editor for ASP NET telerik 1 USING THIS GUIDE 1 1 Purpose This guide provides comprehensive guidelines and step by step instructions for working with the telerik r a d editor the high end WYSIWYG content editor for ASP NET 1 2 Who should use this guide This guide is for end users of r a d editor For deployment and configuration instructions please read the Deployment Manual shipped with the product distribution 2 ABOUT r a d editor r a d editor is a powerful WYSIWYG What You See Is What You Get content editor which allows even non technical users to author and manage HTML content as easily as writing a document The product uses a familiar Word like interface and tools which give people the ability to seamlessly format text set hyperlinks build tables and insert images Flash documents etc Some of the features that you see 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 SETTING r a d editor IN EDIT MODE r a d editor can work in two modes View mode and Edit mode When it is in View mode the content is displayed as regular HTML and cannot be modified In order to set r a d editor in Edit mode you need to cl
24. ARS AND MODULES 6 1 Dockable Toolbars Modules The users of r a d editor have the freedom to organize the workspace according to their personal preferences The Toolbars and System Modules of r a d editor can be arranged by dragging and docking on the edges of the editable area or can be left floating just like in Microsoft Office applications e AHIML 1 1 and Accessibility compliance imoroved narfarmange Words 18 Characters 148 Cancel Toolbars and Modules can be docked to one of 5 docking zones as depicted on the image below Optimised Tor 10 GP Visual Studio net The high end WYSIWYG editor for Stelerik When you drag one Toolbar Module over another Toolbar Module within a certain docking zone the dragged one will be placed before the other one Before in this case means above or to the left depending on the available space and the docking zone orientation horizontal or vertical 6 2 Un docking Toolbars and Modules If you drag and drop a dockable Toolbar Module outside the docking areas i e over the content area or outside the editor the Toolbar Module will become undocked You can dock it back by clicking the button To dock all Toolbars Modules back to their respective Docking Zones click the button Apply C55 Class Custom Links AHIML 1 1 and Accessibility compliance Imprimer nertfarmanrpe
25. Center Below are some commonly used properties of the editor Feel free to experiment with the various ni options and witness the effect on the fly i Right alizned P Below are some commonly used properties of the r a d editor Feel free to experiment with the various Ea options and witness the effect on the fly ec Justify Below are some commonly used properties of the r a d editor Feel free to experiment with the various options and witness the effect on the fly a ee eel 8 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 apply indentation to selected text you need to first place the cursor inside a paragraph and then click on the indentation buttons Y c uc 0 y z x Apply O55 Class Custom Links Normal E 74 Below are some commonly used properties of the r a d editor Feel free to experiment with the various options and witness the effect on the fly Ouident a Below are some commonly used properties of the t a deditor Feel free to experiment with the Various options and witness the effect on the fly e 1 Outdent Below are some commonly used properties of the r a deditor Feel free to experiment Lij with the various options and witness the effect on the fly Ind
26. Color Changes color of the selected text This dropdown allows you to change font color of the selected text Text Color Background Changes the background color of the selected text This dropdown allows you to change background color of the selected LM text CSS Class Applies predefined styles to the selected text This dropdown menu contains predefined text styles which can be applied to selected sections of the text Apply CSS Class Superscript Makes text or numbers appear as 5 When typing text you may press this button to make the text that follows superscript The button also works on selected text You have to press the again to switch to normal text typing When typing text you may press this Buon to make the text that follows subscip The button also works on selected text You have to press the button again to switch to normal text typing 7 2 Formatting Paragraphs amp Lists New Paragraph Inserts a new paragraph This button lets you Insert a new paragraph There is a difference between Ctrl pressing this button zm and pressing Enter The latter creates a new line Enter keeping the paragraph formatting whereas creates new paragraph with different paragraph settings which can be changed later on This is important when you apply indentation and justification to text Paragraph Style Applies s
27. DULES The System Modules are special tools used to provide extra information for the users who work with r a d editor in design mode Currently there are five modules shipped out of the box with the editor Tag Inspector Properties Inspector Real Time HTML Inspector Statistics Module XHTML Validator 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 the most inner tag in the hierarchy and remove it using the Remove Element button Optemiaed Tor 6 Gh Visual Studio net E eo racecilor The high end WYSIWYG editor for ASP NET Stelerik pk LI Lr i a 2 ustom Links Normal ticas T Siza pply C55 Clase Defining the next level of browser based content editing r improved performance enhanced cross browser Support amp ili wt X f P E Expand ReportPane Select Doctype AATMIL 1 0 Strict z 5 2 Properties Inspector This is a powerful module which displays the relevant properties of the currently selected element As a result the user can quickly configure the element e g set cell width shading image alignment hyperlink etc without the need to open dialogs Tor ve Gh Visual Studio net
28. G editor for ASP NET telerik 8 3 Applying Text Colors I apply a foreground color to some text you need to first select the text and then click on Foreground Color button on the toolbar This will open the color picker from where you can select the color you want to apply EEHEEHE Verdana Add Custom Color Add Hex Color li To apply a background color to some text you need to first select the text and then click on Background Color button 4 on the toolbar This opens the color picker from where you can select the color you want to apply Add Custom calor Add Hex Color 8 4 Setting Text Alignment You can set the text paragraph paragraph seems more correct because alignment is applied to the whole paragraph alignment to left center right or justify In order to set the alignment select the text and from the toolbar click on the button for the alignment you want to set Tor 24 Gh Visual Studio net ii The high end WYSIWYG editor for ASP NET Stelerik ae 3L iB 7 cb 7 2 Apply C55 Class Custom Links Normal 3 Lefi alizned Below are some commonly used properties of the r a d editor Feel free to experiment with the various options and witness the effect on the fly
29. R esaources 3g Marketing radEditorBannerO1 swf a gy radEditorBanner0z swf Loop Q ves 9 No gy radEditorBanner 3 swf Flash hlenu ves HTML Alien Baseline Flash Align Left Top Background Color Color Note 1 you know the exact class ID of the flash file provide it in the respective field Include the prefix e g clsid iii Locate the Flash file which you want to insert and click on it once Default Flash properties will be displayed in the right hand side of the dialog Tor 97 Gh Visual Studio net D The high end WYSIWYG editor for ASP NET Stelerik Bie ae pel iv Make a tick into the Switch to Preview Mode checkbox to see a preview of the Flash animation Depending on the file size this may take a while Flash Manager Web Page Dialog E Browse Files amp Upload Flash Directory fr a d editorweb Img UserDir radEditorBannerD1 swt 0 Switch To Preview Mode Ext Mame Specify Class ID Q ves 9 Vuicith ag HumanR esaurces 3g Marketing ni radEditorBanner 1 swf High aa gh radEditorBannerQz swf Loop ves 9 gy radEditorBanner s3 swf Flash hlenu CO ves Mo HTML Alien Baseline Flash Align Left Background Color Color Note If you know the exact class ID of the flash file pravide it in
30. Stelerik X Apply C55 Class Defining the next level af browser based content editing SHTML 1 1 and Accessibility compliance Words 19 Characters 244 Cancel lt i TABLE gt TBODY gt TE gt TD gt RemoveFlement Expand Report Pane Select SHTML 1 0 Strict Validate SHTML Width Alignment Classname Apply C55 Class Set Cell Properties Height Background 8 Mowrap 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 Optimized Tor Gh Visual Studio net UU Stelerik a uo H Defining the next level of browser based content editing KHTML 1 1 and Accessibility compliance improved performance enhanced cross browser support 4 Words 18 Charackers 192 l Cancel Update Defining Ehe next level of browser based content editing lt ul gt lt li gt SHTML 1 1 and Accessibility compliance lt li gt gt improved performance gt lt li gt enhanced cross browser support lt li gt gt
31. ag 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 25 GP Visual Studio net ae rac edilor The high end WYSIWYG editor for ASP NET Stelerik pre ck i 2 Applv C55 Class C 12 2 Creating a Table Using the Table Wizard i Position the cursor where you want to create the table ii Click on the Insert Table button D on the r a d editor toolbar iii Click on the Table Wizard button at the bottom to open the Table Wizard dialog FEE MUI x X ji lr a T The Table wizard appears and you can use it to create a table and set its properties Optimized Tor 26 Gh Visual Studio net Stelerik Table Wizard Web Page Dialog Ld Table Design 24 Table Properties Egl Cell Properties Accessibility Columns Column Span i Press button next to Column span to merge right cell with the cell you have selected Pressing the button will unmerge the left cell ii 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 However further customization of this table is allowed using the Table Properties Cell Properties and Accessibility tabs of the Table Wizard The next
32. ative margins are permitted padding is the amount of space between the border and the content in a table or a cell pageBreakAfter sets or retrieves a string indicating whether a page break occurs after the object pageBreakBefore sets or retrieves string indicating whether a page break occurs before the object The position property sets or retrieves the type of positioning used for the object The textAlign property can be applied to block level elements P H1 etc to give the alignment of the element s text This property is similar in function to HTML s ALIGN attribute on paragraphs headings and divisions textAutospace sets or retrieves the autospacing and narrow space width 52 Stelerik lt length gt lt percentage gt auto 1 4 lt length gt lt percentage gt auto 1 4 lt length gt lt percentage gt auto 11 4 lt length gt lt percentage gt auto 11 4 lt length gt lt percentage gt 11 4 auto absolute relative static lt length gt lt percentage gt auto left right center justify none ideograph alpha Tes GP Visual Studio net textDecoration textJustify textTransform textUnderlinePosition visibility wordSpacing adjustment of text The textDecoration property allows text to be decorated through one of five properties underline overline line through blink or the default none The t
33. bar A dialog box will appear iii go to a new sub folder double click on the sub folder s name go to the parent folder double click on the up arrow Ext HumanResources Marketing editorBaxcClosedz3 jpg IV Locate the image file which you want to insert and click on it once A preview of the image will appear in the right hand side of the dialog v Click Insert to finish or Close to cancel the operation Tor 2A s GP Visual Studio net rac edilor The high end WYSIWYG editor for ASP NET telerik Image Manager zz Browse Files Gy Upload Image Image URL 9 editors O lmg UserbirMarketing Advertisements ad co Insert Ext Name E D ad color picker gif ad tables gif banner gif bea 4E Pe HS rl a aaia 15 2 Uploading Images Web Server You can use the Image Manager dialog to upload images from your computer to the web server Once uploaded the image will appear 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 El to open the dialog li Navigate to the folder in which you want to upload the image lii Press the Upload Image tab Iv Click Bro
34. ble handling Background Image sets image as the table background CSS Class specifies table CSS class and style This property should be used only by advanced users 12 7 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 one of the following two ways e From the Table Wizard by clicking the Cell Properties tab E Table Wizard Web Page Dialog Table Design d Table Properties al Properties t Accessibility Content Alignment Background a Dimensions Additional Height No wrapping e By right clicking a table cell and selecting Cell Properties from the context menu This will open the Cell Properties dialog Tor 29 G Visual Studio net UU The high end WYSIWYG editor for ASP NET Stelerik au T dag e 2 di i 2 23 X B 1395 15 19 60 17 E TmesewRomi 3 Apply C55 Claes Custom Links Normal m Insert Flow Above inpet Fire Below gt Delete Row i Cell Properties E oi Insert Column to the Left d Cel Properties QE Insert Column to the Plight Content Aignment Y Delete Cokin Addibonal merge cate Hortzortaly 130 i Merge Cells Vertically yadi 7
35. caceceees 37 16 2 UPLOADING FLASH ANIMATIONS ON THE WEB SERVER ccccecececececececececececccccucecececauauececuceceeas 38 16 3 SETTING FLASH PROPERTIES cccscecececececececececcauacacceaeaeaeneaeaeauaeceaueaeaeaeaeaeaeaeaeaenenenenenenenenes 38 17 WORKING WITH WINDOWS MEDIA nnn nnn nmn nnne 39 17 1 INSERTING WINDOWS MEDIA FROM THE WEB SERVER cccececececececececececececececucuceceuacacececececeeas 39 17 2 UPLOADING WINDOWS MEDIA ON THE WEB SERVER cccccecececececececececececececccucucecauececscecuceceeas 40 17 3 SETTING WINDOWS MEDIA PROPERTIES cceccccccecececececececececececececscucacetetecececetecscececueseseacececas 41 18 WORKING WITH DOCUMENT S gen 41 18 1 INSERTING DOCUMENTS 42 18 2 UPLOADING DOCUMENTS ON THE WEB SERVER c cscsccccececececececececececscucucucecucceetecececececececececes 42 19 WORKING WITH 43 19 1 INSERTING TEMPLATES wcotisicncctatieccntctnincttacectveticnenedcacdacuatdecentsediawasnctedon
36. ch you want the link to point to or from the Existing Anchor dropdown menu choose an anchor inserted in the current document iv Optional To specify the text of the link fill the Link Text field V Optional Select the type of the link or just leave it at the default value vi Optional Select a target for the link vii Optional Enter a tooltip This is the text that will appear when the mouse cursor is placed over the hyperlink text or image viii Press OK Tes GP Visual Studio net pt raced ilo r The high end WYSIWYG editor for ASPNET Stelerik md E a Target Tooltip CSS Class 10 2 Modifying a Hyperlink I Click inside the hyperlink or on the image if you have an image link li Right click to open the context menu and click Set Link Properties Alternatively you may click the Hyperlink Manager button again The Hyperlink Manager dialog will appear iii Modify the hyperlink attributes URL tooltip etc and click OK lt i Times New Rome 2 Apply C55 Class Custom Links Normal For more information check the website of Telerik Set Link Properties Remove Link 10 3 Removing a Hyperlink I Select the text or image which has been set as a hyperlink li Click on Remove Hyperlink button You will notice that all formatting related to links blue colo
37. e Properties 4 Image Information eee Border Color Cancel Long Description Flower with roses 5 Image Alignment Horizontal Spacing mE Vertical Spacing mE Constrain 23 USING THE HTML MODE More advanced users sometimes need to modify the HTML code of the content directly For this reason r a d editor provides the so called HTML mode which gives you access to the content code Please note that the HTML mode may be disabled by the site administrator 46 GP Visual Studio net EU E rac edilor The bigh end WYSIWYG editor for ASP NET telerik Bie amp nbsp lt BR gt DI align lett lt TABLE style IDTH 157px HEIGHT 84px 0 gt Find And Replace Find 33 Replace lt 0 lt 0 lt TDs TD Search Direction 7TD TD OK lt Entire text up lt Selection anl Down Cancel lt TR gt TO lt TD lt TD lt TD C Match case lt lt TDse TDs eTRS eTBOD Y T d Match whole worda only 03 Cancel Update The example below shows a Find and Replace operation in HTML mode The Find and Replace dialog can be invoked in HTML mode using the Ctrl F shortcut 24 THE PREVIEW MODE After editing your document in the edi
38. edefined code snippet into the selected PE which you do not see in the drop down menu you will need to contact the place in the editor The snippet will retain the formatting from the This dropdown lets you create a preset hyperlink on the selected text Pressing this button will display a drop down menu showing you all developer personnel Inserting special character paragraph For more information please contact your developer Using Custom Links number or image create link you will firstly need to select the to be linked object then click on ro dropdown and select the link that EE would like to use Applying CSS Class I sertTime Time eee Pressing this button inserts the current time in the editable area Insert Date fn MEL this button inserts the current date in the editable area Tes 15 GP Visual Studio net amp The high end WYSIWYG editor for ASP NET Stelerik 7 5 View Show Hide Table Borders Shows hides table borders ra Toggles borders of all tables within the editor ON and OFF The ON E function works on tables which have hidden borders Design Mode Ce mm Pressing this button switches the editor WYSIWYG into design mode 6 HTML Mode Pressing this button switches the editor into HTML mode BH Preview Mode a Pressing this button
39. editorwebsImg UserDir Marketing File 2 SVadvertising Movie avi Max size allowed 100 File extensions allowed azf twm Semi vvemp SWITIV 5 vx avi wav mov m1 v mpz mpsz mpzv mpa mau mid midi rimy aiff au snd To upload a new Windows Media file on the web server do the following I Click the Media Manager button e to open the dialog li Navigate to the folder in which you want to upload the Windows Media file lii Press the Upload Media tab iv Click Browse to select a Windows Media file from you computer v Click Upload 17 3 Setting Windows Media Properties Once a Windows Media file is inserted you can still manage its properties Simply click on the Windows Media object and then open the Media Manager e again The properties pane in the right hand side of the dialog will load the properties of the current media file and will allow you to change them Media Manager Web Page Dialog Browse Files Upload Media Directory Ir a d editar Img LlserDir radEditarBannerQ3 avi Switch To Preview Mode EHE Vit t Height HumanResaurces Bg Marketing i radEditorBannerO3 avi Properties Q Ma Description This property specifies retrieves a value indicating whether the trackbar is v
40. eed to select the content and then Cut it When using this tool the cut text or image will be removed from the page and will be stored in the clipboard for later use Please note that only the last cut or copied P Ctrl X item will be stored in the clipboard This tool is very helpful if you have m decided to change the place of a piece of text in the sentence or in the page just select the text press Cut place the cursor on the new place and press the Paste button see below H The Copy button works on selected text image and or table You need to select the content first and then Copy it When using this tool Ctrl C the content will be stored in the clipboard for later use Note that only the last copied or cut item will be stored in the clipboard This tool is very helpful if you need to type the same text many times just select Tes 413 Visual Studio net The high end WYSIWYG editor for ASP NET Stelerik the text press the Copy button place cursor new place and press the 5 Paste button see below This way you not have to type the text over and over This procedure works for images and or tables as well B Paste 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 Place the cursor where yo
41. ent Below are some commonly used properties of the r a d editor Feel free to experiment with the Various options and witness the effect on the fly Cancel Update Opbermiaed Te 19 GP Visual Studio net E racecilor The high end WYSIWYG editor for ASP NET Stelerik 8 6 Applying CSS Classes Predefined CSS classes are used to ease the process of formatting To apply a given CSS class to a piece of text first you need to select the text and then choose a class from the CSS Class dropdown menu on the toolbar DropDown projects projects projects 4 download download 4 clear an activated CSS Class is as easy as applying it clear the CSS class from a piece of text first you need to select the text and then select Clear Style from the CSS Class drop down menu 8 7 Applying Paragraph Styles Predefined paragraph styles are used to ease the process of formatting of paragraphs It allows the user to consistently apply paragraph styles to a document effortlessly The predefined styles include different heading styles and other styles defined by the developer To apply a given paragraph style to some text first place the cursor within the text then from the paragraph styles drop down menu on the toolbar select the style you want to apply l l E NN x Times Mew Rome 5 Apply 55 Class Custom Links f Heading 2 Teler
42. eseteeniaadtarecdsotaiwackeetacw 43 19 2 UPLOADING TEMPLATES ccccccecececececccececcccceceuauauacaeacuteeceaeaeaecuaucuucuseuaeaeneneaeneneneneneneaeaeass 43 20 SPELL CHECKING DOCUMENTS 44 21 USING CODE SNIPPETS uo 44 21 1 INSERTING CODE SNIPPETS ccccccecececececececececcccuacauauauaeaeesecatauaececeuauauauaeaeaeneaeneneneneneneneneass 44 22 CREATING ACCESSIBLE CONTENT SECTION 508 COMPLIANT CONTENT 45 22 1 CREATING ACCESSIBLE ABLES 45 22 2 CREATING ACCESSIBLE HYPERLINKS ccccecececececececececececcacacecauceacacseacacauaeatatauauauauauuauaenenes 46 223 CREATING ACCESSIBLE IMAGES 46 23 USING THE HTML 2 46 24 THE PREVIEW 47 25 PRINTING
43. essing this button will align the selected paragraph to the left Aligns the selected paragraph to the center _ Pressing this button will center the lines in the selected paragraph Align Right Aligns the selected paragraph to the right Pressing this button will align the selected paragraph to the right Justify Justifies the selected paragraph to the left and to the right Pressing this button will justify the selected paragraph to the left and to the right at the same time 7 3 Working with portions of text Spellchecker Launches spellchecker The spellchecker is a tool which checks the spelling of the written text It works the same way as in Microsoft Word When launched the spellchecker dialog will appear and the checking will start automatically from beginning of the document If there is a mistaken word it will appear in the spellchecker dialog where you can either Ignore the suggestion or Change the word with the suggested one Spell checking 5 Prints the contents of the r a d editor or the whole web page Pressing this button will launch your default printers dialog box Press Ctrl P OK or Print to print the current page in your web browser You can EN set your printers properties before printing Printing web page Cut Cuts the selected content and copies it to the clipboard The Cut button works on a selected text image and or table You first n
44. extindent property can be applied to block level elements paragraphs headers etc to define the amount of indentation that the first line of the element should receive The value must be a length or a percentage percentages refer to the parent element s width textJustify sets or retrieves the type of alignment used to justify text in the object The textTransform property allows text to be transformed by one of four properties capitalize capitalizes first character of each word uppercase capitalizes all characters of each word lowercase uses small letters for all characters of each word none the initial value textUnderlinePosition sets or retrieves the position of the underline decoration that is set through the textDecoration property unicodeBidi sets or retrieves the level of embedding with respect to the bidirectional algorithm visibility sets or retrieves whether the content of the object is displayed wordbreak sets or retrieves line breaking behavior within words particularly where multiple languages appear in the object The wordSpacing property defines an amount of space between additional words The value must be in the length format negative values are permitted zindex sets or retrieves the stacking order of positioned objects telerik ideograph numeric ideograph parenthesis ideograph space overline none underline line through blink length percentage
45. few sections describe in detail how to modify tables 12 3 Inserting a table from Microsoft Excel or other applications Inserting a table from Microsoft Excel or other applications is quite easy just copy the table from the application and paste it into the r a d editor Most of the formatting will be preserved including borders text numbers and cell color Formulae however will not be pasted 12 4 Toggle Table Borders If you have created a table which has no borders by default you can switch on the auxiliary borders They will not be saved in the content but will rather help you locate and work with your table You can toggle the auxiliary borders using the Toggle Table Borders button LM on the toolbar 12 5 Formatting Tables The Table Properties dialog allows you to fine tune the appearance of a new or existing table You can reach the Table Properties tab in one of the following two ways e From Table Wizard by clicking on the Table Properties tab Tor 2074 Visual Studio net racedilor The high end WYSIWYG editor for ASP NET Stelerik Insert Table Background Image rJ Table C55 CSS Class Clear Style e By right clicking inside an existing table and selecting Table Properties from the context menu This will open the Table Properties dialog am mI 6 38 Ld E TE Fj jal EU 1
46. gt none auto lt length gt lt percentage gt none auto both none line char lt length gt lt percentage gt auto lt length gt normal lt number gt lt length gt lt percentage gt Tes GP Visual Studio net marginBottom marginLeft marginRight marginTop padding pageBreakAfter pageBreakBefore textAutospace number Percentage values are relative to the element s font size Negative values are not permitted The marginBottom property sets the bottom margin of a cell or table by specifying between one and four values where each value is a length a percentage or auto Percentage values refer to the parent elements width Negative margins are permitted The marginLeft property sets the left margin of a cell or table by specifying between one and four values where each value is a length a percentage or auto Percentage values refer to the parent elements width Negative margins are permitted The marginRight property sets the right margin of a cell or table by specifying between one and four values where each value is a length a percentage or auto Percentage values refer to the parent elements width Negative margins are permitted The marginTop property sets the top margin of a cell or table by specifying between one and four values where each value is a length a percentage or auto Percentage values refer to the parent elements width Neg
47. he Spellchecker button ra on the 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 r a d editor i e the language in which the editor s menus toolbars modules etc are set When launched the spellchecker will start checking all words automatically from the beginning of the document If there is a mistaken word it will appear in the spellchecker dialog where you can either Ignore the suggestion Change the word with the suggested one 5a d Gy dh LL 2 f wt T T F e Times Mew Rome 2 55 Class Custom Links Normal Lm his is a miztake MES Meats Mot in Dictionary This 15 a muztake Ignore Ignore All Add Custom suggestions Change mistaken mistakes If the misspelled word is not in the dictionary you can either add the word to the dictionary by pressing Add Custom or click on the underlined misspelled word and correct it directly in the dialog 21 USING CODE SNIPPETS The Code snippets dropdown menu is a very convenient tool for inserting predefined chunks of content HTML like signatures product description templates etc 21 1 Inserting Code Snippets I
48. he Cancel button your modifications will not be applied and the content will be reverted to its original state 4 r a d editor TOOLBARS r a d editor toolbars represent a set of buttons and drop down lists which allow you to perform different actions with the content e g make text bold apply color build tables open the image dialog etc Most of these buttons work in the same way as you would use them in Microsoft Word Optimized Tor 5 Gh Visual Studio net E raded 1 he hish end IY MP YG for INE T wt er Nus CMS BA A 1 ont Mame Size Apply C55 Class Ic stom Links Normal Defining the next level of browser based cantent editing 1 1 and Accessibility compliance improved performance enhanced cross browser support Expand Report Pane Select 1 0 Strict Validate HTML AN Note Depending on your specific application you may not see all of the buttons displayed in the image above Furthermore you may have additional buttons with custom functionality which should be explained to you by the developer of the application The functions of the various buttons and dropdowns on the r a d editor toolbar are described further in this manual You will also find instructions on how to complete common tasks like formatting text inserting hyperlinks working with images etc 5 SYSTEM MO
49. ick the pencil button 2 FIN AN CF STOCKS BONDS IMSIFRAHLE MUTUAL FUMDS REAL ESTATE NYSE Composite Index RE E Re Mes Petals Personal fnance Software aie ii 1200 140 16 00 12 00 NYSE is one oT Americas leading Stock Exchanges vin more tan bilan shares sih more than 40 per day on an average business day Our company has certified top quality pertners with per dormance track Check en the Pencil Bauten on op of This pos agr age To edir h amp Text Ter _4 GP Visual Studio net E racecilor The high end WYSIWYG editor for ASP NET telerik After you set any of the editors above in Edit mode your page will look similar to this FIN ANC EF STOLEX HINDE FUNDI MEAL ESTATE ain er nh Ir ce NYSE Composite Index Panis Ma Meal NWSE ts ome or Americas endi Stock Erchanger etin more than a vecti more Than S40 bon per day on an araraya butiness day Our EK dh Words 50 Characters 322 ee ipdate gt As you can see a toolbar with buttons and dropdowns has appeared Moreover content managed by the specific r a d editor can now be modified as if you are using Microsoft Word Once you have finished editing you need to press the Update button to save your work If you click t
50. ik r a d edtor v5 0 ET Below are some commonly used properties of the r a d editor Feel free to experiment with the various E options and witness the effect on the fly E Tr ra 1 F Zoom Lancel Lpdate Words 25 Characters 170 H2 gt RemoveElement Apply C55 Class Tes 20 Gh Visual Studio net 2 I t race d i 1 he Proh Fr 1 M er nj IO ue 1 4 1 t e le Bie wk w 9 COPYING FORMATTED FROM Microsoft Word AND OTHER APPLICATIONS Copying formatted text from Microsoft Word Internet explorer and other applications is straightforward Once you have pasted formatted text in the editor you can remove the Word specific formatting which is not suitable for the web To do that first you need to select the text and then select the Word Formatting from the Code Stripper dropdown menu i da Custom Links Paragraph All HTML Tags or Feel free to experiment Microsoft word Formatting on the fly 2y Cascading Style Sheets T Font Tags 52 Span Tags ve Ec e Cancel Update 10 WORKING WITH HYPERLINKS 10 1 Inserting a Hyperlink i Select the text or object which you want to set as a hyperlink li Click on the Hyperlink Manager button The Hyperlink Manager dialog will appear iii In the URL field enter the web address whi
51. improper added format The use of the value none will turn none no display off display of the element to which it is assigned including any children elements The filter property sets or retrieves the filter or collection of filters applied to the object fontFamily Font families may be assigned by a lt family name gt specific font name or a generic font family Any font name may be Multiple family assignments can be made used and if a specific font assignment is made it lt generic family gt should be followed by a generic family name in case the first choice is present Any font name containing white space must be quoted with either single or 50 serif e g Times sans serif e g Arial or Helvetica cursive e g Zapf Chancery Tes GP Visual Studio net The hich end WY fontVariant fontWeight layoutGridChar layoutGridLine layoutGridMode layoutGridType letterSpacing lineHeight double quotes The fontSize property is used to modify the size of the displayed font Absolute lengths using units like pt and in should be used sparingly due to their weakness in adapting to different browsing environments Fonts with absolute lengths can very easily be too small or too large for The fontVariant property determines if the font is to display in normal or small caps Small caps are displayed when all the letters
52. isible 18 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 Optimised for 41 Gh Visual Studio net rac edilor The high end WYSIWYG editor for ASP NET telerik 18 1 Inserting Documents Document Manager Web Page Dialog E Browse Files Upload Document Document File UserDir HurnanResources Docs radControls_ award doc EE Ext Mame Tooltip H cantrals Press Release 1 WE JustLanded_and_telerik doc radControls_avward doc iq radEditor TechEd dac I Optional Select some text or an image which will become the hyperlink to the document li Press the Insert Document button B lii A dialog will open to display list of folders and documents which 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 Windows Narrator V Optional Select a target for the link vi Press Insert In case you have selected some text or an image in step 1 it will become a hyperlink to the document In case you haven t the name of the document will appear at the cursor point and will be set as a hyperlink to the document 18 2
53. lear property specifies if a cell or table allows floating elements to its sides A value of left moves the element below any floating element on its left a value of right does the same but to the right Other values are none which is the default value and both which moves the element below floating elements on both of its sides clip Sets or retrieves which part of a positioned object is visible The color property allows authors to color specify the color of a cell or table cursor The cursor property sets or retrieves the auto e resize type of cursor to display as the mouse default ne resize pointer moves over the object hand nw resize move n resize text se resize wait Sw resize help s resize crosshair w resize The direction property sets or retrieves ltr content flows left the reading order of the object to right default rtl content flows right to left inherit content flow is inherited display The display property is used to define a block a line break cell or table with one of four values block before and after the inline list item none element Each element typically is given a default inline no line break display value by the browser based on before and after the suggested rendering in the HTML element specification list item same as The display property can be dangerous block except a list because of its ability to display elements in item marker is what would otherwise be an
54. mouse 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 context menu Table Properties Table Wizard Web Page Dialog E Table Design Fa Table Properties ma Cell Properties Accessibilty Caption alignment E Caption 32ample caption text Sample summary text Associate cells wih headers Tes 45 GP Visual Studio net The high end WYSIWYG editor for ASP NET telerik I Create a new table with the Table Wizard or open the Table Properties dialog li Click Accessibility tab iii In the Accessibility tab you fill in the fields Heading rows columns Caption and Summary about the table Click the Associate cells with headers checkbox 22 2 Creating Accessible Hyperlinks A hyperlink can be interpreted by the narrative software if you specify an additional description in the Tooltip field Hyperlinks Manager Web Page Dialog e Hyperlink Anchor ds E mail LRL http Pw telerik com Tooltip The telerik home page CSS Class 22 3 Creating Accessible Images An image can be interpreted by the narrative software if you specify an additional description in the Long Description field Image Properties Web Page Dialog Imag
55. n The image will not be resampled or modified but will rather be displayed with the specified width Ix Height specifies a custom height for the image you can constrain the proportions to avoid distortion The image will not be resampled or modified but will rather be displayed with the specified height 15 5 Absolute Positioning In some cases you may want to position an image absolutely This will make the image freely floating so that 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 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 with the only exception 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 I Position the cursor at the place where you need to inset the Flash li Press the Flash Manager button from toolbar A dialog box will appear Flash Manager Web Page Dialog Browse Files amp Upload Flash Directory quet Switch To Preview Mode Ext Mame Specify Class ID ves 9 To with 5 Height i Close a Human
56. nd WYSIWYG editor for ASP NET Stelerik Media Manager Web Page Dialog Browse Files amp Upload Directory fr a d editorWweb Tmg UserDir radEditorBannerO3 avi d Switch To Preview Mode Name wet MD HumanF esources 3g Marketing Align Properties Select Property he Salue A Close ic radEditorBanner03 ai iv Make a tick into the Switch to Preview Mode checkbox to see a preview of the Windows Media Depending on the file size this may take a while E Media Manager Web Page Dialog Browse Files amp Upload Media Directory Ir a d editorweb Tmg UserDir radEditorBannerOs avi Switch To Preview Mode E Ext Humanhesources Marketing d radEditorBanner03 avi cacedilor je i 44 n v Click Insert to finish or Close to cancel the operation 17 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 will appear in the Browse Files tab at the bottom of the file list in the current folder Tor 40 Gh Visual Studio net gt The high end WYSIWYG editor for ASP NET Stelerik Bie T Media Manager Web Page Dialog Browse Files Upload Media Directory fr a d
57. nu lii From the menu select the Insert Row Above Below Tes 90 GP Visual Studio net X racedilor pe The high end WYSIWYG editor for ASP NET telerik Insert Row Above L Insert Raw Below 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 12 9 Merging Splitting Cells Merge Cells Vertically Split cell To merge a cell with the adjacent cell below to the right do the following I Select the cell Right click to open the context menu lii From the menu select Merge Cells Horizontally Vertically To split a cell that has been previously merged do the following I Select the cell Right click to open the context menu lii From the menu select Split Cell 12 10 Resizing Tables You can resize an existing table in two ways by specifying dimensions in the Table Properties tab explained in the previous sections direct drag and drop _ 31 GP Visual Studio net IUE EZ ia racecdilor The hi 7 IFYSIW YG ASP NET telerik z E m EP a aot 225 8 Apply C55 Class Custom Links xil X
58. of the word are in capitals with uppercase characters slightly larger than lowercase The fontWeight property is used to specify the weight of the font The bolder and lighter values are relative to the inherited font weight while the other values are absolute font weights layoutGridChar sets or retrieves the size of the character grid used for rendering the text content of an element layoutGridLine sets or retrieves the gridline value used for rendering the text content of an element layoutGridMode sets or retrieves whether the text layout grid uses two dimensions layoutGridType sets or retrieves the type of grid used for rendering the text content of an element The letterSpacing property specifies the spacing between the letters in a word Can be table or cell specific lineBreak lineBreak sets or retrieves line breaking normal rules for Japanese text strict The lineHeight property will accept value to control the spacing between baselines of text When the value is a number the line height is calculated by multiplying the element s font size by the 51 Stelerik e fantasy Western e monospace Courier lt absolute size gt xx small large x small x large small xx large medium lt relative size gt larger smaller lt length gt lt percentage gt in relation to parent element normal SMALL CAPS normal bold bolder lighter lt length gt lt percentage
59. r Image Text image Alignment Horizontal Spacing Vet Vertical Spacing 1 134 E Constrain The image properties which 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 at all li Border Color specifies the color of the image border Optimized for 36 Gh Visual Studio net mx ou E racecdilor The bisb end WYSIWYG editor for ASP NET Stelerik Ble jg dilot iii Image Alt Text specifies the alternative text which 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 will wrap around the image vi Horizontal Spacing specifies the spacing distance to the left and to the right between the image and the adjacent text images vii Vertical Spacing specifies the spacing distance to the top and to the bottom between the image and the adjacent text images viii Width specifies a custom width for the image you can constrain the proportions to avoid distortio
60. r underline etc will be removed from the text This holds true for the inserted documents as well Tor 2005 Gh Visual Studio net ii rac ecilor The high end WYSIWYG editor for ASP NET Stelerik 10 4 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 to another In other words the anchor is used for hyperlinks which lead to the same page or a particular place in another page The anchor defines the destination where a hyperlink must lead to Then you can create a hyperlink and point it to that anchor Hyperlinks Manager Web Page Dialog Bi Hyperlink 5 Anchor 54 E mail product OK p I Define the Anchor Place the cursor where you want the hyperlink to lead to li Click the Hyperlink Manager button 5S Select the Anchor tab Enter an unique name for the anchor e g product1 lii Press OK Now you can create the hyperlink that will lead to the Anchor Select some text or an image v Click the Hyperlink Manager button 3 again Select the Hyperlink tab vi In the URL filed type followed by the name of the anchor in our case product1 so you will have to enter Zproduct1 Also from the Existing Anchor dropdown menu you can choose an anchor inserted in the current document vii Change the Type to
61. rac edilor The bigh end WYSIWYG editor for ASP NET telerik racecilor Version 6 5 End user manual Last revision June 29 2006 Tor 1 Gh Visual Studio net IDEEN NH as racedilor The high end WYSIWYG editor for ASP NET Stelerik M eee 1 USING THIS 4 1 1 M 4 1 2 WHO SHOULD USE THIS 4 2 ABOUT R A D EDITOR een nnn ERROR BOOKMARK NOT DEFINED 3 SETTING R A D EDITOR IN EDIT MODE e eren nnnm nnn nnn 4 A RADEDITOH TOOLBARS 5 5 SYSTEM MODULES 6 5 1 TAGIN 2 65 0 6 car a 6 5 2 PROPERTIES INS CT 7 5 3 REAL TIME HTML INS PC 8 5 4 SPATISTIUS ares eee MM ML MEME IM EL UE E 9 5 5 INTEGRATED XHTML VALIDATOR uias cote doles sue edu Fou EPI rad Eau OUS Rituale d Sau ro aigna
62. result you can quickly assign a predefined hyperlink to an object without the need to remember and type its URL address l 2 J PS e m OF ey X A xb Times New Rome 2 Apply C55 Class Custom Links x A E Products A ra d controls suite rad navigation suite zT r d editor 4 designer r a d spell T7 r a d chart D r a d menu E r a d treewview 1 r a d panelbar r a d rabakar rad babstrip Purchase Cancel _ Wodate 808 L S d I Select the text or image which will become hyperlink ii Click on the Custom Links dropdown menu 9997088 From the drop down menu find and click on the desired link 11 Find and Replace To find and subsequently replace a word or passage of text in the content you need to use the Find and Replace dialog You can open it using the J button on the toolbar The dialog provides options like search direction scope match case and match whole words only Tes 24 Gh Visual Studio net s E radedior The high end WYSIWYG editor for ASP NET telerik Bie E oe PZG cb Find And Replace x Below are some comm Te various options and w Replace 1 za re ind Nest 3
63. switches the editor into preview mode The user can take a look at the result of the editing which has been performed Full Screen Mode i Press this button to expand the editor into a full screen When the editor is in full screen pressing this button returns it to the previous state Press the button to select which module to activate or deactivate from the dropdown menu Modules that are currently active are marked with a check sign Those which are inactive are marked with a cross sign T Docking Z l 24 Pressing this buttons sets all the toolbars to be dockable mi outside the editors dockable area you press this button to un dock the toolbar p m When a toolbar is dragged and dropped docked somewhere on the page Zoom In Out zoom Pressing this will zoom in or out the editable area 7 6 Miscellaneous E Shows the help on every button and its functionality Pressing this button will open a window which has short description on every button its functions and a keyboard shortcut if such is available E Undoes the previous action Pressing this button will undo the last action you have made in the editor Cirl Z This includes but is not limited to inserting tables moving images and formatting text Pressing the down arrow next to this button will open a Tes 16 G Visual Studio net uu er racecilor The high end WYSIWYG editor for ASP NET S
64. t determines if a backgroundimage will scroll content or be fixed property specified with the The backgroundColor property specifies the background color of a cell or table backgroundimage should be specified whenever backgroundColor is used In most cases backgroundlmage should be set to none to work properly Through the background Image property you can set the background image of a cell or table Sets or retrieves the x coordinate of the backgroundPosition property Sets or retrieves the y coordinate of the backgroundPosition property The backgroundRepeat property specifies whether the background image is repeated or tiled The repeat x value will repeat the image horizontally while the repeat y value will repeat the image vertically Sets or retrieves the DHTML Behaviors The borderBottomStyle property sets the style of the bottom border of a table or cells This property must be specified for the border to be visible The borderStyle 48 color transparent url Img hello gif length percentage left center right length percentage left center right repeat repeat x repeat y no repeat The borderBottomColor property sets the color color of the bottom border of a table transparent groove ridge inset outset Optic Tes GP Visual Studio net qus rac edilor The high end WYSIWYG editor for ASP NET Stelerik property has priority over double
65. tandard or predefined text styles to selected paragraph This dropdown lets you change the paragraph style Click anywhere in the Paragraph Style paragraph you want to format and select the preferred style from the Paragraph Style eo T Select some text or place the cursor inside a paragraph and press this button to make the text a numbered list Pressing this button again will turn the numbered list into a regular paragraph of text Select some text or place the cursor inside a paragraph and press this EN button to make the text a bulleted list Pressing this button again will turn the bulleted list into a regular paragraph of text Increase Indent Indents paragraph to the right MEN This button indents a paragraph to the right Each time this button is Tes Hre Visual Studio The high end WYSIWYG editor for ASP NET Stelerik TE pressed the paragraph will be indented further to the right Decrease Indent Decreases 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 zm be indented to the left and press the button Horizontal ruler Inserts a horizontal line ruler a Pressing this button will a a horizontal line beneath the cursor position Align Left Aligns the selected paragraph to the left Pr
66. telerik FT dropdown where you can select multiple actions for undo E Redoes the last undone action Ctrl Pressing this button will redo the action you have just undone Pressing the Shift Z down arrow next to this button will open a dropdown where you can select Ctrl Y multiple actions for redo Find and Replace Ctrl Spans The Find and the Find and Replace dialog 7 7 Other keyboard shortcuts Some of the general keyboard shortcuts that are valid for Microsoft Windows and Internet Explorer will work in the r a d editor 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 BH Ctrl W Closes the active window Alt F4 Closes the active application 8 FORMATTING TEXT 8 1 Changing the Text Font In order to change the font of some text you need to first select the text and then choose a font from the dropdown menu on the toolbar MS Sans Serif Tahoma Verdana Arial Courier 8 2 Changing the Text Size In order to change the font size of some text you need to first select the text and then choose a font size from the dropdown menu on the toolbar Tes 47 Visual Studio net UU pt rac edilor The bigh end WYSIWY
67. tor preview users may like to see how the page looks like before updating the page The editor can be switched to the Preview Mode just by a single click of the preview button a racedilor telerik r a d editor is the leading WYSIWYG nch text editor for The product can replace any Textbox with an intuitive Word like editor which enables even non technical users to author and manage HTML content as easily as writing document r a d editor is shipped with VS NET projects and a DotHetHuke provider b more P e E e loli 47 GP Visual Studio net i racedilor The hichend Il Stelerik Bie 25 PRINTING CONTENT To print the whole web page including the r a d editor click the Print button amp It will open the Printer Properties dialog where you can choose a printer and printing options To print only the content of the r a d editor do the following i Make sure the cursor is positioned inside the editor s content ii Click Ctrl A to select the whole content iii Click the Print amp button to open the Printing Preferences dialog and confirm the printing operation 26 APPENDIX This Appendix describes the cell CSS descriptions and settings backgroundAttachment backgroundColor backgroundlmage backgroundPositionX backgroundPositionY backgroundRepeat behavior borderBottomStyle borderBottomColor The backgroundAttachmen
68. u want the item to appear and press amp Paste T 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 r a d editor will clean all unnecessary Microsoft Office related tags Place the cursor where you want the item to appear and press v Paste From Word In case the user is trying to paste Word content with the regular Paste button or Ctrl V a dialog will prompt whether the Word markup should Ctrl V be cleaned If the Clipboard content does not come from Word the dialog will not be shown After you have either Cut or Copied an item text image etc in Microsoft Word you can Paste it using this button r a d editor will clean all unnecessary Microsoft Office related tags plus font formatting Place the cursor where you want the item to appear and press A T Paste Plain Text 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 The Tat Paste Plain Text button Ctrl V 2 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 After you have either Cut or Copied an item text image etc you
69. values are not allowed borderTopColor The borderTopColor property sets the color color of the top border of a table transparent borderTopStyle The borderTopStyle property sets the none groove style of the top border of a table This dotted ridge property must be specified for the borderto dashed inset be visible The borderStyle property has solid outset priority over borderTopStyle double 1 4 borderTopWidth The borderTopWidth property is used to thin thick specify the width of a table s top border medium length Negative values are not allowed borderCollapse The borderCollapse property sets the separate state of the border collapse borderColor The borderColor property sets the color of all borders of a table borderStyle The borderStyle property sets the style of none groove the bottom border of a table This property dotted ridge must be specified for the border to be dashed inset visible solid outset double 1 4 borderWidth The borderWidth property is used to set thin thick the border width of a table You can medium lt length gt specify one to four values where each value is a keyword or a length Negative lengths are not allowed Tes 49 GP Visual Studio net gii 1 radedilor The high end WYSIWYG editor for ASP NET bottom Stelerik lt length gt lt percentage gt auto The c
70. wse to select an image from you computer v Click Upload Images Manager Web Page Dialog Image Gallery Upload mage Directory ir a d editora ImgjLlserDir Marketing Documerte My PicturesiMiamitsunrise3jpg Browse Note file size allowed 50KB Create Thumbnail CO ves 9 15 3 Creating Image Thumbnails The Browse Files tab of the Image Manager allows you also to create thumbnails of images which you have uploaded on the web server To create thumbnails do the following I Inthe Browse Files tab click thumbnail icon RH li Define the thumbnail dimensions you can constrain the proportions to avoid distortion lii Select whether you want to upload the large image as well Keep Original Yes or not iv Press the Upload tab The thumbnail image will appear at the bottom of the file list in the current folder Optimized for m 235 GP Visual Studio net d The high end WYSIWYG editor for ASP NET Stelerik Image Manager Create Thumbnail Hew image name Sunset Thumbnail jpg 60 eot Dimention unit Percent Constrain proportions eme 15 4 Editing Image Properties After inserting an image you can manage its properties through the right click context menu v 9 0 4 B z p Image Properties Web Page Dialog Image Information Border Colo

Version 6.5 End-user manual Last revision: June 29

Contents

Download Pdf Manuals

Related Search

Related Contents