Infragistics HTML Editorを使用したリッチテキスト編集(jQueryとASP.NET MVCの両方)

NetAdvantage for jQuery 11.2リリース(新しい階層グリッド、ツリー、コンボコントロール)およびMotion Frameworkを使用したCTPチャートに導入されたすべてのエキサイティングな機能に加えて、一部のコントロールがスポットライトを浴びなかったのは当然のことです。

Damyan Petev Last Updated Feb 25, 2025 9min read

ここでは、jQuery ベースの WYSIWYG 実装 HTML エディターコントロールについて話しています。WYSIWYGは「what you see is what you get」の略で(Wikipediaでそれについて読んでください)、まさにこのコントロールが提供しようとしているものです。開き山括弧と閉じ山括弧 ("<" と ">") を同等の HTML ("<"/">") に変換する。これは単なる例ですが、私のブログエディタも行っていることなので、ブラウザだけでなく、一部のサーバーは潜在的な脅威としてそのようなコンテンツをブロックします。気づいていない場合でも、この種の機能は、このブログ、コメント、フォーラムなど、ユーザー生成コンテンツがサポートされているほとんどすべての場所で提供されています。

そして今、igHtmlEditor ウィジェットなどを使用して、ユーザーにこの種の機能を提供できるようになりました。

ここで、HTMLエディターはCTP(コミュニティテクノロジープレビュー)であり、これはまだ開発のベータ段階にあることを意味します。そのため、公式リリースまでは何も決まっていませんが、それでも、試してみて、事前にコントロールを理解しない理由もありません。また、最新のサービスリリースバージョンを使用する場合もお勧めします。

はじめる

ウィジェットはjQuery UIの上に構築されているため、他のNetAdvantage for jQueryコントロールと同様に、最初にjQuery、次にjQuery UIをページに追加する必要があります。ただし、igHtmlEditor のスクリプトは、デフォルトの "ig.ui.min.js" ファイルではなく、独自の "ig.ui.htmleditor.min.js" ファイルに含まれています。後者は、実際にはjQueryのスクリプトファイルの後に含める必要がある唯一のスクリプトファイルです。

デフォルトのスタイルは、すでにお馴染みかもしれませんが、必須です。もう一度、必要なリソースを見つけて管理する方法を正確に読むことができる展開ガイドを確認することをお勧めします。

もちろん、参照用に使用できるコードの組み合わせを提供します (デフォルトで 'Scripts' フォルダと 'themes' フォルダがあると仮定します) そして、igHtmlEditor をページに追加するのは、コンテナとしての HTML DIV 要素と、JavaScript でウィジェットの新しいインスタンスを作成するためのスクリプト行であり、ASP.NET MVCでも同じくらい簡単です。両方のコードスニペットを組み合わせます。

<!-- ## Javascript/HTML ## -->
    <!-- CSS -->
    <link href="../../themes/min/ig/jquery.ui.custom.min.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/base/ig.ui.min.css")" rel="stylesheet" type="text/css" />
    <!-- Scripts -->
    <script src="../Scripts/jquery.min.js"></script>
    <script src="../Scripts/jquery-ui.min.js"></script>
    <script src="../Scripts/ig.ui.htmleditor.min.js"></script>
    <!-- in the body of the document: -->
    <div id="HtmlEditor1"></div>
    <!-- initialize the editor on document ready: -->
    <script type="text/javascript">
        $(document).ready(function () {
            $("#HtmlEditor1").igHtmlEditor();
        });
    </script>
 
<!--## ASP.NET MVC  ##-->
    <!-- CSS -->
    <link href="@Url.Content("~/Content/themes/min/ig/jquery.ui.custom.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/ig.ui.min.css")" rel="stylesheet" type="text/css" />
    <!-- Scripts -->
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/ig.ui.htmleditor.min.js")" type="text/javascript"></script>
    <!-- in your View: -->
    @using Infragistics.Web.Mvc
    @( Html.Infragistics().HtmlEditor().Render()
    )

機能、機能、機能!

まだ完成していませんが、jQuery Html Editor ウィジェットには印象的な機能が備わっています。現在の実装では、ほとんどすべてが追加のカスタマイズを必要とせずに提供されるため、開発者の観点からは、設定する必要があるものはそれほど多くなく、ユーザーは常に一握りのものを手に入れることができます。ユーザーがアクセスできるほとんどすべてのものは、上部のツールバー領域にあり、オプションは関連するセットにきちんとグループ化されています。

最良の部分は、それらの中には、ほとんどすべてのユーザーがすぐに認識し、快適に使用できるリッチテキストフォーマット用のツールがあることです。視覚的なデモンストレーションの後にのみ認識される 1 つの包括的な編集エクスペリエンス:

スクリーンショットのすべて(まあ、このページに収まるように変更したコントロールの幅を除く)は、ウィジェットがデフォルトで作成するとおりです–フォントとサイズ、太字と斜体、下線と取り消し線、テキスト配置オプション、リストと箇条書き、インデントコントロールなど。上部のツールとは別に、コントロールには現在の完全なDOMパスも便利に表示され、ユーザーは各 DOM ツリー要素をクリックして、編集領域でその内容を強調表示できます。これは、ユーザーが自分の入力が舞台裏でどのように処理されているかを認識する必要がある場合には非常に便利ですが、それだけでは不十分な場合、ウィジェットはボタンをクリックするだけでデフォルトの「デザイン」ビューとソースビューを切り替える機能を提供します。

