DevEdit v4.0 Setup Guide (ASP.Net)

Transcription

1 DevEdit v4.0 Setup Guide (ASP.Net)

2 Table of Contents Table of Contents...1 Legal Disclaimer...2 Getting Started...3 Web Server Requirements...3 Uploading the Files...3 Setting up an Image Folder...4 Testing DevEdit...5 DevEdit Reference...6 Constructors...7 Properties...7 User Interface...7 Value Properties...22 Browser Down-Level...23 Image Management...24 Editing Features...27 Formatting...28 Methods...29 Enumerations...31 DevEdit Examples...33 Simple Example...33 behind Example...34 Conclusion

3 Legal Disclaimer Software Version: /02/2003 (Usage Guide). Copyright 2003 DevEdit.com (referred to as DevEdit from here on in) - All Rights Reserved. THIS COPYRIGHT INFORMATION MUST REMAIN INTACT AND MAY NOT BE MODIFIED IN ANY WAY. When you purchased this software you agreed to accept the terms of this Agreement. This Agreement is a legal contract, which specifies the terms of the license and warranty limitation between you and 'DevEdit'. You should carefully read the following terms and conditions before installing or using this software. Unless you have a different license agreement obtained from DevEdit, installation or use of this software indicates your acceptance of the license and warranty limitation terms contained in this Agreement. If you do not agree to the terms of this Agreement, promptly delete and destroy all copies of the Software. Versions of the Software: Only one licensed copy of DevEdit may be used on one web site. License to Redistribute: Distributing the software and/or documentation with other products (commercial or otherwise) by any means without prior written permission from DevEdit is forbidden. All rights to the DevEdit software and documentation not expressly granted under this Agreement are reserved to Interspire Pty. Ltd.. Disclaimer of Warranty: THIS SOFTWARE AND ACCOMPANYING DOCUMENTATION ARE PROVIDED "AS IS" AND WITHOUT WARRANTIES AS TO PERFORMANCE OF MERCHANTABILITY OR ANY OTHER WARRANTIES WHETHER EXPRESSED OR IMPLIED. BECAUSE OF THE VARIOUS HARDWARE AND SOFTWARE ENVIRONMENTS INTO WHICH DevEdit MAY BE USED, NO WARRANTY OF FITNESS FOR A PARTICULAR PURPOSE IS OFFERED. THE USER MUST ASSUME THE ENTIRE RISK OF USING THIS PROGRAM. ANY LIABILITY OF 'DevEdit' WILL BE LIMITED EXCLUSIVELY TO PRODUCT REPLACEMENT OR REFUND OF PURCHASE PRICE. IN NO CASE SHALL 'DevEdit' BE LIABLE FOR ANY INCIDENTAL, SPECIAL OR CONSEQUENTIAL DAMAGES OR LOSS, INCLUDING, WITHOUT LIMITATION, LOST PROFITS OR THE INABILITY TO USE EQUIPMENT OR ACCESS DATA, WHETHER SUCH DAMAGES ARE BASED UPON A BREACH OF EXPRESS OR IMPLIED WARRANTIES, BREACH OF CONTRACT, NEGLIGENCE, STRICT TORT, OR ANY OTHER LEGAL THEORY. THIS IS TRUE EVEN IF ' DevEdit' IS ADVISED OF THE POSSIBILITY OF SUCH DAMAGES. IN NO CASE WILL DevEdit OR LIABILITY EXCEED THE AMOUNT OF THE LICENSE FEE ACTUALLY PAID BY LICENSEE TO 'DevEdit'. Warning: This program is protected by copyright law. Unauthorized reproduction or distribution of this program, or any portion of it, may result in severe civil and criminal penalties, and will be prosecuted to the maximum extent possible under the law. 2

