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
には以下の特徴があります。
新しい igTextEditor を簡単にアプリケーションに追加するには、Ignite UI CLI を使用します。新しいアプリケーションを作成した後、以下のコマンドを実行すると、テキスト エディターがプロジェクトに追加されます。
ig add text-editor newTextEditor
このコマンドは、アプリケーションが Angular、React、または jQuery に関係なく新しいテキスト エディターを追加します。
すべての利用可能なコマンドおよび詳細な情報については、「Ignite UI CLI の使用」のトピックを参照してください。
ご自分の 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()
)
オンラインで表示: GitHub