このトピックでは、igHtmlEditor
™ を Web ページに追加する方法について説明します。
以下の表は、このトピックを理解するための前提条件として必要なトピックを示しています。
igHtmlEditor の概要: このトピックは、igHtmlEditor
およびその機能の概要を説明します。
Infragistics Loader の使用: このトピックでは、Infragistics Loader を使用して、Ignite UI for jQuery で作業するために必要なリソースを管理する方法について説明します。
この手順では、igHtmlEditor
を Web ページに追加する方法を手順ごとに示します。
以下のスクリーンショットは最終結果のプレビューです。
以下はプロセスの概念的概要です。
2. JavaScript での igHtmlEditor の初期化
3. (オプション) ASP.NET MVC Razor View での igHtmlEditor の初期化
以下の手順では、igHtmlEditor
を Web ページに追加する方法を示します。
必要な JavaScript 参照を含めます。
HTML の場合:
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/infragistics.loader.js"></script>
JavaScript で igHtmlEditor を初期化します。
Infragistics Ignite UI for MVC を使用している場合、手順 3 に示されているように、igHtmlEditor
in ASP.NET MVC View をインスタンス化する必要があります。
HTML プレースホルダーをエディターに対して定義します。
HTML の場合:
<div id="htmlEditor"></div>
Infragistics Loader を初期化します
JavaScript の場合:
$.ig.loader({
scriptPath: 'js',
cssPath: 'css',
resources: 'igHtmlEditor'
});
注: Infragistics Loader は、必要なファイルを素早く効果的に参照するための方法です。ただし、ファイルは手動で参照することができます。詳細については、関連コンテンツセクションの「Ignite UI for jQuery の JavaScript リソースの使用」トピック を参照してください。
igHtmlEditor を初期化します
JavaScript の場合:
$.ig.loader(function () {
$('#htmlEditor').igHtmlEditor({inputName: "Post"});
});
(オプション) ASP.NET MVC Razor View での igHtmlEditor を初期化します。
この例では、Infragistics Loader を使用して ASP.NET MVC アプリケーションで igHtmlEditor
を初期化する方法を示します。
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 を使用してインスタンス化された場合にのみ有効です。
igHtmlEditor を初期化します
C# の場合:
@Html.Infragistics().HtmlEditor().ID("igHtmlEditor").Render()
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
igHtmlEditor の操作: これは、igHtmlEditor
を構成し、それをプログラム的に管理する方法を説明する一連のトピックです。
スタイル設定およびテーマ設定 (igHtmlEditor): このトピックは、igHtmlEditor
のルック アンド フィールをカスタマイズする方法をコード例を用いて説明しています。
Ignite UI for jQuery で JavaScript リソースを使用: このトピックでは、Web アプリケーションで Ignite UI for jQuery を操作して、必要なリソースを管理する方法について説明します。
このトピックについては、以下のサンプルも参照してください。
内容を編集する: このフォーラム投稿のサンプルでは、HTML エディターでコンテンツを提供します。
カスタム ツールバーおよびボタン: このサンプルでは、HtmlEditor コントロールを電子メール クライアントとして実装します。署名をメッセージに追加するカスタム ツールバーがあります。
オンラインで表示: GitHub