4 Getting Started DevEdit is a custom.net Server Control that was developed as a replacement for the standard <TextArea> tag in content management systems. It is 100% and JavaScript code on the client, and.net code on the server, and can be setup on your web server in just 5 minutes, simply by following this setup guide. There is no ActiveX involved, and no client security required. Web Server Requirements Before you can install DevEdit, you must make sure that your web server meets the minimum system requirements, which are shown below: Operating System: Windows 2000, 2003, or XP Web Server: IIS5 or IIS6.NET Framework: 1.0 or greater Uploading the Files You should have downloaded the DevEdit zip file from our web site after you paid for your order. Once downloaded, use an unzip program such as WinZip to extract the files to a temporary directory on your PC, such as c:\mytemp. Once extracted open the c:\mytemp directory using Windows explorer. Inside this directory you should see a directory called Interspire.DevEdit and another one named DevEditDemo. You now need to FTP or browse into your web server files and upload the contents of the DevEditDemo directory, preferably into your root directory. Note: The only files you are required to copy to your web site are those located in the DevEdit folder; this folder must exist in your applications root folder. For most ASP.NET projects, this is the root folder for your Visual Studio.NET project. The Interspire.DevEdit.dll file must also be placed in your project s /bin folder for the DevEdit control to properly appear on any WebForms. After your FTP program has finished uploading the files, DevEdit is ready to test, which we will look at in a minute. 3

5 Setting up an Image Folder To enable the image management function of the DevEdit control, you must set up a managed image folder. This is simply a folder in which you will be placing images for your users to use in their content. Create a folder in your application s root folder. (For most applications, this is your web server s root folder, or the folder where your Visual Studio.NET project file is located.) The folder can be named something like /images or /UserImages. Remember to set the ImagePath property to this folder location when placing the DevEdit control on your page. Make sure that the MACHINE/ASPNET user has Read+Execute permissions on this folder and its contents. To enable Image Uploading: Give the MACHINE/ASPNET user Write permission to the folder. To enable Image Deleting: Give the MACHINE/ASPNET user Modify permission to the folder and its contents. Note: The DevEdit Image Manager will only let the user operate on.jpg,.gif,.png, and.jpeg files. No other files will be displayed to the user, or be allowed to be operated on. 4

6 Testing DevEdit At this point you will have uploaded a DevEditTest.aspx file along with your DevEdit includes directory. To test DevEdit, run the DevEditTest.aspx file in Internet Explorer version 5.5 or above: The DevEdit control should appear on the page complete with all buttons on the toolbar and tabs at the bottom of the control. Note: If buttons are not working or you cannot edit the contents of the control then make sure you are using Internet Explorer v5.5 or above on a Windows PC with JavaScript enabled. To make sure everything is working, enter a value in the text area and then click on the Get button below the control. You should see the that is generated by the DevEdit control appear in the text box at the bottom of the page. Congratulations, your setup of DevEdit was a success! 5

7 Starting A New Project Pre-Configuration In most cases no pre-configuration is necessary. Adding the DevEdit Control to Visual Studio Open the toolbox panel and select or create the tab you wish to add the DevEdit control to. Right click the background of the chosen tab and select Customize Toolbox. Choose the.net Framework Components tab then click the Browse button. Navigate to the Interspire.DevEdit.dll file located at x:\dir\devedit.net\interspire.devedit\bin\release\interspire.devedit.dll (where x:\dir is the directory you extracted the zip file to) then select it and click Open. The DevEdit control will now appear in the.net component list with a checked box next to it indicating that it is to be displayed in the toolbox. Click OK. Once you have added the control to the toolbox you can then drag it onto any ASP.NET Web Form you wish to use it on. See Uploading the Files above for more information on adding the control to your web forms. Placing a DevEdit Control on your page If not using VS.NET or if you wish to add the DevEdit control to your web forms manually you can do the following. Register the control reference like so: <%@ Register TagPrefix="de" Namespace="Interspire.DevEdit" Assembly="Interspire.DevEdit" %> Secondly, place the control in the body of your web form, as shown below: <de:devedit id= MyEditBox runat="server"></de:devedit> Note: The <de:devedit> control must appear within <form runat= server >.. </form> tags. A runtime exception will be generated if it is not. IMPORTANT for users of the.net Framework 1.1: Note: If you have installed the.net Framework 1.1 (regardless of the version of Visual Studio.NET used to compile your application) you will have to add the statement validaterequest= false to either directive (at the top of your.aspx page) or to a <page> element in your web.config file. DevEdit Reference Like any.net Web Control, there are many properties and methods that you can use to manipulate the DevEdit control and its appearance. Over the next couple of pages these functions will be explained and an example will be provided for each one. 6

8 Constructors DevEdit () Initializes a new instance of the DevEdit class. Public DevEdit (); DevEdit (string) Initializes a new instance of the DevEdit class, and sets the initial value. Public DevEdit ( string initialvalue ); Parameters: initalvalue string to initialize the control s value. Properties User Interface AnchorButton Hides or shows the Insert Anchor button. This button allows the user to insert named anchor tags (<a name= abc > </a>). public bool AnchorButton {get; set;} true if you want the Insert Anchor button to be displayed; otherwise false. The default is true. <de:devedit AnchorButton= false > </de:devedit> object.anchorbutton = bvalue; 7

