SubscribeIntegrating EditLive! in ASP.Net 2.0 in 5 easy steps!
This example will walk you through the basic application set up any ASP.Net developer will need to implement EditLive!
Step 1. Add EditLive! & files to your website project.
The details of this are covered in the HTML Install guide (currently targetted towards ASP.Net 1).
In ASP.Net 2.0 the Ephox namespace in the body tag is not needed for IntelliSense
<body xmlns:elj="http://www.ephox.com/schemas/EditLiveJavaControl" … >
Step 2. Component Configuration
The EditLive! component can be configured extensively through the XML configuration file, and through the properties of the control. Some of the settings available on the control are:
EnableViewState: False (this allow you to set/get body content for CMS and database driven applications)
ReturnBodyOnly:True (this will allow EditLive! to return just the content within the <body> tags and not an entire <html> file content - ths can also be done in the configuration file for all instances of EditLive!)
UseMathML: True (this depends on if you are going to use the Equation Editor in the Productivity Pack - needed to convert your math equations to image files)
ConfigurationFile: This is the path to the .xml EditLive! configuration file e.g. redistributables/editlivejava/sample_eljconfig.xml
DownloadDirectory: redistributables/editlivejava/
Body: put HTML text in this property as the default text when the controls if initially loded - not required
Example Code: Your source code should look like this:
|
<body> </div> |
Step 3. Save and Run Your Application
Hit F5
Your application will come up with EditLive!
Step 4. Add a Button to postback the content from the editor to save to file/database
You must add this tag to your ASP.Net HTML source view: <%@ Page Language="VB" ValidateRequest="False"
- Add a Button Control to your page and double click it to create the button click event
- Copy & Paste this code:
| C# |
|
// The string html will hold the formatted hmtl that the user has typed in // It's important to note that you need to use the Request stream to get // the image paths once EditLive uploads and converts the paths for you!!! protected void Button1_Click(object sender, System.EventArgs e) { string html = Request.Form["EditLiveJava"]; if (SaveToDataBase(html)) { Response.Write("Content Successfully Saved"); } else { Response.Write("Error Occurred: Please Submit Again"); } } private bool SaveToDataBase(string html) { // TODO:Save to Database/File CMS / DataDriven Systems return true; } |
| VB |
|
'The string html will hold the formatted hmtl that the user has typed in 'It's important to note that you need to use the Request stream to get 'the image paths once EditLive uploads and converts the paths for you!!!
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click End Sub
Private Function SaveToDataBase(ByVal html As String) As Boolean End Function |
Step 5. Example Loading Content from a Datasource
In your page load event copy and paste this code, changing the FromDataBase() to actually load data from the database.
| C# |
|
protected void Page_Load(object sender, System.EventArgs e) { if ((Page.IsPostBack == false)) { // Only retrieve the contents on the inital page load string html; // Get the html from the database html = FromDataBase(); // Put the hmtl into EditLive! for the user to update! this.EditLiveJava1.Body = html; } } private string FromDataBase() { // TODO: Get Saved html text from database string _temp = "<p>This Text is From the Database</p>"; return _temp; } |
| VB |
|
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
End Sub |
Additional References:
- Defining Your Upload Script w/EditLive (images, MathML images)
- Basic ASP.Net 1.1 Example
- Extensive Property Seach Functionality on Ephox.com (just type in the property name)