日本仕様の入力用JavaScriptコントロールセット「InputManJS（インプットマンJS）」の「V4.1J」ではリッチテキストエディタコントロール（GcRichTextEditor）でも多くの機能が追加または強化されています。
本記事では、InputManJSに含まれているGcRichTextEditorコントロールの「V4.1J」で強化された機能の活用方法を解説します。
GcRichTextEditorコントロールの使用
最初に、既定状態のGcRichTextEditorコントロールを作成する手順について説明します。
GcRichTextEditorコントロールの基本的な利用方法について、以下の記事でも解説していますので、ぜひそちらもご一読いただければと思います。
開発環境
今回は開発環境として以下を使用します。
事前準備
今回は以下の3つのファイルを用意してリッチテキストエディタコントロールの使い方を解説していきます。
| index.html | ページ本体。このページの要素としてリッチテキストエディタコントロールを組み込みます |
|---|---|
| app.js | リッチテキストエディタコントロールの初期化など各種設定を行うためのコードを記載します |
| styles.css | このサンプルで使用する各要素のスタイル設定を行うためのコードを |
また、GcRichTextEditorコントロールを使用するには、専用のモジュールを環境にインストールする必要があります。CDNを参照したり、npmなどから入手したりする方法もありますが、今回は環境に直接GcRichTextEditorコントロール専用モジュールを配置していきます。あらかじめInputManJSの製品版かトライアル版をご用意ください。トライアル版は以下より無償で入手可能です。
製品版、またはトライアル版をダウンロードしたら、ZIPファイルを解凍し、「richtexteditor」フォルダ内にある以下のファイルを環境にコピーします。
- css/gc.inputman.richtexteditor.css
- css/gc.inputman.richtexteditor.woff
- scripts/plugins/template/plugin.js
- scripts/gc.inputman.richtexteditor.content.css
- scripts/gc.inputman.richtexteditor.ja.js
- scripts/gc.inputman.richtexteditor.woff
コピーしたファイルはそれぞれ以下のように配置します。
モジュールの参照
まずはGcRichTextEditorコントロールを使うのに必要なライブラリの参照設定をHTMLファイルに追加します。InputManJSのモジュールのほか、GcRichTextEditorコントロールの各種処理を記載する「app.js」への参照も追加します。
※ CDNから参照する場合はコメントアウトされている部分とライブラリの参照先を入れ替えてください。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>InputManJSのリッチテキストエディタサンプル</title>
<!-- ローカルのライブラリを参照する場合 -->
<link rel="stylesheet" href="css/gc.inputman.richtexteditor.css" />
<script src="scripts/gc.inputman.richtexteditor.ja.js"></script>
<!-- CDNからライブラリを参照する場合 -->
<!--
<link rel="stylesheet" href="https://cdn.mescius.com/inputmanjs/hosted/richtexteditor/css/gc.inputman.richtexteditor.css" />
<script src="https://cdn.mescius.com/inputmanjs/hosted/richtexteditor/scripts/gc.inputman.richtexteditor.ja.js"></script>
-->
<link rel="stylesheet" href="css/style.css" />
<script src="scripts/app.js"></script>
</head>
<body>
</body>
</html>GcRichTextEditorの設定
以下の「index.html」ファイルの「id="gcRichTextEditor"」のtextareaタグにGcRichTextEditorコントロールが組み込まれます。
・・・（中略）・・・
<body>
<div class="control">
<textarea id="gcRichTextEditor"></textarea>
</div><br>
</body>
</html>
「app.js」ファイルでは、上記の「id="gcRichTextEditor"」が設定されたtextareaタグに対応したGcRichTextEditorコントロールを生成しています。また、このときにコントロールの高さと幅を設定しておきます。
※ ライセンスキーを設定しない場合トライアル版を示すメッセージが表示されます。ライセンスキーの入手や設定方法についてはこちらをご覧ください。
// ライセンスキーの設定
GC.InputMan.LicenseKey = 'ここにInputManJSのライセンスキーを設定します';
document.addEventListener('DOMContentLoaded', () => {
// GcRichTextEditorコントロールの初期設定
gcRichTextEditor = new GC.InputMan.GcRichTextEditor(
document.querySelector('#gcRichTextEditor'),
{
height: '300px',
width: '600px'
}
);
});
実行すると以下のような既定状態のGcRichTextEditorコントロールが生成されます。
文字数の制限
次の2つのプロパティを使ってGcRichTextEditorコントロールに入力できる最大文字数とその単位を設定できます。この機能については、デモの「入力の制御」でも確認できます。
| プロパティ | 説明 |
|---|---|
| maxLength | 入力可能な最大文字数 |
| lengthUnit | 最大文字数を設定するときの単位（ByteまたはTextElement） |
次のコードでは、入力可能な文字数を5文字に設定してGcRichTextEditorコントロールを生成します。
・・・（中略）・・・
// GcRichTextEditorコントロールの生成
gcRichTextEditor = new GC.InputMan.GcRichTextEditor(
document.querySelector('#gcRichTextEditor'),
{
maxLength: 5,
lengthUnit: GC.InputMan.LengthUnitType.TextElement,
height: '300px',
width: '600px'
}
);
・・・（中略）・・・上記のGcRichTextEditorコントロールに全角文字を5文字以上入力すると次のようになります。
文字種の指定
GcRichTextEditorコントロールに入力可能な文字種を指定することができます。また、入力された文字種を指定した文字種に自動的に変換することも可能です。
この機能を実現する下記のプロパティについては、デモの「文字種の制限」で詳しく解説しています。
| プロパティ | 説明 |
|---|---|
| inputFormat | 入力可能な文字種（入力書式） |
| autoConvert | 設定した文字種への自動変換の有無を指定 |
次のコードでは、半角のカタカタと半角の大文字アルファベットのみを許可し、それ以外の文字種が入力されたときには、指定されている文字種に可能な限り自動変換します。
・・・（中略）・・・
// GcRichTextEditorコントロールの生成
gcRichTextEditor = new GC.InputMan.GcRichTextEditor(
document.querySelector('#gcRichTextEditor'),
{
autoConvert: true,
inputFormat: 'AK',
height: '300px',
width: '600px'
}
);
・・・（中略）・・・上記のGcRichTextEditorコントロールで全角文字を入力すると、次のように半角カタカナと半角大文字アルファベットに自動変換されます。
タブ文字入力の許可
通常、Tabキーを押下するとフォーカスが他のコントロールへ移動しますが、GcRichTextEditorコントロールでは、その動作を停止してコントロール内の文字列にタブ文字を入力することができます。
この動作の切り替えは、acceptsTabプロパティまたはToggleAcceptsTabコマンドで行います。ToggleAcceptsTabコマンドについてはここでは触れないので、デモの「タブ文字の入力」をご一読いただければと思います。
| プロパティ | 説明 |
|---|---|
| acceptsTab | タブ文字入力の許可 |
以下のコードでは、acceptsTabプロパティを使ってタブ文字入力を許可しています。
・・・（中略）・・・
// GcRichTextEditorコントロールの生成
gcRichTextEditor = new GC.InputMan.GcRichTextEditor(
document.querySelector('#gcRichTextEditor'),
{
acceptsTab: true,
height: '300px',
width: '600px'
}
);
・・・（中略）・・・上記のGcRichTextEditorコントロールでTabキーを押下すると、文字列内のカーソル位置にタブ文字が入力されます。また、メニューで「編集」-「タブ文字を入力」のチェックを外すと、Tabキー押下によってフォーカスが他のコントロールへ移動するようになりますが、このメニューでの操作はToggleAcceptsTabコマンドが使用されています。
テンプレートの挿入
GcRichTextEditorコントロールでは、メニューの「挿入」-「テンプレートの挿入」をクリックして「テンプレートの挿入」ダイアログを表示し、そこで選択したテンプレートをGcRichTextEditorコントロール内に挿入することができます。
「V4.1J」では、これに加えてコマンドを呼び出して直接テンプレートを挿入する機能が追加されています。これによって、「テンプレートの挿入」ダイアログに代わる独自のユーザーインタフェースを実装することが可能になりました。
デモの「テンプレート」とAPIリファレンスの「IGcRichTextEditorConfigインターフェイス」では、テンプレートを使うために必要となるプラグインやテンプレートについて詳しく解説しているので、ぜひご一読ください。
テンプレートの利用に関連するプロパティは以下のとおりです。
| プロパティ | 説明 |
|---|---|
| baseUrl | プラグインを読み込むファイルパスを指定 |
| plugins | インポートするプラグインを指定 |
| templates | テンプレートプラグインで使うコンテンツのリスト |
| templateIndex | 初期状態で挿入するテンプレートのインデックス番号 |
下記のコードでは2つのテンプレートを用意して、GcRichTextEditorコントロールの生成時に最初のテンプレートが自動的に挿入されるようにtemplateIndexプロパティを「0」に設定しています。
注記：
「ボタンクリックによるテンプレートの挿入」のコードは、GcRichTextEditorコントロールのexecCommandメソッドの使用方法を示すために掲載したものです。実際の実装については、末尾のデモアプリケーションをご参照ください。
・・・（中略）・・・
// GcRichTextEditorコントロールの生成
gcRichTextEditor = new GC.InputMan.GcRichTextEditor(
document.querySelector('#gcRichTextEditor'),
{
baseUrl: window.location.origin + "/scripts",
plugins: [GC.InputMan.GcRichTextEditorPluginItem.Template],
templates: [
{
title: "あいさつ１",
description: "冒頭のあいさつ",
content: template1
},
{
title: "署名１",
description: "末尾の署名",
content: template2
}
],
templateIndex: 0, // テンプレートの挿入
height: '300px',
width: '600px'
}
);
// ボタンクリックによるテンプレートの挿入
document.querySelector('#performCommand').addEventListener('click', () => {
const radios = document.querySelectorAll(".template");
radios.forEach(radio => {
if (radio.checked) {
gcRichTextEditor.execCommand(
GC.InputMan.GcRichTextEditorCommand.Template,
radio.value
);
}
});
});
・・・（中略）・・・次の動画は、テンプレートを設定してexecCommandメソッドを使ってGcRichTextEditorコントロールに挿入する例を示しています。
今回ご紹介したGcRichTextEditorの各機能は以下のデモアプリケーションでも確認できます（“Run Project”をクリックするとデモが起動します）。
さいごに
今回はInputManJS V4.1Jで強化されたリッチテキストエディタコントロールの各種機能について解説しました。
InputManJSは、リッチテキスト、テキスト、マスク、日付時刻、数値、コンボなど用途別に最適化された入力用コントロールを収録したJavaScript製品です。Webアプリケーションにおけるストレスフリーのきめ細かい入力フォームの開発に、ぜひInputManJSをご検討いただければと思います。
製品サイトでは、InputManJSの機能を手軽に体験できるデモアプリケーションやトライアル版も公開しておりますので、こちらもご確認ください。
また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。