9 BackColorButton Hides or shows the Background Color (or Highlight) button. This button allows the user to change the background color of the text. The change is accomplished by inserting <font style="background-color: #[Color]"> </font> tags. public bool BackColorButton {get; set;} true if you want the Highlight button to be displayed; otherwise false. The default is true. <de:devedit BackColorButton= false > </de:devedit> object.backcolorbutton = bvalue; BoldButton Hides or shows the Bold button. This button allows the user to make the selected text bold. This is accomplished by inserting <strong> </strong> tags. (For some browsers the <b> </b> tags may be used instead.) public bool BoldButton {get; set;} true if you want the Bold button to be displayed; otherwise false. The default is true. <de:devedit BoldButton= false > </de:devedit> object.boldbutton = bvalue; BulletedListButton Hides or shows the Bulleted List button. This button allows the user to make the current or selected paragraphs into bulleted items in a list. This is accomplished by inserting <UL><LI> </LI></UL> tags appropriately. public bool BulletedListButton {get; set;} 8

10 true if you want the Bulleted List button to be displayed; otherwise false. The default is true. <de:devedit BulletedListButton= false > </de:devedit> object.bulletedlistbutton = bvalue; CenterAlignButton Hides or shows the Center Align button. This button allows the user to align the current paragraph along the center of the screen. This is accomplished by adding the align= center property to the current paragraph or table. public bool CenterAlignButton {get; set;} true if you want the Center Align button to be displayed; otherwise false. The default is true. <de:devedit CenterAlignButton= false > </de:devedit> object.centeralign = bvalue; CleanButton Hides or shows the Clean button. This button allows the user to clean their code which removes extra tags, empty tags, etc. This button will also remove any class= and style= attributes. public bool CleanButton {get; set;} true if you want the Clean button to be displayed; otherwise false. The default is true. <de:devedit CleanButton= false > </de:devedit> 9

11 object.cleanbutton = bvalue; DecreaseIndentButton Hides or shows the Decrease Indent button. This button allows the user decrease the indent of a paragraph(s). This is accomplished by removing any <blockquote> </blockquote> tags from around the current (or selected) paragraphs. public bool DecreaseIndentButton {get; set;} true if you want the Decrease Indent button to be displayed; otherwise false. The default is true. <de:devedit DecreaseIndentButton= false > </de:devedit> object.decreaseindentbutton = bvalue; FontList Hides or shows the Font list. This list allows the user to adjust the font of the currently selected text. This is accomplished by inserting <font face=""> </font> tags around the selection. public bool FontList {get; set;} true if you want the Font List to be displayed; otherwise false. The default is true. <de:devedit FontList= false > </de:devedit> object.fontlist = bvalue; FontListItems Gets or sets a list of fonts to appear in the Font List drop-down. public string FontListItems {get; set;} 10

12 A comma separated list of font names. <de:devedit FontListItems= Arial, Helvetica > </de:devedit> object.fontlistitems = svalue; FontListItemsArray Gets or sets a list of fonts to appear in the Font List drop-down. public string[] FontListItemsArray {get; set;} An array of string values containing font names. Not compatible string[] fonts = new string[] { Arial, Helvetica }; object.fontlistitemsarray = fonts; ForeColorButton Hides or shows the Font Color button. This button allows the user to change the color of the currently selected text. This is accomplished by placing <font color="#ff8c00"> </font> tags around the selection. public bool ForeColorButton {get; set;} true if you want the Font Color button to be displayed; otherwise false. The default is true. <de:devedit ForeColorButton= false > </de:devedit> object.forecolorbutton = bvalue; 11

13 FullScreenButton Hides or shows the Full Screen button. This button, when pressed, causes the DevEdit control to maximize to take up the entire area of the browser window. This is the same as setting the control s height and width properties to 100%. public bool FullScreenButton {get; set;} true if you want the Full Screen button to be displayed; otherwise false. The default is true. <de:devedit FullScreenButton = false > </de:devedit> object.fullscreenbutton = bvalue; HelpButton Hides or shows the Help button. Clicking this button will display the Help popup window. This window describes the function of each of the buttons displayed on the DevEdit control interface. public bool HelpButton {get; set;} true if you want the Help button to be displayed; otherwise false. The default is true. <de:devedit HelpButton= false > </de:devedit> object.helpbutton = bvalue; HorizontalRuleButton Hides or shows the Insert Horizontal Rule button. This button allows the user to insert <HR> tags. public bool HorizontalRuleButton {get; set;} 12

