SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ComponentZine(InputMan)(AD)

JavaScript入力コントロール「InputManJS」に待望のリッチテキストエディタが登場! Webフォームで差を付けよう

軽量で多機能なJavaScript入力コントロール「InputManJS」の紹介

  • X ポスト
  • このエントリーをはてなブックマークに追加

リッチテキストエディタに機能を追加するさまざまなプラグイン

 InputManJSのリッチテキストエディタでは、さまざまなプラグインで機能を拡張できます。以下ではそれらのプラグインをいくつか紹介していきます。

表を追加・編集するテーブルプラグイン

 テーブルプラグインを利用すると、リッチテキストエディタで表を追加・編集できるようになります(図5)。

図5 テーブルプラグインのサンプル(p005-table)
図5 テーブルプラグインのサンプル(p005-table)

 図5の通り動作させるには、index.jsでリスト6の通り設定します。pluginsにテーブルプラグインを指定して、contextmenuには表を操作するメニュー項目を追加します。

[リスト6]テーブルプラグインのオプション設定(p005-table/index.js)
{
  plugins: [
    GC.InputMan.GcRichTextEditorPluginItem.Table      // 表のプラグイン
  ],
  contextmenu: [
    GC.InputMan.GcRichTextEditorMenuItem.InsertTable, // 表を挿入
    GC.InputMan.GcRichTextEditorMenuItem.Table,       // 既存の表の編集
  ]
}

箇条書き・段落番号を追加できるリストプラグイン

 箇条書き・段落番号を文書に追加できる機能も、リッチテキストエディタのリストプラグインで提供されます(図6)。

図6 リストプラグインのサンプル(p006-list)
図6 リストプラグインのサンプル(p006-list)

 index.jsのオプション設定はリスト7の通りです。(1)だけでは箇条書き・段落番号の形式を設定できませんが、(2)を追加することで設定できるようになります。

[リスト7]リストプラグインのオプション設定(p006-list/index.js)
{
  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)。

図7 HTMLコード編集プラグインのサンプル(p007-html)
図7 HTMLコード編集プラグインのサンプル(p007-html)

 index.jsのオプション設定はリスト8の通りです。plugins、toolbar、contextmenu各項目にHTMLコード編集機能を設定します。

[リスト8]HTMLコード編集プラグインのオプション設定(p007-html/index.js)
{
  plugins:[GC.InputMan.GcRichTextEditorPluginItem.HTMLCode],
  toolbar: [GC.InputMan.GcRichTextEditorToolbarItem.HTMLCode],
  contextmenu:[GC.InputMan.GcRichTextEditorMenuItem.HTMLCode]
}

検索・置換機能を追加できる検索と置換プラグイン

 検索と置換プラグインを利用すると、リッチテキストエディタで入力した内容の文字数に対して検索や置換を実行できます(図8)。

図8 検索と置換プラグインのサンプル(p008-searchreplace)
図8 検索と置換プラグインのサンプル(p008-searchreplace)

 index.jsのオプション設定はリスト9の通りです。

[リスト9]検索と置換プラグインのオプション設定(p008-searchreplace/index.js)
{
  plugins: [GC.InputMan.GcRichTextEditorPluginItem.SearchReplace],
  toolbar: [GC.InputMan.GcRichTextEditorToolbarItem.SearchReplace],
  contextmenu: [GC.InputMan.GcRichTextEditorMenuItem.SearchReplace]
}

直前の入力内容を復元できるオートセーブプラグイン

 リッチテキストエディタに入力中にWebページをリロードしてしまって入力内容が消えても、オートセーブプラグインの機能で直前の入力内容を復元できます(図9)。

図9 オートセーブプラグインのサンプル(p009-autosave)
図9 オートセーブプラグインのサンプル(p009-autosave)

 index.jsのオプション設定はリスト10の通りです。toolbarとcontextmenuに指定したRestoreDraftは「前回の下書きを回復」に対応します。

[リスト10]オートセーブプラグインのオプション設定(p009-autosave/index.js)
{
  plugins:[GC.InputMan.GcRichTextEditorPluginItem.AutoSave],
  toolbar: [GC.InputMan.GcRichTextEditorToolbarItem.RestoreDraft],
  contextmenu:[GC.InputMan.GcRichTextEditorMenuItem.RestoreDraft]
}

次のページ
実用例:リッチテキストエディタを利用した作業日報の入力フォーム

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
ComponentZine(InputMan)連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 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本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

提供:グレープシティ株式会社

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/18233 2023/09/27 12:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング