JavaScript入力コントロール「InputManJS」に待望のリッチテキストエディタが登場！ Webフォームで差を付けよう
軽量で多機能なJavaScript入力コントロール「InputManJS」の紹介
ダウンロード サンプルファイル (183.8 KB)
リッチテキストエディタに機能を追加するさまざまなプラグイン
InputManJSのリッチテキストエディタでは、さまざまなプラグインで機能を拡張できます。以下ではそれらのプラグインをいくつか紹介していきます。
表を追加・編集するテーブルプラグイン
テーブルプラグインを利用すると、リッチテキストエディタで表を追加・編集できるようになります（図5）。
図5の通り動作させるには、index.jsでリスト6の通り設定します。pluginsにテーブルプラグインを指定して、contextmenuには表を操作するメニュー項目を追加します。
{
plugins: [
GC.InputMan.GcRichTextEditorPluginItem.Table // 表のプラグイン
],
contextmenu: [
GC.InputMan.GcRichTextEditorMenuItem.InsertTable, // 表を挿入
GC.InputMan.GcRichTextEditorMenuItem.Table, // 既存の表の編集
]
}
箇条書き・段落番号を追加できるリストプラグイン
箇条書き・段落番号を文書に追加できる機能も、リッチテキストエディタのリストプラグインで提供されます（図6）。
index.jsのオプション設定はリスト7の通りです。（1）だけでは箇条書き・段落番号の形式を設定できませんが、（2）を追加することで設定できるようになります。
{
plugins: [
GC.InputMan.GcRichTextEditorPluginItem.Lists, // リスト ...（1）
GC.InputMan.GcRichTextEditorPluginItem.AdvList // 高度なリスト要素 ...（2）
],
toolbar: [
GC.InputMan.GcRichTextEditorToolbarItem.BulList, // 箇条書き
GC.InputMan.GcRichTextEditorToolbarItem.NumList // 段落番号
]
}
HTMLコードを表示・編集するHTMLコード編集プラグイン
リッチテキストエディタで入力した内容のHTMLコードを表示・編集する機能を、HTMLコード編集プラグインで追加できます（図7）。
index.jsのオプション設定はリスト8の通りです。plugins、toolbar、contextmenu各項目にHTMLコード編集機能を設定します。
{
plugins:[GC.InputMan.GcRichTextEditorPluginItem.HTMLCode],
toolbar: [GC.InputMan.GcRichTextEditorToolbarItem.HTMLCode],
contextmenu:[GC.InputMan.GcRichTextEditorMenuItem.HTMLCode]
}
検索・置換機能を追加できる検索と置換プラグイン
検索と置換プラグインを利用すると、リッチテキストエディタで入力した内容の文字数に対して検索や置換を実行できます（図8）。
index.jsのオプション設定はリスト9の通りです。
{
plugins: [GC.InputMan.GcRichTextEditorPluginItem.SearchReplace],
toolbar: [GC.InputMan.GcRichTextEditorToolbarItem.SearchReplace],
contextmenu: [GC.InputMan.GcRichTextEditorMenuItem.SearchReplace]
}
直前の入力内容を復元できるオートセーブプラグイン
リッチテキストエディタに入力中にWebページをリロードしてしまって入力内容が消えても、オートセーブプラグインの機能で直前の入力内容を復元できます（図9）。
index.jsのオプション設定はリスト10の通りです。toolbarとcontextmenuに指定したRestoreDraftは「前回の下書きを回復」に対応します。
{
plugins:[GC.InputMan.GcRichTextEditorPluginItem.AutoSave],
toolbar: [GC.InputMan.GcRichTextEditorToolbarItem.RestoreDraft],
contextmenu:[GC.InputMan.GcRichTextEditorMenuItem.RestoreDraft]
}
この記事は参考になりましたか？
- ComponentZine（InputMan）連載記事一覧
-
- JavaScript入力コントロール「InputManJS」に待望のリッチテキストエディタ...
- JavaScript入力コントロール「InputManJS」にBootstrapを組み合わ...
- 便利な入力部品が多数追加！ JavaScript入力コントロール「InputManJS」最...
- この記事の著者
-
WINGSプロジェクト 吉川 英一（ヨシカワ エイイチ）
＜WINGSプロジェクトについて＞有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）。主にWeb開発分野の書籍／記事執筆、翻訳、講演等を幅広く手がける。 2026年時点での登録メンバは約50名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書、記事多数。 RSS X: @WingsPro_info（公式）、@WingsPro_info/wings（メンバーリスト） Facebook
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
-
山田 祥寛（ヤマダ ヨシヒロ）
静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ（Java・C#・Python・PHP・Ruby・JSP＆サーブレットなど）」「速習シリーズ（ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど）」「改訂3版JavaScript本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数。
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
提供：グレープシティ株式会社
【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社
この記事は参考になりましたか？
この記事をシェア