14 true if you want the Insert Horizontal Rule button to be displayed; otherwise false. The default is true. <de:devedit HorizontalRuleButton= false > </de:devedit> object.horizontalrulebutton = bvalue; ImageButton Hides or shows the Insert Image button. This button allows the user to insert images. This is done by way of the Insert Image dialog box where images can be viewed, uploaded, deleted, and inserted into the document. (See the Image properties to adjust the behavior of this popup.) public bool ImageButton {get; set;} true if you want the Insert Image button to be displayed; otherwise false. The default is true. <de:devedit ImageButton= false > </de:devedit> object.imagebutton = bvalue; IncreaseIndentButton Hides or shows the Increase Indent button. This button allows the user to indent the current or selected paragraph(s) by way of inserting <blockquote> </blockquote> tags where necessary. public bool IncreaseIndentButton {get; set;} true if you want the Increase Indent button to be displayed; otherwise false. The default is true. <de:devedit IncreaseIndentButton= false > </de:devedit> 13

15 object.increaseindentbutton = bvalue; ItalicButton Hides or shows the Italic button. This button allows the user to format the current text as italics. This is done by inserting <em> </em> tags where necessary. (On some browsers the <i> </i> tags may be used instead) public bool ItalicButton {get; set;} true if you want the Italic button to be displayed; otherwise false. The default is true. <de:devedit ItalicButton= false > </de:devedit> object.italicbutton = bvalue; JustifyAlignButton Hides or shows the Justify Align button. This button allows the user to apply justified text alignment to the current or selected paragraph(s) by inserting the align= justify attribute where necessary. public bool JustifyAlignButton {get; set;} true if you want the Justify Align button to be displayed; otherwise false. The default is true. <de:devedit JustifyAlignButton= false > </de:devedit> object.justifyalignbutton = bvalue; LeftAlignButton Hides or shows the Left Align button. This button allows the user to apply left text alignment to the current or selected paragraph(s) by inserting the align= left attribute where necessary. 14

16 public bool LeftAlignButton {get; set;} true if you want the Left Align button to be displayed; otherwise false. The default is true. <de:devedit LeftAlignButton= false > </de:devedit> object.leftalignbutton = bvalue; LinkButton Hides or shows the Insert Link button. This button allows the user to link the selected text to a specified URL. Clicking this button will display a popup dialog which will prompt the user for the URL and link properties. public bool LinkButton {get; set;} true if you want the Insert Link button to be displayed; otherwise false. The default is true. <de:devedit LinkButton= false > </de:devedit> object.linkbutton = bvalue; MailLinkButton Hides or shows the Insert Mail Link button. This button allows the user to link the selected text to an address. Clicking this button will display a popup dialog which will prompt the user for the address to link to. public bool MailLinkButton {get; set;} true if you want the Insert Mail Link button to be displayed; otherwise false. The default is true. 15

17 <de:devedit MailLinkButton= false > </de:devedit> object.maillinkbutton = bvalue; NumericListButton Hides or shows the Numeric List button. This button allows the user to format the current or selected paragraphs as a numbered list item by way of inserting <ol><li> </li></ol> tags where necessary. public bool NumericListButton {get; set;} true if you want the Numeric List button to be displayed; otherwise false. The default is true. <de:devedit NumericListButton= false > </de:devedit> object.numericlistbutton = bvalue; PropertiesButton Hides or shows the Document Properties button. This button allows the user to modify the document s properties, such as the page title, search engine description and keywords, background, and colors. Note: This button will only be displayed if the DocType is set to HtmlPage. public bool PropertiesButton {get; set;} true if you want the Document Properties button to be displayed; otherwise false. The default is true. <de:devedit PropertiesButton= false > </de:devedit> object.propertiesbutton = bvalue; 16

