Version

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.

  1. 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>
    
  2. 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"});
       });
      
  3. (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()
      

Related Content

Topics

The following topics provide additional information related to this topic.

Samples

The following samples provide additional information related to this topic.

  • Edit Content: In this forum post example, an initial piece of content provided in the HTML Editor.

  • Custom Toolbars and Buttons: This sample demonstrates how the HtmlEditor control works as an email client. This implementation features a custom toolbar where you can add a signature to the message.

View on GitHub