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

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

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

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

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

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

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

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

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

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

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

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

注意点としては、

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

要素のアイコンについて

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

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

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

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

ネスト要素について

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

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

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

プレビューについて

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

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

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

フレキシブルテキストエディター

ツールバーについて

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

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

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

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

タグラベルについて

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

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

ネストについて

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

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

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