18 RemoveTextFormattingButton Hides or shows the Remove Text Formatting button. This button allows the user to remove all formatting from the currently selected text. It will only affect formatting applied within the current selection. public bool RemoveTextFormattingButton {get; set;} true if you want the Remove Text Formatting button to be displayed; otherwise false. The default is true. <de:devedit RemoveTextFormattingButton= false > </de:devedit> object. RemoveTextFormattingButton = bvalue; RightAlignButton Hides or shows the Right Align button. This button allows the user to format the current or selected paragraph(s) as right-aligned by applying the align= right attribute where necessary. public bool RightAlignButton {get; set;} true if you want the Right Align button to be displayed; otherwise false. The default is true. <de:devedit RightAlignButton = false > </de:devedit> object. RightAlignButton = bvalue; SizeList Hides or shows the Font Size List. This button allows the user to set the size of the currently selected text. Sizes are measured in FONT units, and are applied by placing <font size= > </font> tags where necessary. public bool SizeList {get; set;} 17

19 true if you want the Font Size List to be displayed; otherwise false. The default is true. <de:devedit SizeList= false > </de:devedit> object.sizelist = bvalue; SizeListItems Gets or sets a list of font sizes to appear in the Size List drop down. public string SizeListItems {get; set;} A comma separated list of strings. <de:devedit SizeListItems= 1, 2, 3 > </de:devedit> object.sizelistitems = svalue; SizeListItemsArray Gets or sets a list of font sizes to appear in the Size List drop down. public string[] SizeListItemsArray {get; set;} An array of strings. Not compatible string[] sizes = new string[] { 1, 2 }; object.sizelistitemsarray = sizes; SpellingButton Hides or shows the Spell Check button. This button allows the user to run spell-check on their composition. See SpellingLanguage to set the language for the spell check feature. 18

20 public bool SpellingButton {get; set;} true if you want the Spell Check button to be displayed; otherwise false. The default is true. <de:devedit SpellingButton = false > </de:devedit> object.spellingbutton = bvalue; SpellingLanguage Sets the dictionary to use during spell check. public SpellingLanguageEnum SpellingLanguage {get; set;} American British Canadian Spell check will run checks against American English dictionary. Spell check will run checks against British English dictionary. Spell check will run checks against Canadian English dictionary. <de:devedit RightAlignButton = false > </de:devedit> object. RightAlignButton = bvalue; StrikethroughButton Hides or shows the strikethrough button. This button allows the user to format the selected text as strikethrough. public bool StrikethroughButton {get; set;} true if you want the Strikethrough button to be displayed; otherwise false. The default is true. 19

21 <de:devedit StrikethroughButton= false > </de:devedit> object.strikethroughbutton = bvalue; StyleList Hides or shows the Style List. This control allows the user to apply a CSS style class formatting to the selected text. Note: The Style List will only be displayed if the DocType is set to HtmlPage. Note: To use styles in your Page, you must provide a URL to an external CSS file with the SnippetCSS property. The control will load the classes found in the document into the drop-down list. public bool StyleList {get; set;} true if you want the Style List to be displayed; otherwise false. The default is true. <de:devedit StyleList = false > </de:devedit> object. StyleList = bvalue; SubScriptButton Hides or shows the Sub-Script button. This button allows the user to format the currently selected text as sub-script by inserting  tags where necessary. public bool SubScriptButton {get; set;} true if you want the Sub-Script button to be displayed; otherwise false. The default is true. <de:devedit SubScriptButton= false > </de:devedit> object.subscriptbutton = bvalue; 20

22 SuperScriptButton Hides or shows the Super-Script button. This button allows the user to format the currently selected text as super-script by inserting <super> </super> tags where necessary. public bool SuperScriptButton {get; set;} true if you want the Super-Script button to be displayed; otherwise false. The default is true. <de:devedit SuperScriptButton= false > </de:devedit> object.superscriptbutton = bvalue; SymbolButton Hides or shows the Insert Symbol button. This button allows the user to insert special characters into the control text. public bool SymbolButton {get; set;} true if you want the Insert Symbol button to be displayed; otherwise false. The default is true. <de:devedit SymbolButton= false > </de:devedit> object.symbolbutton = bvalue; TableButton Hides or shows the Table button. This button will display a popup menu allowing the user to insert or delete a new table, row, column, or cell, or modify properties of the table, row, or cell. For more instructions, see DevEdit Usage. public bool TableButton {get; set;} 21

