Activedit 4.0 Documentation -- Activedit - Examples

Visual Studio

ActivEdit 4.0 includes design support for Visual Studio .NET.  To use ActivEdit 4.0 .NET in Visual Studio, open a form page, right-click within the toolbox group that you would like to add ActivEdit to and choose Add/Remove Items. Browse to and select the ae4net.dll and press OK to add the component to your toolbox.

Once ActivEdit has been added to the toolbox, you simply drag and drop instances of ActivEdit into your form and edit properties in the properties dialog.

Most ActivEdit properties are bindable, which means you can apply values with page variables, such as entering <%=myObject.myField%> for the Content property. Most properties are also added to the page's viewstate for the ActivEdit instance.

Visual Studio will add ae4net.dll to your application's bin directory when you add an ActivEdit instance to your form and place the register directive in your page. If you also copy the images directory from the inc directory to the bin directory, button images will display properly in design view within Visual Studio after adding an instance.

Properties displayed in the properties dialog within Visual Studio are specific to ActivEdit. Developers may also want to access public properties and methods of the WebControl class that ActivEdit inherits from. See WebControl in the .NET SDK documentation.

In other editors

The following instance shows the code you'll need to add to your form page to create an ActivEdit instance in an ASP.NET form. The required lines are bold. You'll need a copy of ae4net.dll in the bin directory for your application and a copy of the inc directory within your application.

<%@ Register TagPrefix="ae" Namespace="ae" Assembly="activedit" %>
<form action="/activedit/dotnet/40/docs/control/mypage.html" method="post">
  <input type="text" name="afield"> 
  <ae:ActivEdit runat="server"
        name="contents"
        inc="/activedit/inc/index.html"> 
  </ae:ActivEdit>
  <input type="submit" value="Post">
</form>

The above form has a textbox called afield which is independent of activedit, but was used to illustrate Activedit's ability to mix into an existing form.


Using custom toolbars

The default toolbar contains commonly used buttons, but you can customize the toolbar of any ActivEdit instance by simply adding the toolbar attribute to the instance. See toolbars for a list of all button names.
 

<%@ Register TagPrefix="ae" Namespace="ae" Assembly="ae4net" %>
    <form action="/activedit/dotnet/40/docs/control/mypage.html" method="post">
        <input type="text" name="afield"> 

        <ae:ActivEdit runat="server"
    toolbar="quickformat,quickfontsize,|,cut,copy,paste,|,redo,undo,|,font,bold,italic,underline,|,outdent,indent,|,justifyleft,justifycenter,justifyright,bullets,|,table,image,hyperlink,|,find,help,spellcheck,specialchars"
        name="contents"
        inc="/activedit/inc/index.html"
        image="false"> 
  </ae:ActivEdit>
  <input type="submit" value="Post">
</form>

See the toolbars page for a complete list of options.


Example with image upload and insert support

<%@ Register TagPrefix="ae" Namespace="ae" Assembly="activedit" %>

<form action="/activedit/dotnet/40/docs/control/mypage.html" method="post">
  <input type="text" name="afield"> 
  <ae:ActivEdit runat="server" name="contents" inc="/activedit/inc/index.html" baseurl="http://localhost" toolbar="image" upload="true" imagepath="c:\inetpub\wwwroot\images" imageurl="/images/index.html"> 
  </ae:ActivEdit>
  <input type="submit" value="Post">
</form>

The addition of the baseurl attribute in the instance above makes image tags portable to another domain by making all src attributes in image tags site-relative.