imuiRichtextbox(8.0.12-8.0.18)
コンポーネント情報 | |
---|---|
モジュール | im_ui |
導入されたバージョン | 8.0.3 |
バージョン | 8.0.18 |
機能説明
- リッチテキストボックスを作成します
- このページは8.0.12以降、8.0.18以前のバージョンの情報です。
- 入力されたリッチテキストからタグを取り除いたテキストを内部的に保持します
- imuiRichtextboxに指定したid, name属性値を{id}, {name}とする場合、id=“{id}_plain” name=“{name}_plain”属性をもつ隠しテキストエリアに保持します
- imuiRichtextboxが利用している tinyMCEのバージョンは以下になります。
モジュール | tinyMCE |
---|---|
8.0.12 ~ 8.0.13 | 4.2.6 |
8.0.14 ~ 8.0.18 | 4.3.12 |
- 注意事項
- 本タグで作成したデータを参照画面で表示する際には、以下の現象を防ぐために、親ブロック要素に 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.13 まではクリックするとリンク先に遷移します
- Ver.8.0.14 ~ Ver.8.0.17ではクリックしてもリンク先に遷移しません
- これは tinyMCE のバージョンアップの影響によるものです
- Ver.8.0.18ではクリックするとリンク先に遷移します
- 本タグで作成したデータを参照画面で表示する際には、以下の現象を防ぐために、親ブロック要素に readonly 属性を利用してください
- 制限事項
- imuiDialog 内で imuiRichtextbox は利用できません
- Google Chrome にて、imuiRichtextbox の編集画面、プレビュー画面で日本語フォントはMS Pゴシックで表示されます
- Internet Explorer 11 では、forcedRootBlock 属性に空文字を指定していても、先頭に p タグが埋め込まれる場合があります
- 一度文字を入力したあとに全ての文字を削除すると、p タグが埋め込まれます
- imuiRichtextbox に登録した画像がストレージに残る場合があります。
- imuiRichtextbox 内のイメージタグを削除した場合
- アップロード後に imuiRichtextbox の内容を保存しなかった場合
- imuiDataUrl で生成した画像に透過情報が欠落する場合があります
- ファイル圧縮時に jpeg に変換することで画像の透過情報が失われます
属性一覧
注釈 | 属性名 | 型 | 説明 | 省略時の動作 | ||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
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のドキュメントを参照してください |
"" | ||||||||
無害化 | height |
string | リッチテキストボックスの縦幅を指定します | - | ||||||||
id |
string | リッチテキストボックスのidです | 代替idを付与 | |||||||||
menubar |
string | リッチテキストボックスの初期化時のmenubarオプションの内容を指定します 本属性の動作はtinymceのmenubar設定時の動作と同じになることしか保証をしません 本属性に渡したオプションは無害化されずそのまま出力されます メニューバーに読み込まれる各ボタン/コントロールを表示する際に必要なプラグインについてはメニューバーを参照してください 詳細についてはtinymceのドキュメントを参照してください |
false | |||||||||
name |
string | リッチテキストボックスのnameです | 代替nameを付与 | |||||||||
Boolean属性 | noBorder |
boolean | 枠線を表示しないスタイルを指定します。 readonly属性と併せて利用してください。 |
false | ||||||||
plainParameter |
string | リッチテキストボックスの初期化時に追加で渡したいオプションを指定します 本属性に渡したオプションは無害化されずそのまま出力されます |
- | |||||||||
無害化 | plugins |
string | リッチテキストボックスのプラグインをカンマ区切りで指定します 本属性を指定しない場合、toolbar1~toolbar5、または、themeAdvancedButtons1~themeAdvancedButtons5までに指定された値を元に必要なプラグインを自動で設定します imuiRichtextboxでは以下のプラグインを同梱していますが、弊社では動作検証を行っておりませんので、ご理解の上ご利用ください
詳細についてはプラグイン、およびtinymceのドキュメントを参照してください |
- | ||||||||
無害化 | pluginsOption |
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 | リッチテキストボックスの横幅を指定します | - |