23 true if you want the Table button to be displayed; otherwise false. The default is true. <de:devedit TableButton= false > </de:devedit> object.tablebutton = bvalue; UnderlineButton Hides or shows the Underline button. This button allows the user to format the currently selected text as underlined. This is done by adding <u> </u> tags where necessary. public bool UnderlineButton {get; set;} true if you want the Underline button to be displayed; otherwise false. The default is true. <de:devedit UnderlineButton= false > </de:devedit> object.underlinebutton = bvalue; Value Properties Text Gets or sets the value of the DevEdit control. This property is identical to the Value property. public string Text {get; set;} string of to render in the control. <de:devedit>[s]</de:devedit> object.text = s; 22

24 Value Gets or sets the value of the DevEdit control. This property is identical to the Text property. public string Value {get; set;} string of to render in the control. <de:devedit>[s]</de:devedit> object.value = s; Browser Down-Level TextAreaCols When viewing the control with an incompatible browser (not IE 5.5 or newer), this property gets or sets the cols attribute of the <textarea> tag. (horizontal size) Note: The <textarea> tag will be rendered with style= width: [ControlWidth]; height: [ControlHeight], but it s a good idea to specify the Cols and Rows attributes for even more compatibility. public int TextAreaCols {get; set;} int number of columns of text. The default is 40. <de:devedit TextAreaCols= [icols] > </de:devedit> object.textareacols = icols; TextAreaRows When viewing the control with an incompatible browser (not IE 5.5 or newer) this property gets or sets the rows attribute of the <textarea> tag. (Vertical size) Note: The <textarea> tag will be rendered with style= width: [ControlWidth]; height: [ControlHeight], but it s a good idea to specify the Cols and Rows attributes for even more compatibility. 23

25 public int TextAreaRows {get; set;} int number of rows of text. The default is 4. <de:devedit TextAreaRows= [icols] > </de:devedit> object.textarearows = icols; Image Management ImageDeleting Sets or clears the flag which indicates whether a user should be allowed to delete images from the ImagePath folder. Setting this flag will remove the Delete link from the image management popup (See the ImageButton property). Note: For Image Deleting to work properly the Machine/ASPNET user must have the Modify permission set on files in the ImagePath folder. public bool ImageDeleting {get; set;} true if you want user to be able to delete files from the ImagePath folder; otherwise false. The default is true. <de:devedit ImageDeleting= false > </de:devedit> object.imagedeleting = bvalue; ImageDisplayType Sets the Image Management popup to display either thumbnails of images in the ImagePath folder or only file names in a table. For more information on the Image Management popup see the ImageButton Property. public ImageDrawEnum ImageDisplayType {get; set;} 24

26 Thumbnail Table Default. Images will be displayed as a thumbnail in 3 columns. Image names will be displayed in a table. <de:devedit ImageDisplayType= Thumbnail > </de:devedit> object.imagedisplaytype = bvalue; ImageInsertFromWeb Hides or shows the External Image field on the Insert Image window, allowing the user to type the URL of an image located on the web on another server. This feature does NOT upload an image to the server. Note: If the SourceMode property is true, the user can still go to view and edit the source directly and insert images with external URLs. public bool ImageInsertFromWeb {get; set;} true if you want user to be able to insert images with external URLs; otherwise false. The default is true. <de:devedit ImageInsertFromWeb= false > </de:devedit> object.imageinsertfromweb = bvalue; ImagePath Sets or gets the path to the folder of images that the user can use to insert into their composition. Note: Make sure that the MACHINE/ASPNET user has Read+Execute access to the folder specified. public string ImagePath {get; set;} string path to the images folder (relative to the Application Root folder). The default is /Images. 25

27 <de:devedit ImagePath= /myimages > </de:devedit> object.imagepath = spath; ImagePathType Sets the way the path for an image is inserted into content as the src attribute. public PathTypeEnum ImagePathType {get; set;} RelativeToRoot Full Default. Images will be inserted using URLs relative to the server s root folder. (i.e. /Images/MyImage.gif ) Images will be inserted using absolute URLs. (i.e. ) <de:devedit ImagePathType= Full > </de:devedit> object.imagepathtype = PathTypeEnum; ImageUploading Sets or clears the flag which allows the user to upload new images into the ImagePath folder using the Image Management tool. For more information about Image Management see the ImageButton property. Note: For Image Uploading to work, the MACHINE/ASPNET user must have Read+Write access to the ImagePath folder. public bool ImageUploading {get; set;} true if you want Image Uploading to be enabled; otherwise false. The default is true. <de:devedit ImageUploading= false > </de:devedit> object.imageuploading = bvalue; 26

