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

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

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

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

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

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

ブロックの左にある[標準]にマウスをホバーするとブロック要素が表示され、書式を選択できます。

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

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

フレキシブルテキストビルダーについて

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

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

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

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

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

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

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

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

ツールバーをカスタマイズする

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

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

要素のアイコンについて

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

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

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

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

ネスト要素について

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

「ネスト」をデフォルトツールバーに設定します。

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

プレビューについて

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

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

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

ツールバーについて

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

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

段落がアクティブ状態の時に、右端に「削除」と「複製」のアイコンが表示されます。
「削除」を押すと今の段落が削除されます。

「複製」を押すと今の段落が複製されます。

タグラベルについて

タグラベルとは、フレキシブルテキストのアクティブになっている段落の左端にある「標準」を押します。

タグラベルが縦に展開され、段落ごとに要素を適応することができます。

ネストについて

フレキシブルテキストでネストを使うには、「タグラベル」から使用します。

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

またネストはビルダー内で個別に背景色や文字色を設定できるため、例えば同じH1でもここだけは色を変えたいという時に使うことができます。