Version

igTextEditor Overview

Overview Of The igTextEditor

The Ignite UI for jQuery™ text editor, or igTextEditor, is a control that renders an input field which can be formatted for single or multiline input.

The igTextEditor control exposes a rich client-side API, which may be configured the work with any server technology. While the Ignite UI for jQuery™ controls are server-agnostic, the control is featured in Ignite UI for MVC that is specific for the Microsoft® ASP.NET MVC Framework and can be configured with the .NET™ language of your choice.

The igTextEditor control may be extensively styled giving you an opportunity to provide a completely different look and feel for the control as opposed to the default style. Styling options include using your own styles as well as styles from jQuery UI’s ThemeRoller.

Figure 1: The igTextEditor control as rendered to the user

Basic Usage Sample

Features

The igTextEditor includes the following characteristics:

  • Single and multiline input
  • Validation
  • Filtering entries by include/exclude specific characters
  • Filtering entries by predefined list
  • JavaScript Client API
  • ASP.NET MVC
  • Overall theme support

Adding igTextEditor using the Ignite UI CLI

The easiest way to add a new igTextEditor to your application is via the Ignite UI CLI. After you have created a new application, you just need to execute the following command and a text editor will be added to the project:

   ig add text-editor newTextEditor

This command will add a new text editor no matter if your application is created in Angular, React or jQuery. For more information and the list of all available commands read the Using Ignite UI CLI topic.

Adding igTextEditor to a Web Page

  1. To get started, include the required and localized resources for your application. Details on which resources to include can be found in the Using JavaScript Resources in Ignite UI for jQuery help topic.

  2. On your HTML page or ASP.NET MVC View, reference the required JavaScript files, CSS files, and ASP.NET MVC assemblies.

    In HTML:

    <link type="text/css" href="/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link type="text/css" href="/css/structure/infragistics.css" rel="stylesheet" />
<script type="text/javascript" src="/Scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery-ui.min.js"></script>
<script type="text/javascript" src="/Scripts/Samples/infragistics.core.js"></script>
<script type="text/javascript" src="/Scripts/Samples/infragistics.lob.js"></script>

    In Razor:

    @using Infragistics.Web.Mvc;

<link type="text/css" href="@Url.Content("~/css/themes/infragistics/infragistics.theme.css")" rel="stylesheet" />
<link type="text/css" href="@Url.Content("~/css/structure/infragistics.css")" rel="stylesheet" />

<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.9.1.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/Samples/infragistics.core.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/Samples/infragistics.lob.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/Samples/modules/i18n/regional/infragistics.ui.regional-en.js")"></script>

  3. For jQuery implementations create an INPUT, DIV or SPAN as the target element in HTML. This step is optional for ASP.NET MVC implementations as Ignite UI for MVC can create the containing element for you.

    In HTML:

    <input id="textEditor" type="text" />

  4. Once the above setup is complete, initialize the text editor and set needed options, such as width, placeHolder etc.

    Note: For the ASP.NET MVC Views, the Render method must be called after all other options are set. An optional boolen parameter can be passed to skip rendering target element if it's already present in the page from the previous step.

    In Javascript:

    <script type="text/javascript">
   $('#textEditor').igTextEditor();
</script>

    In Razor:

    @(Html.Infragistics().TextEditor()
   .ID("textEditor")
   .Render())

  5. Run the web page to view the basic setup of the igTextEditor control.

Specific options

igTextEditor exposes a robust API whith many options providing flexibility in both functionality and appearence. Let's start with the placeHolder option. It is the text which appears in the editor when it has no focus and the value is null or empty string.

Configure PlaceHolder

HTML:

<input id="email"/>

Javascript:

<script type="text/javascript">
    $("#email").igTextEditor({
        placeHolder:"John_Doe@email.com"
    });
</script>

In Razor:

@(Html.Infragistics().TextEditor()
    .ID("email")
    .InputName("email")
    .PlaceHolder("John_Doe@email.com")
    .Render()
)

Configure editor mode

The igTextEditor has several specific inbuilt modes, based on the purpose it is going to serve. These are exposed trough the textMode option that sets the text mode of the editor such as: single-line text editor, password editor or multiline editor. That option has effect only on initialization. If the base element (selector) is TEXTAREA, then "multiline" mode is required.

Configure password

HTML:

<input id="password"/>

Javascript:

<script type="text/javascript">
    $("#password").igTextEditor({
        placeHolder:"********"
    });
</script>

In Razor:

@(Html.Infragistics().TextEditor()
    .ID("password")
    .InputName("password")
    .TextMode(TextEditorTextMode.Password)
    .PlaceHolder("********")
    .Render()
)

Configure Multiline

HTML:

<textarea id="note"></textarea>

Javascript:

<script type="text/javascript">
    $('#note').igTextEditor({
        inputName: "note",
        textMode: "multiline",
        height:"100px"
});
</script>

In Razor:

@(Html.Infragistics().TextEditor()
    .ID("note")
    .InputName("note")
    .TextMode(TextEditorTextMode.Multiline)
    .Height(100)
    .Render()
)

Related Links

View on GitHub