28 Editing Features PreviewMode Enables or disables the ability for the user to go into Preview Mode. Preview Mode enables the user to look at their composition with the editing features turned off. On some computers, looking at your composition with the editing features turned off may or may not have an effect on its appearance. Going into Preview Mode will not have any effect on the user s composition. Their code will remain unchanged. Note: It is theoretically possible that the user can inject a script into their control that can interact with the script on your page as if it were there to begin with. If you choose to enable this feature, you should refrain from placing client-side script on the same page with the DevEdit control which could possibly be maliciously exploited. public bool PreviewMode {get; set;} true if you want Preview Mode to be enabled; otherwise false. The default is true. <de:devedit PreviewMode= false > </de:devedit> object.previewmode = bvalue; SourceMode Enables or disables the ability for the user to go into source view mode. This allows the user to look at the source code generated for their composition. The source code is editable and the user can make changes to it then go back into Edit or Preview Mode and see how their changes are reflected. Note: Allowing the user to use SourceMode enables them to put anything into the DevEdit control. If you allow the user to use this feature, you should take responsibility for checking to make sure the user is not injecting any kind of <script> blocks into your application. These could break your application at a later date, or could maliciously exploit your own clientside scripts. public bool SourceMode {get; set;} true if you want Source Mode to be enabled; otherwise false. The default is true. 27

29 <de:devedit SourceMode= false > </de:devedit> object.sourcemode = bvalue; Formatting UseSingleLineReturn Gets or sets the flag which causes DevEdit to insert <br> tags instead of <p> </p> tags when the user presses the Enter button. If UseSingleLineReturn is set to false then <br> tags can still be inserted by pressing Shift+Enter. public bool UseSingleLineReturn {get; set;} true if you want to insert <br> tags; false for <p> </p> tags. The default is false. <de:devedit UseSingleLineReturn= false > </de:devedit> object.usesinglelinereturn = bvalue; XFormatting Causes DevEdit to produce XML-compliant code (e.g. <br/> instead of <br>). public bool XFormatting {get; set;} true if you want XML-Compliant code; otherwise false. The default is true. <de:devedit XFormatting= false > </de:devedit> object.xformatting = bvalue; DocType Changes the behavior between page editing and snippet editing. In page editing mode the code produced will contain <>, <HEAD>, and <BODY> tags. Certain page-oriented 28

30 features are not available in snippet mode but snippet mode produces which is appropriate for including in larger pages. public DocTypeEnum DocType {get; set;} Snippet HtmlPage Default. Content will be coded for inclusion inline into an existing web page. Content will be coded as an entire page. <de:devedit DocType= HtmlPage > </de:devedit> object.doctype = [DocTypeEnum]; SnippetCSS Gets or sets the absolute or relative path to the cascading style sheet (CSS) applied to the content while designing in snippet mode. public string SnippetCSS {get; set;} string URL to the CSS stylesheet that you wish to use in your control s composition. The classes found in the stylesheet will be loaded into the StyleList drop-down. Default is an empty string (no stylesheet). <de:devedit SnippetCSS= style.css > </de:devedit> object.snippetcss = surl; Methods AddCustomInsert Adds a named block of code to the Insert Custom popup window. This window allows the user to insert a predefined set of at the current cursor location. A popup window is displayed and the user is allowed to preview each named block of code before inserting it into their composition. Note: The Insert Custom button ( ) will not be displayed if this function has not been called at least once. 29

31 public string AddCustomInsert ( string insertname, string insert ) Parameters: insertname insert string name that the custom should be displayed to the user. It s best to use a name which will describe to the user what the code represents. Try to keep it below 50 characters. Spaces and special characters are OK, but don t use. string containing a snippet of that you would like the user to be able to insert. The snippet should be properly formatted, un-escaped, valid. (All tags should closed, etc.) object.addcustominsert( Page Title, <h1 align=left>insert Title Here</h1> ); GetStringResource This function will return a named resource string from the localized embedded resource files. Note: To change the UI language please see the HOW TO USE RESOURCES.TXT file in the Interspire.DevEdit project folder. public string GetStringResource ( ) Parameters: string resourcename resourcename string name of the resource matching a <data name= > attribute in the strings.resx file embedded in the DevEdit project. svalue = object.getstringresource( [sresourcename] ); 30

