バージョン

igHtmlEditor の追加

トピックの概要

目的

このトピックでは、igHtmlEditor™ を Web ページに追加する方法について説明します。

必要な背景

以下の表は、このトピックを理解するための前提条件として必要なトピックを示しています。

  • igHtmlEditor の概要: このトピックは、igHtmlEditor およびその機能の概要を説明します。

  • Infragistics Loader の使用: このトピックでは、Infragistics Loader を使用して、Ignite UI for jQuery で作業するために必要なリソースを管理する方法について説明します。

igHtmlEditor を Web ページに追加

概要

この手順では、igHtmlEditor を Web ページに追加する方法を手順ごとに示します。

プレビュー

以下のスクリーンショットは最終結果のプレビューです。

概要

以下はプロセスの概念的概要です。

1. 必要な JavaScript ファイルの参照

2. JavaScript での igHtmlEditor の初期化

3. (オプション) ASP.NET MVC Razor View での igHtmlEditor の初期化

手順

以下の手順では、igHtmlEditor を Web ページに追加する方法を示します。

  1. 必要な JavaScript ファイルを参照します。

    必要な JavaScript 参照を含めます。

    HTML の場合:

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

  2. JavaScript で igHtmlEditor を初期化します。

    Infragistics Ignite UI for MVC を使用している場合、手順 3 に示されているように、igHtmlEditor in ASP.NET MVC View をインスタンス化する必要があります。

    1. HTML プレースホルダーをエディターに対して定義します。

      HTML の場合:

       <div id="htmlEditor"></div>

    2. Infragistics Loader を初期化します

      JavaScript の場合:

       $.ig.loader({
     scriptPath: 'js',
     cssPath: 'css',
     resources: 'igHtmlEditor'
 });

      注: Infragistics Loader は、必要なファイルを素早く効果的に参照するための方法です。ただし、ファイルは手動で参照することができます。詳細については、関連コンテンツセクションの「Ignite UI for jQuery の JavaScript リソースの使用」トピック を参照してください。

    3. igHtmlEditor を初期化します

      JavaScript の場合:

       $.ig.loader(function () {
     $('#htmlEditor').igHtmlEditor({inputName: "Post"});
 });

  3. (オプション) ASP.NET MVC Razor View での igHtmlEditor を初期化します。

    この例では、Infragistics Loader を使用して ASP.NET MVC アプリケーションで igHtmlEditor を初期化する方法を示します。

    1. Infragistics Loader を初期化します

      C# の場合:

        @(Html.Infragistics().Loader().ScriptPath(Url.Content ("js")).CssPath(Url.Content("css")).Render())

      Ignite UI for MVC Loader を使用している場合、Resources メソッドの呼び出しは必要ありません。これは、ローダーは、特定のビューで使用される他の Ignite UI for MVC ヘルパーに基づいて、含めるリソースを推測するためです。これは、Ignite UI for jQuery コントロールも Ignite UI for MVC を使用してインスタンス化された場合にのみ有効です。

    2. igHtmlEditor を初期化します

      C# の場合:

       @Html.Infragistics().HtmlEditor().ID("igHtmlEditor").Render()

関連コンテンツ

トピック

このトピックの追加情報については、以下のトピックも合わせてご参照ください。

サンプル

このトピックについては、以下のサンプルも参照してください。

  • 内容を編集する: このフォーラム投稿のサンプルでは、HTML エディターでコンテンツを提供します。

  • カスタム ツールバーおよびボタン: このサンプルでは、HtmlEditor コントロールを電子メール クライアントとして実装します。署名をメッセージに追加するカスタム ツールバーがあります。

オンラインで表示: GitHub