richtextbox
コンポーネント情報 | |
---|---|
モジュール | im_ui |
導入されたバージョン | 8.0.3 |
バージョン | 8.0.31 |
機能説明
- リッチテキストボックスを作成します
- このページは8.0.19以降のバージョンの情報です。
- 入力されたリッチテキストからタグを取り除いたテキストを内部的に保持します
- richtextboxに指定したid, name属性値を{id}, {name}とする場合、id=“{id}_plain” name=“{name}_plain”属性をもつ隠しテキストエリアに保持します
- richtextboxが利用している TinyMCEのバージョンは以下になります。
モジュール | TinyMCE |
---|---|
8.0.19以降 | 4.7.4 |
- 注意事項
- 本タグで作成したデータを参照画面で表示する際には、以下の現象を防ぐために readonly 属性を利用してください
- リスト(ulタグ)の list-style-type が表示されない
- リスト(ulタグ/olタグ下のliタグ)配置場所が、編集画面と異なる
- h1~h6 の文字サイズが編集画面と異なる
- decoration 属性は toolbar1~toolbar5 属性、または、themeAdvancedButtons1~themeAdvancedButtons5 属性が未指定の場合にのみ有効です
- インデント、アウトデントを行う場合、Shift+Enter等によりpタグで囲まれた中で行ってください
- プレーンテキストは単純にリッチテキストからタグを取り除いただけであるため、元の構造とは違った見栄えになる可能性があります(テーブル等)
- また、文字実体参照については「 」「&」「"」「<」「>」のみがプレーン化対象です
- リッチテキストボックスに入力されるデータのエンコードタイプを変更するには、<conf/ui-tag-config/ui-tag-config_imui-richtextbox.xml> ファイルを編集してください
- 本設定の変更はすべてのリッチテキストボックスに適用されます
- 本設定を変更をするとリッチテキストボックスを利用している各画面で正しい挙動をしない可能性があります
- タグ名は「imuiRichtextbox」にし、「entity_encoding」をパラメータ名として、パラメータ値を設定してください
- エンコードタイプについてはTinyMCEのドキュメントを参照してください
- エンコードタイプは「raw」の設定でのみ検証をしています。それ以外の設定については動作保証しません
- readonly 属性 true 指定時に、リンクをクリックをした際の挙動がバージョン毎で異なります
- Ver.8.0.19以降は、forcedRootBlock の初期値を p に変更しました
- Ver.8.0.31以降は、脆弱性が存在するプラグイン「paste」、「visualchars」を利用禁止にしました
- 利用禁止したプラグインが提供していたリッチテキストボックスの機能は動作しません
- 利用禁止したプラグインを再利用したい場合は、設定ファイル<conf/ui-tag-config/ui-tag-config_imui-richtextbox-decoration.xml> を編集してください
- 設定ファイルの詳細は、下記の デフォルトのプラグイン、利用禁止のプラグインなどの設定 を参照してください
- 本タグで作成したデータを参照画面で表示する際には、以下の現象を防ぐために readonly 属性を利用してください
- 制限事項
- dialog 内で richtextbox は利用できません
- Google Chrome にて、richtextbox の編集画面、プレビュー画面で日本語フォントは MS Pゴシックで表示されます
- Internet Explorer 11 では、forcedRootBlock 属性に空文字を指定していても、先頭に p タグが埋め込まれる場合があります
- 一度文字を入力したあとに全ての文字を削除すると、p タグが埋め込まれます
- richtextbox に登録した画像がストレージに残る場合があります。
- richtextbox 内のイメージタグを削除した場合
- アップロード後に richtextbox の内容を保存しなかった場合
- imuiDataUrl で生成した画像に透過情報が欠落する場合があります
- ファイル圧縮時に jpeg に変換することで画像の透過情報が失われます
- 「左寄せ」、「右寄せ」、「中央寄せ」が正常に動作しない場合があります。以下の条件で発生することを確認しています。この挙動は TinyMCE の動作に準拠しています
- img タグとテキストノードをどちらも選択状態にし、プラグインを実行した場合。以下のような html です。例) <img src="csjs/libs/tinymce/js/tinymce/plugins/emoticons/img/smiley-cool.gif" alt="cool" />sample
- プラグインlegacyoutputを利用する場合、フォントファミリーとフォントサイズの表示が変わります
- 指定した場合
- フォントファミリーのセレクトボックスに「フォントファミリー」と表示されます
- フォントサイズのセレクトボックスに「フォントサイズ」と表示されます
- フォントサイズの選択肢の単位が「pt」です
- 指定していない場合
- フォントファミリーのセレクトボックスに「Arial」のようにテキストエリア内のフォントファミリーが表示されます
- フォントサイズのセレクトボックスに「12px」のようにテキストエリア内のフォントサイズが表示されます
- 指定した場合
属性一覧
注釈 | 属性名 | 型 | 説明 | 省略時の動作 | 実行時評価 | ||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
decoration |
String | 装飾種別を指定します simple/full/menuのいずれかの値を指定できます simple/full/menu時に読み込まれるボタン/コントロール、およびプラグインについてはツールバー、メニューバーおよびプラグインを参照してください toolbar1~toolbar5、または、themeAdvancedButtons1~themeAdvancedButtons5のいずれかの属性が指定されている場合、本属性は無視されます |
full | ||||||||||
Boolean属性 | forceBrNewlines |
Boolean | 本属性は Ver.8.0.12 で廃止されました 代替として forcedRootBlock に ""(空文字) を指定してください |
- | |||||||||
非推奨
Boolean属性
|
forcePNewlines |
Boolean | 本属性の利用は非推奨とします 代替として forcedRootBlock に “p” を指定してください TinyMCE初期化時の、force_p_newlinesオプションを指定します。 本属性の動作はTinyMCEのforce_p_newlines設定時の動作と同じになることしか保証をしません 詳細についてはTinyMCEのドキュメントを参照してください |
- | |||||||||
無害化 | forcedRootBlock |
String | 非ブロック要素やテキストノードを指定した要素で囲みます 本属性の動作はTinyMCEのforced_root_block設定時の動作と同じになることしか保証をしません 詳細についてはTinyMCEのドキュメントを参照してください |
p | |||||||||
無害化 | height |
String | リッチテキストボックスの縦幅を指定します | - | |||||||||
id |
String | リッチテキストボックスのidです | 代替idを付与 | ||||||||||
name |
String | リッチテキストボックスのnameです | 代替nameを付与 | ||||||||||
Boolean属性 | noBorder |
Boolean | 枠線を表示しないスタイルを指定します。 readonly属性と併せて利用してください。 |
false | |||||||||
plainParameter |
String | リッチテキストボックスの初期化時に追加で渡したいオプションを指定します 本属性に渡したオプションは無害化されずそのまま出力されます |
- | ||||||||||
無害化 | plugins |
String | リッチテキストボックスのプラグインをカンマ区切りで指定します 本属性を指定しない場合、toolbar1~toolbar5、または、themeAdvancedButtons1~themeAdvancedButtons5までに指定された値を元に必要なプラグインを自動で設定します imuiRichtextboxでは以下のプラグインを同梱していますが、弊社では動作検証を行っておりませんので、ご理解の上ご利用ください
詳細についてはプラグイン、およびTinyMCEのドキュメントを参照してください (※1) Ver.8.0.31以降は、脆弱性が存在するプラグイン「paste」、「visualchars」を利用禁止にしました 詳細については、注意事項を参考してください |
- | |||||||||
無害化 | pluginsOption |
Map<String, Object> | plugins属性で指定したプラグインのオプションを指定します pluginsOptionで指定可能なオプションは下記の通りです
|
- | |||||||||
Boolean属性 | readonly |
Boolean | 参照用のスタイルを指定します | false | |||||||||
Boolean属性 | resizable |
Boolean | リッチテキストボックスのサイズ変更を許可するかどうかを指定します 縦方向のみリサイズを許可したい場合は、plainParameter属性を利用し、 plainParameter="resize:true" としてください |
true | |||||||||
非推奨
無害化
|
themeAdvancedButtons1 |
String | 本属性の利用は非推奨です 代替としてtoolbar1属性を利用してください ツールバーの1行目に表示するボタン/コントロールのリストをカンマ区切りで指定します TinyMCEのバージョンアップに伴い廃止されたボタン/コントロールについて、類似機能があるものについては自動で置き換えを行います 対応表はthemeAdvancedButtons1~themeAdvancedButtons5属性の置換対応表を参照してください 本属性の動作はTinyMCEのtoolbar1設定時の動作と同じになることしか保証をしません 指定可能なボタン/コントロール名などの詳細についてはツールバーを参照してください |
- | |||||||||
非推奨
無害化
|
themeAdvancedButtons2 |
String | 本属性の利用は非推奨です 代替としてtoolbar2属性を利用してください ツールバーの2行目に表示するボタン/コントロールのリストをカンマ区切りで指定します TinyMCEのバージョンアップに伴い廃止されたボタン/コントロールについて、類似機能があるものについては自動で置き換えを行います 対応表はthemeAdvancedButtons1~themeAdvancedButtons5属性の置換対応表を参照してください 本属性の動作はTinyMCEのtoolbar2設定時の動作と同じになることしか保証をしません 指定可能なボタン/コントロール名などの詳細についてはツールバーを参照してください |
- | |||||||||
非推奨
無害化
|
themeAdvancedButtons3 |
String | 本属性の利用は非推奨です 代替としてtoolbar3属性を利用してください ツールバーの3行目に表示するボタン/コントロールのリストをカンマ区切りで指定します TinyMCEのバージョンアップに伴い廃止されたボタン/コントロールについて、類似機能があるものについては自動で置き換えを行います 対応表はthemeAdvancedButtons1~themeAdvancedButtons5属性の置換対応表を参照してください 本属性の動作はTinyMCEのtoolbar3設定時の動作と同じになることしか保証をしません 指定可能なボタン/コントロール名などの詳細についてはツールバーを参照してください |
- | |||||||||
非推奨
無害化
|
themeAdvancedButtons4 |
String | 本属性の利用は非推奨です 代替としてtoolbar4属性を利用してください ツールバーの4行目に表示するボタン/コントロールのリストをカンマ区切りで指定します TinyMCEのバージョンアップに伴い廃止されたボタン/コントロールについて、類似機能があるものについては自動で置き換えを行います 対応表はthemeAdvancedButtons1~themeAdvancedButtons5属性の置換対応表を参照してください 本属性の動作はTinyMCEのtoolbar4設定時の動作と同じになることしか保証をしません 指定可能なボタン/コントロール名などの詳細についてはツールバーを参照してください |
- | |||||||||
非推奨
無害化
|
themeAdvancedButtons5 |
String | 本属性の利用は非推奨です 代替としてtoolbar5属性を利用してください ツールバーの5行目に表示するボタン/コントロールのリストをカンマ区切りで指定します TinyMCEのバージョンアップに伴い廃止されたボタン/コントロールについて、類似機能があるものについては自動で置き換えを行います 対応表はthemeAdvancedButtons1~themeAdvancedButtons5属性の置換対応表を参照してください 本属性の動作はTinyMCEのtoolbar5設定時の動作と同じになることしか保証をしません 指定可能なボタン/コントロール名などの詳細についてはツールバーを参照してください |
- | |||||||||
themeAdvancedToolbarAlign |
String | 本属性はVer.8.0.12で廃止されました | - | ||||||||||
themeAdvancedToolbarLocation |
String | 本属性はVer.8.0.12で廃止されました | - | ||||||||||
無害化 | toolbar1 |
String | ツールバーの1行目に表示するボタン/コントロールのリストをカンマ区切りで指定します 本属性の動作はTinyMCEのtoolbar1設定時の動作と同じになることしか保証をしません 指定可能なボタン/コントロール名などの詳細についてはツールバーを参照してください |
- | |||||||||
無害化 | toolbar2 |
String | ツールバーの2行目に表示するボタン/コントロールのリストをカンマ区切りで指定します 本属性の動作はTinyMCEのtoolbar2設定時の動作と同じになることしか保証をしません 指定可能なボタン/コントロール名などの詳細についてはツールバーを参照してください |
- | |||||||||
無害化 | toolbar3 |
String | ツールバーの3行目に表示するボタン/コントロールのリストをカンマ区切りで指定します 本属性の動作はTinyMCEのtoolbar3設定時の動作と同じになることしか保証をしません 指定可能なボタン/コントロール名などの詳細についてはツールバーを参照してください |
- | |||||||||
無害化 | toolbar4 |
String | ツールバーの4行目に表示するボタン/コントロールのリストをカンマ区切りで指定します 本属性の動作はTinyMCEのtoolbar4設定時の動作と同じになることしか保証をしません 指定可能なボタン/コントロール名などの詳細についてはツールバーを参照してください |
- | |||||||||
無害化 | toolbar5 |
String | ツールバーの5行目に表示するボタン/コントロールのリストをカンマ区切りで指定します 本属性の動作はTinyMCEのtoolbar5設定時の動作と同じになることしか保証をしません 指定可能なボタン/コントロール名などの詳細についてはツールバーを参照してください |
- | |||||||||
toolbarItemsSize |
String | ツールバーのボタンサイズを指定します small/medium/largeのいずれかの値を指定できます 本属性の動作はTinyMCEのtoolbar_items_size設定時の動作と同じになることしか保証をしません |
small | ||||||||||
value |
String | リッチテキストボックスに表示する文字列を指定します | - | ||||||||||
無害化 | width |
String | リッチテキストボックスの横幅を指定します | - |