32 SetTextAreaDimensions This function simply combines the TextAreaCols and TextAreaRows properties into one function call. See those property references for more information. public void SetTextAreaDimensions ( ) Parameters: int cols, int rows cols rows int value to be assigned to TextAreaCols. int value to be assigned to TextAreaRows. object.settextareadimensions(40,4); Enumerations PathTypeEnum Specifies how image paths should be inserted into the code. Use the members of this enumeration to set the values of the ImagePathType property of the DevEdit control. public enum PathTypeEnum : int Members: RelativeToRoot Full Images will be inserted using URLs relative to the server s root folder. (i.e. /Images/MyImage.gif ) Images will be inserted using absolute URLs. (i.e. ) DocTypeEnum Specifies how image paths should be inserted into the code. Use the members of this enumeration to set the values of the DocType property of the DevEdit control. 31

33 public enum DocTypeEnum : int Members: Snippet HtmlPage Content will be coded for inclusion inline into an existing web page. Content will be coded as if it were the entire page. ImageDrawEnum Specifies how images should be displayed in the image management screen. Use the members of this enumeration to set the values of the ImageDisplayType property of the DevEdit control. Public enum ImageDrawEnum : int Members: Thumbnail Table Images will be displayed as a thumbnail in 3 columns. Image names will be displayed in a table. SpellingLanguageEnum Specifies which language should be used during spell check. Use the members of this enumeration to set the values of the SpellingLanguage property of the DevEdit control. Public enum SpellingLanguageEnum : int Members: American British Canadian Spell check will run checks against American English dictionary. Spell check will run checks against British English dictionary. Spell check will run checks against Canadian English dictionary. 32

34 DevEdit Examples Simple Example This is a simple example of how to place a DevEdit control to a new web form. The important parts have been made bold for you. <%@ Page language="c#" AutoEventWireup="true" %> <%@ Register TagPrefix="de" Namespace="Interspire.DevEdit" Assembly="Interspire.DevEdit" %> <> <HEAD> <script runat="server"> private void Page_Load(object sender, System.EventArgs e) { // Put user code to initialize the control here TestControl.AddCustomInsert("Red Text", "<font color='red'>red Text</font>"); if(this.ispostback){ //Here, we can do something with the value of TestControl1.Text; Response.Cookies[ UserText UserText ] = TestControl1.Text; Text; } } </script> </HEAD> <body> <form id="form1" method="post" runat="server"> <de:devedit id="testcontrol" runat="server" Width="750px" Height="300px" RemoveTextFormattingButton="False"> ="False">Initial Value can go here...</ </de:devedit de:devedit> </form> </body> </> 33

35 behind Example Here s some sample code for the ASPX page: <%@ Page language="c#" behind="devedittest2.aspx.cs" AutoEventWireup="false" Inherits="DevEditDemo.DevEditTest2" %> <%@ Register TagPrefix="de" Namespace="Interspire.DevEdit" Assembly="Interspire.DevEdit" %> <> <body> <form id="devedittest2form" method="post" runat="server"> <P><de:DevEdit id="testcontrol" runat="server" Width="750px" Height="300px"> ="300px">something here</ </de:devedit de:devedit></p> <P><asp:Button id="button1" runat="server" Text="Get "></asp:button></p> <P><asp:Label id="label1" runat="server"></asp:label></p> </form> </body> </> This codebehind code will take the value of the DevEdit control, and place it in the asp:label control when the user clicks on the asp:button. using System; using System.Collections; using System.ComponentModel; using System.Data; using System.Drawing; using System.Web; using System.Web.SessionState; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.HtmlControls; namespace DevEditDemo { public class DevEditTest2 : System.Web.UI.Page { protected Interspire.DevEdit.DevEdit TestControl; protected System.Web.UI.WebControls.Label Label1; 34

36 protected System.Web.UI.WebControls.Button Button1; private void Page_Load(object sender, System.EventArgs e) { // Put user code to initialize the page here } #region Web Form Designer generated code override protected void OnInit(EventArgs e) { InitializeComponent(); base.oninit(e); } private void InitializeComponent() { this.button1.click += new System.EventHandler(this.Button1_Click); this.load += new System.EventHandler(this.Page_Load); } #endregion private void Button1_Click(object sender, System.EventArgs e) { this.label1.text = TestControl.Text; } } } 35

37 Conclusion Thank you for purchasing DevEdit. Hopefully this setup guide has gotten you up and running in the shortest amount of time possible. If you are still having difficulties, please visit our support page for helpful tips, tricks and advice in our FAQ s and knowledge base. For more information regarding this and other innovative web applications, see the Interspire website. 36