Adding igHtmlEditor

Topic Overview

Purpose

This topic explains how to add an igHtmlEditor™ to a web page.

Required Background

The following table lists the topics required as a prerequisite to understanding this topic.

igHtmlEditor Overview: This topic provides an overview of the igHtmlEditor and its features.
Using Infragistics Loader: This topic explains how to manage the required resources to work with Ignite UI for jQuery using the Infragistics Loader.

Adding a igHtmlEditor to Web Page

Introduction

This procedure takes you step-by-step toward adding an igHtmlEditor to web page.

Preview

The following screenshot is a preview of the final result.

Overview

The following is a conceptual overview of the process:

1. Referencing the required JavaScript files

2. Initializing the igHtmlEditor in JavaScript

3. (Optional) Initializing the igHtmlEditor in an ASP.NET MVC Razor View

Steps

The following steps demonstrate how to add the igHtmlEditor to a web page.

Reference the required JavaScript files.

Include the required JavaScript references

In HTML:

 <script src="js/jquery.min.js"></script>
 <script src="js/jquery-ui.min.js"></script>
 <script src="js/infragistics.loader.js"></script>

Initialize the igHtmlEditor in JavaScript.

If you are using Infragistics Ignite UI for MVC then you should instantiate igHtmlEditor in ASP.NET MVC View as shown in step 3.
1. Define the HTML placeholder for the editor
  
  In HTML:
```
 <div id="htmlEditor"></div>
```
2. Initialize the Infragistics Loader
  
  In JavaScript:
```
 $.ig.loader({
     scriptPath: 'js',
     cssPath: 'css',
     resources: 'igHtmlEditor'
 });
```
  Note: The Infragistics loader is a quick and efficient way to reference the required files. However, you can reference them manually. For more information, see the "Using JavaScript Resouces in Ignite UI for jQuery" topic in the Related Content section.
3. Initialize the igHtmlEditor
  
  In JavaScript:
```
 $.ig.loader(function () {
     $('#htmlEditor').igHtmlEditor({inputName: "Post"});
 });
```
(Optional) Initialize the igHtmlEditor in an ASP.NET MVC Razor View.

This example demonstrates how to initialize the igHtmlEditor in an ASP.NET MVC Application using the Infragistics loader.
1. Initialize the Infragistics Loader
  
  In C#:
```
  @(Html.Infragistics().Loader().ScriptPath(Url.Content ("js")).CssPath(Url.Content("css")).Render())
```
  The Resources method invocation is not required when using the Ignite UI for MVC Loader because the loader infers which resources to include based off of the other Ignite UI for MVC helpers used in a given View. This is only valid if the Ignite UI for jQuery controls are also instantiated with Ignite UI for MVC.
2. Initialize the igHtmlEditor
  
  In C#:
```
 @Html.Infragistics().HtmlEditor().ID("igHtmlEditor").Render()
```

Ignite UI | Help Topics