これは、前のスクリーンショットで示されたフォントのソースであり、コンテナーにスタイルとして適用されていることも確認できます。

さらに、コピーされたテキストもあり、これはエディターがすべての一般的な操作(切り取り、コピー、貼り付け)のクリップボードサポートが付属していることを示すためにありました。また、編集領域内にはさまざまなテキストスタイルが保持されているだけでなく、実際にリッチテキストを貼り付けても、そのフォーマットは元の表示のままです。Webページからコピーしてエディターに貼り付けることは非常にうまくいきますが、すべてがHTMLベースであることを考えると、それはそれほど印象的ではないようです。あなたが本当にできることは MS Wordからコピーする、はい、できます、そしてそれはそのように見えます:

さらに、ユーザーは、コンテンツを貼り付ける以外に、コンテンツを挿入する簡単な方法が提供されます。ツールバーには、画像とリンクの両方を挿入するためのダイアログがあります。

もう 1 つ使用可能なダイアログがあり、ユーザーはほとんどまたはまったく手間をかけずに HTML テーブル要素を追加し、ポインタを目的のサイズにドラッグして自然な方法で列と行の数を定義できます。

ツールバーには、ワンクリックで新しい行や列を削除または追加するためのボタンもあります。

カスタマイズ

開発者の視点から設定する必要はあまりないと言っても、ウィジェットをニーズに合わせてカスタマイズできないわけではありません。コントロールを設定するときに、ユーザーに表示するツールバー項目を定義できます。デフォルトはもちろん "all" ですが、activeToolbars プロパティを使用すると、ツールバーのカスタムセットを定義できます。このプロパティは、使用するツールバーの名前を含む 1 つの文字列を受け取り、デフォルトのもののリストを次に示します。

fontProperties
textFormat
textAlign
textIndent
テーブル
source

しかし、確かにあなたはだまされていません、これはカスタマイズが止まるところです-もちろん、独自のツールバーを追加するオプションがあります。すべてのツールバーには、ボタン要素とコンボ要素 (igButton と igCombo) が含まれており、カスタムツールバーにアイテムとして追加できます。igButton はjQuery UI ボタンのスタイルバージョンであり、igCombo はNetAdvantage for jQuery製品の一部です。

たとえば、Infragisticsのホームページにリンクするボタンをツールバーに追加し、それに素敵なロゴを追加しました。以下は、JavaScriptとASP.NET MVC 3の両方でチェーンとRazor構文を使用してアクティブなものを設定するとともに、独自のものを「toolbars」プロパティに追加するスニペットです。

<!-- ## In Javascript ## -->
<script type="text/javascript">
    $(document).ready(function () {
        $("#HtmlEditor1").igHtmlEditor({
            width: '750',
            toolbars: [
            {
                name: 'custom',
                items: [
                {
                    type: 'igButton', link: { href: 'http://www.infragistics.com', target: '_blank' }
                }]
            }],
            activeToolbars: 'fontProperties textFormat textIndent source custom'
        });
    });
</script>
 
<!-- ## In ASP.NET MVC ## -->
@( Html.Infragistics().HtmlEditor()
            .Width("750")
            .Toolbars(toolbars =>
                {
                    toolbars.AddToolbar().Name("custom").Items(items =>
                        {
                            items.AddIgButtonItem()
                                .Link(link =>
                                {
                                    link.Href("http://www.infragistics.com").Target("_blank");
                                });
                        });
                })
            .ActiveToolbars("fontProperties textFormat textIndent source custom")
            .Render()
)

デフォルトのアクティブツールバーは「all」であるため、自動的に追加されますが、もちろん、上記のように名前を付けて使用するリストに追加することもできます。また、まったく同じ方法を使用して、igCombo またはボタンを追加することもできます。上記のコードの結果は次のようになります (最後のボタンはカスタムツールバーの追加であり、クリックすると Infragistics のホームページが新しいタブ/ウィンドウで開きます)。

結論

jQuery HTMLエディタは、純粋なクライアント側のスクリプトによって駆動されるリッチテキストフォーマットを提供し、使い慣れた機能とかなり本能的な機能の組み合わせを提供するコースを設定しており、最終的な目標は、ユーザーに素晴らしいエクスペリエンスと包括的なツールセットを提供することです。また、独自のツールセットを作成してツールバーに追加できるということは、このコントロールを好きなだけカスタマイズできることを意味します。そして、それが期待されるように、それはjQuery Themerollerでスタイルを設定することができ、あなたは同様に上にリンクされたデプロイメントガイドでその手順を見つけることができます。

あなたは、jQueryのオンラインサンプルのためのNetAdvantageを訪問することができ、また、RazorとjQueryのみの実装の両方を含む APS.NET MVC3プロジェクトを含むこのブログのデモプロジェクトをダウンロードすることができます。

jQueryの操作方法