柔軟なデザインと快適な書き心地を両立した、従来のリッチテキストエディタに代わるテキストフィールドです。
あらかじめ定義した書式をエディターUIで簡単に呼び出すことが可能です。

フレキシブルテキストの使い方

フレキシブルテキストの初期表示は下記の通り、標準書式のブロックが用意されています。

ブロック内が空文字の状態または、文字の終端にカーソルがある状態で Enterボタンを2回押すと、その下に新たなブロックが追加されます。

ブロック内の文字の途中でEnterボタンを押すと、ブロック内で改行されます。

ブロック内で改行した後、さらにEnterボタンを押すと改行した文字と分離して新たなブロックが追加されます。

ブロックの左にある[標準]をクリックするとブロック要素（選択した段落の書式変更）が表示され、書式を選択できます。

入力した文字を選択するとツールバーが出てくるので、インライン要素（選択した文字の書式変更）の適応ができます。
※下記の例は、強調のインライン要素を適応

ブロックの右側にあるアイコンボタンで、ブロックの削除・複製ができます。

複製の下にある矢印アイコンでは、対象ブロックを一つ上、もしくは一つ下に移動できます。

フレキシブルテキストビルダーの設定

フレキシブルテキストの編集UIでは、事前の設定により必要な要素だけをそれぞれ最適な位置に配置できます。
カスタマイズするには、モデル編集画面からフレキシブルテキストの「編集」を押し、詳細画面下部にある[ビルダーを開く]を選択します。

フレキシブルテキストビルダーのエリア

フレキシブルビルダーの画面は主に４つのエリアに分かれています。

• 要素エリア
  
  • ツールバーをカスタマイズするための要素が配置されています。

• ツールバーエリア
  
  • 要素をドラッグ＆ドロップすることでツールバーをカスタマイズできます。

• プレビューエリア
  
  • 詳細設定した要素のプレビューがされます。

• 詳細設定エリア
  
  • 要素の詳細設定ができます。

-要素名
-要素アイコン
-HTMLタグ
-HTMLクラス
-フォント
-文字色
-背景色
-枠の色

ツールバーのカスタマイズ

デフォルトツールバーのハコの中に、追加したい要素をドラッグ＆ドロップすることでツールバーをカスタマイズできます。
また、すでに要素が入っている上からドロップすると入れ替えることができます。色がついている要素（埋め込み要素、ネスト要素等）の下には同じ色の要素しか追加できません。

縦に並べた要素はツールバーでグループとして表示されます。
一番上の要素が親となり、デフォルトとしてツールバーに表示されます。

要素のアイコン設定

NILTOでは「fontawesome」を導入しており、要素を組み替えるだけではなく好きなアイコンを設定して自分だけのツールバーを作ることができます。

変更したい要素をクリックすると、詳細設定エリアが対象の要素に切り替わりますので、要素名の隣の[ アイコンマーク ]を押します。

アイコン設定のダイアログが表示されます。アイコンは16000種類以上ありますので、お好きなものを設定してください。

ダイアログでアイコンを選択すると、ツールバーの中のアイコンに即時反映されます。

ネスト要素の設定

ネスト要素とは、別デザインの領域を適用したツールバーを作成できる要素です。
「ネスト」をデフォルトツールバーに設定します。

デフォルトツールバーにネスト要素が設定されると、画面下部に「ネスト要素専用のツールバー」が表示されます。

プレビューについて

カスタマイズされたツールバーをその場で試すことができます。
ブロック要素・埋め込み要素は、ツールバーではなく編集画面左側に表示されるタグラベルにのみ出現します。

テキストスタイルについて

現状のカスタマイズされたツールバーの各エレメントがどのような効果があるかを確認することができます。

ツールバーについて

テキストをドラッグして選択状態にするとツールバーが表示されます。ツールバーはフレキシブルテキストビルダーでカスタマイズされたものが適応されています。

また、複数の段落を跨いで選択した場合は、ツールバーが表示されません。

ツールメニューについて

ツールメニューとは、ブロック要素（選択した段落の書式変更）を適用する際に利用するメニューです。
フレキシブルテキストのアクティブになっている段落の左端にある「標準」を押します。

ツールメニューが展開され、段落ごとに要素を適応することができます。

ネスト要素の利用方法

フレキシブルテキストでネストを使うには、「ツールメニュー」から使用します。

ネストを追加するとネスト用のエリアが配置されます。
この中では先程フレキシブルテキストビルダーで設定したネスト専用のツールバーが使用できます。