Saving and loading HTML file in WebTextEditor

As the nature of a text editor, WebTextEditor provides standard capabilities that allow you to easily get and set editor’s content via the property provided in the object model. Developers will then store the content to other physical storage such as database or file for later use. This common scenario is often overlooked in other similar text editors, and thus require developers to manually write codes for such operations. In this post, I’ll show how we designed WebTextEditor to help you easily saving and loading HTML content from physical file.

Loading from physical HTML file can be tricky in the way the HTML is written. It’s pretty easy and straightforward if you’re loading from a HTML file that includes only the body content – where you can simply set the body content to the editor’s Content property. The harder part comes when you’re loading a full, complete HTML that also includes doc type, html declaration, scripts, styles, and other markups outside the body content — which means you have to parse the HTML and obtain only the valid body content. It’s even harder in the saving process where the modified contents should be applied while preserving the non-body contents (such as html declaration, scripts, styles, etc). Looking at these complexities, it’s understandable that many of basic text editor in the market chosen to omit these capabilities.

Intersoft WebTextEditor supports loading from both partial and full HTML, as well as saving to both partial and full HTML file. It’s further explained in the following.

Saving content to HTML

WebTextEditor provides two approaches in performing save operation; it is through server side and client side.

• Server side
  In the server side, WebTextEditor provides SaveContentToFile method which has various parameters. These parameters are provided to make sure that WebTextEditor covers all file saving scenarios. By default SaveContentToFile method only saves WebTextEditor’s content (without full html). However if you would like to save full html instead of content, you can specify docType or saveFullHTML parameter. For further information, please read the parameter details below:
  1. fileName (string)
     Target file to be saved
  2. sectionName (string)
     Determine which section’s content of WebTextEditor that will be saved. This parameter is used in multiple sections mode.
  3. docType (WebTextEditorHtmlDocType)
     Specifies whether the content of WebTextEditor should be saved with html or xhtml doctype. If docType is specified, this will make WebTextEditor automatically add the selected doctype declaration to the saved in html file.
  4. title (string)
     Determine <title> of the saved html file. This parameter can be used if docType is specified.
  5. saveFullHTML (boolean)
     Determine whether full html or only WebTextEditor’s content that will be saved to the html file.
• Client side
  In the client side, WebTextEditor provides SaveContent method with a parameter sectionName(string). SaveContent will not automatically save WebTextEditor’s content to a file from client side; however it will perform FlyPostBack (aka AJAX) callback to server side and raise OnSave server-side event which enables you to implement your own saving mechanism. The sectionName parameter is required only if  you want to perform SaveContent in WebTextEditor with multiple section mode. To save all sections’ content in multiple section mode, you can set sectionName parameter to All value.

Loading content from HTML file

Loading content from HTML file is only possible to be done in server side. WebTextEditor provides LoadContentFromFile method with several parameters. Please see the parameter details in the following:

• fileName(string)
  Target file to be loaded
• sectionName(string)
  Determine which WebTextEditor’s section that will be loaded from a file as its content.
  This parameter should be specified in WebTextEditor with multiple section mode.
• isCompleteHTML(boolean)
  Determine whether the loaded file is a complete html file or not.

To see these features in action, you can access the samples from our Live Demo: Save and Load content from server side, Save and Load content from database and Save content using FlyPostBack.

That’s all for now! I’d love to hear any feedback about this post, or any other features of WebTextEditor. Please click here to learn more about WebTextEditor. You can also try WebTextEditor in your application by downloading 30-day free trial here.

Warm regards,
Budianto Muliawan.