このサイトで JavaScript が必要です。

バージョン

Is this content useful?

Thank you for your feedback!

Thank you for your feedback! You have rated this topic in the last 30 days.

igTextEditor の概要

Ignite UI for jQuery™ のテキストエディターまたは igTextEditor は、単一行または複数行の入力用に書式設定可能な入力フィールドを描画するコントロールです。

igTextEditor コントロールは、任意のサーバー技術を使用する作業を構成できる豊富なクライアント側 API を公開します。Ignite UI for jQuery™ のコントロールはサーバー非依存ですが、Microsoft® ASP.NET MVC Framework 専用の Ignite UI for MVC の一部として含まれるコントロールでは、希望する .NET™ 言語を使用して構成できます。

igTextEditor コントロールは、大幅にスタイル変更ができるため、デフォルトのスタイルとまったく異なるルックアンドフィールのコントロールを実現できます。スタイル設定オプションでは、独自のスタイルも jQuery UI の ThemeRoller のスタイルも使用できます。

図 1: ユーザー向けに描画した igTextEditor コントロール

基本的な使用方法サンプル

機能

igTextEditor には以下の特徴があります。

単一または複数の入力
検証
特定文字列を含む条件または含まない条件によるエントリのフィルタリング
定義済みのリストによるエントリのフィルタリング
JavaScript クライアント API
ASP.NET MVC
全体のテーマのサポート

Ignite UI CLI を使用して igTextEditor の追加

新しい igTextEditor を簡単にアプリケーションに追加するには、Ignite UI CLI を使用します。新しいアプリケーションを作成した後、以下のコマンドを実行すると、テキストエディターがプロジェクトに追加されます。

   ig add text-editor newTextEditor

このコマンドは、アプリケーションが Angular、React、または jQuery に関係なく新しいテキストエディターを追加します。

すべての利用可能なコマンドおよび詳細な情報については、「Ignite UI CLI の使用」のトピックを参照してください。

igTextEditor の Web ページへの追加

最初に、アプリケーションに必要なローカライズ済みのリソースを含めます。組み込むリソースの詳細は、「Ignite UI for jQuery で JavaScript リソースを使用」ヘルプトピックをご覧ください。

ご自分の HTML ページまたは ASP.NET MVC View で、必要な JavaScript ファイル、CSS ファイル、および ASP.NET MVC アセンブリを参照してください。

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>

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>

jQuery の実装では、HTML 内のターゲット要素として INPUT、DIV、または SPAN を作成します。ASP.NET MVC の実装では、含める要素を Ignite UI for MVC が作成するため、この手順はオプションです。

HTML の場合:
```
<input id="textEditor" type="text" />
```
前述のセットアップ完了後、テキストエディターを初期化し、width、placeHolder などの必要なオプションを設定します。

注: ASP.NET MVC View では、その他のオプションをすべて設定した後で Render メソッドを呼び出す必要があります。前述の手順で、ターゲット要素がすでにページ上に表示されている場合は、オプションのブール値パラメーターを渡して、ターゲット要素の描画を省略できます。

JavaScript の場合:
```
<script type="text/javascript">
   $('#textEditor').igTextEditor();
</script>
```
Razor の場合:
```
@(Html.Infragistics().TextEditor()
   .ID("textEditor")
   .Render())
```
Web ページを実行し、igTextEditor コントロールの基本セットアップを表示します。

固有のオプション

igTextEditor は、機能および外観をカスタマイズするオプションを提供する API を公開します。はじめに placeHolder オプションを見てみましょう。エディターにフォーカスがなく、value が null または空の文字列の場合に、エディターに表示されるテキストです。

プレースホルダーの構成

HTML:

<input id="email"/>

Javascript:

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

Razor の場合:

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

エディターモードの構成

igTextEditor は、目的に基づく複数の定義済みモードがあります。これは、エディターのテキストモードを設定する textMode オプションで公開されます。モードは単一行のテキストエディター、パスワードエディター、または複数行エディターが可能です。このオプションは、初期化時にのみ影響します。基本要素 (セレクター) が TEXTAREA の場合、"multiline" モードが必要になります。

パスワードの構成

HTML:

<input id="password"/>

Javascript:

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

Razor の場合:

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

複数行の構成

HTML:

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

Javascript:

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

Razor の場合:

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

Ignite UI | ヘルプトピック

igTextEditor の概要