機能説明

  • リッチテキストボックスを作成します
  • このページは8.0.11以前のバージョンの情報です。
    • 8.0.12以降、8.0.18以前のバージョンはこちらを参照してください。
    • 8.0.19以降のバージョンはこちらを参照してください。
  • 入力されたリッチテキストからタグを取り除いたテキストを内部的に保持します
    • richtextboxに指定したid, name属性値を{id}, {name}とする場合、id=“{id}_plain” name=“{name}_plain”属性をもつ隠しテキストエリアに保持します
  • richtextboxが利用している tinyMCEのバージョンは以下になります。
モジュールtinyMCE
8.0.3 ~ 8.0.113.5.8
  • 注意事項
    • 本タグで作成したデータを参照画面で表示する際には、以下の現象を防ぐために、親ブロック要素に .imui-richtextbox-reference を指定してください
      • リスト(ulタグ)の list-style-type が表示されない
      • リスト(ulタグ/olタグ下のliタグ)配置場所が、編集画面と異なる
      • h1~h6 の文字サイズが編集画面と異なる
    • decoration 属性は themeAdvancedButtons1~themeAdvancedButtons5 属性が未指定の場合にのみ有効です
    • インデント、アウトデントを行う場合、Shift+Enter 等により p タグで囲まれた中で行ってください
    • プレーンテキストは単純にリッチテキストからタグを取り除いただけであるため、元の構造とは違った見栄えになる可能性があります(テーブル等)
      • また、文字実体参照については「 」「&」「"」「<」「>」のみがプレーン化対象です
    • hr, advhr ボタンで作成される水平線には、intra-mart Accel Platform の CSS が適用されるため、プレビュー画面と見た目に差異が生じます
    • リッチテキストボックスに入力されるデータのエンコードタイプを変更するには、<conf/ui-tag-config/ui-tag-config_imui-richtextbox.xml> ファイルを編集してください
      • 本設定の変更はすべてのリッチテキストボックスに適用されます
      • 本設定を変更をするとリッチテキストボックスを利用している各画面で正しい挙動をしない可能性があります
      • タグ名は「imuiRichtextbox」にし、「entity_encoding」をパラメータ名として、パラメータ値を設定してください
      • エンコードタイプについてはtinymceのドキュメントを参照してください
      • エンコードタイプは「raw」の設定でのみ検証をしています。それ以外の設定については動作保証しません
      • 本設定は Ver.8.0.8 以降のバージョンで使用可能です
  • 制限事項
    • ダイアログ内に配置した場合、書式セレクト、フォントセレクト、フォントサイズセレクト、色選択ウィンドウが画面左上に表示されます
    • imuiDialog 内で richtextbox は利用できません
    • Internet Explorer 11 では、forcedRootBlock 属性に空文字を指定していても、先頭に p タグが埋め込まれる場合があります
      • 一度文字を入力したあとに全ての文字を削除すると、p タグが埋め込まれます

属性一覧

注釈 属性名 説明 省略時の動作 実行時評価
decoration String 装飾種別を指定します
simple/fullのいずれかの値を指定できます
simple/full時に読み込まれるボタン/コントロール、およびプラグインについてはボタン/コントロールおよびプラグインを参照してください
themeAdvancedButtons1~themeAdvancedButtons5のいずれかの属性が指定されている場合、本属性は無視されます
full
Boolean属性 forceBrNewlines Boolean tinymce初期化時の、force_br_newlinesオプションを指定します。
本属性の動作はtinymceのforce_br_newlines設定時の動作と同じになることしか保証をしません
詳細についてはtinymceのドキュメントを参照してください
true
Boolean属性 forcePNewlines Boolean tinymce初期化時の、force_p_newlinesオプションを指定します。
本属性の動作はtinymceのforce_p_newlines設定時の動作と同じになることしか保証をしません
詳細についてはtinymceのドキュメントを参照してください
-
無害化 forcedRootBlock String 非ブロック要素やテキストノードを指定した要素で囲みます
本属性の動作はtinymceのforced_root_block設定時の動作と同じになることしか保証をしません
詳細についてはtinymceのドキュメントを参照してください
""
無害化 height String リッチテキストボックスの縦幅を指定します
本属性は Ver.8.0.6 以降のバージョンで使用可能です
-
id String リッチテキストボックスのidです 代替idを付与
name String リッチテキストボックスのnameです 代替nameを付与
plainParameter String リッチテキストボックスの初期化時に追加で渡したいオプションを指定します
本属性に渡したオプションは無害化されずそのまま出力されます
-
無害化 plugins String リッチテキストボックスのプラグインをカンマ区切りで指定します
本属性を指定しない場合、themeAdvancedButtons1~themeAdvancedButtons5までに指定された値を元に必要なプラグインを自動で設定します
imuiRichtextboxでは以下のプラグインを同梱していますが、弊社では動作検証を行っておりませんので、ご理解の上ご利用ください。
  • advhr
  • advimage
  • advlink
  • advlist
  • autolink
  • autoresize
  • autosave
  • bbcode
  • contextmenu
  • directionality
  • emotions
  • fullpage
  • fullscreen
  • inlinepopups
  • insertdatetime
  • layer
  • legacyoutput
  • lists
  • media
  • nonbreaking
  • noneditable
  • pagebreak
  • paste
  • preview
  • print
  • save
  • searchreplace
  • spellchecker
  • style
  • tabfocus
  • table
  • template
  • visualchars
  • wordcount
  • xhtmlxtras
本属性の動作はtinymceのplugins設定時の動作と同じになることしか保証をしません
詳細についてはプラグイン、およびtinymceのドキュメントを参照してください
-
Boolean属性 readonly Boolean 参照用のスタイルを指定します。
本属性は Ver.8.0.8 以降のバージョンで使用可能です
false
Boolean属性 resizable Boolean リッチテキストボックスのサイズ変更を許可するかどうかを指定します true
無害化 themeAdvancedButtons1 String ツールバーの1行目に表示するボタン/コントロールのリストをカンマ区切りで指定します
本属性の動作はtinymceのtheme_advanced_buttons1設定時の動作と同じになることしか保証をしません
指定可能なボタン/コントロール名などの詳細についてはボタン/コントロールを参照してください
-
無害化 themeAdvancedButtons2 String ツールバーの2行目に表示するボタン/コントロールのリストをカンマ区切りで指定します
本属性の動作はtinymceのtheme_advanced_buttons2設定時の動作と同じになることしか保証をしません
指定可能なボタン/コントロール名などの詳細についてはボタン/コントロールを参照してください
-
無害化 themeAdvancedButtons3 String ツールバーの3行目に表示するボタン/コントロールのリストをカンマ区切りで指定します
本属性の動作はtinymceのtheme_advanced_buttons3設定時の動作と同じになることしか保証をしません
指定可能なボタン/コントロール名などの詳細についてはボタン/コントロールを参照してください
-
無害化 themeAdvancedButtons4 String ツールバーの4行目に表示するボタン/コントロールのリストをカンマ区切りで指定します
本属性の動作はtinymceのtheme_advanced_buttons4設定時の動作と同じになることしか保証をしません
指定可能なボタン/コントロール名などの詳細についてはボタン/コントロールを参照してください
-
無害化 themeAdvancedButtons5 String ツールバーの5行目に表示するボタン/コントロールのリストをカンマ区切りで指定します
本属性の動作はtinymceのtheme_advanced_buttons5設定時の動作と同じになることしか保証をしません
指定可能なボタン/コントロール名などの詳細についてはボタン/コントロールを参照してください
-
themeAdvancedToolbarAlign String ツールバーのアラインを指定します
left/right/centerのいずれかの値を指定できます
本属性の動作はtinymceのtheme_advanced_toolbar_align設定時の動作と同じになることしか保証をしません
詳細についてはtinymceのドキュメントを参照してください
left
themeAdvancedToolbarLocation String ツールバーのアラインを指定します
top/bottom/externalのいずれかの値を指定できます
本属性の動作はtinymceのtheme_advanced_toolbar_location設定時の動作と同じになることしか保証をしません
詳細についてはtinymceのドキュメントを参照してください
top
value String リッチテキストボックスに表示する文字列を指定します -
無害化 width String リッチテキストボックスの横幅を指定します
本属性は Ver.8.0.6 以降のバージョンで使用可能です
-

サンプル

body部

body部
ボディ部とはrichtextboxタグに囲まれた部分を指します
注釈 説明 省略時の動作
リッチテキストボックスに表示する文字列です
valueと同時指定された場合は、ボディ部に書いた文字列が優先されます
-
JSP
<imui:richtextbox>ボディ部</imui:richtextbox>

value

value
リッチテキストボックスにはvalueと表示されます
JSP
<imui:richtextbox value="value" />

decoration

decoration
decorationは以下の2通りの指定方法があります
decoration説明
simple シンプルなボタン配置です
full より多くの機能を持つボタン配置です
JSP
<imui:richtextbox decoration="simple" />
<imui:richtextbox decoration="full" />

forcedRootBlock

forcedRootBlock
非ブロック要素、テキストノードがpタグで囲まれてHTML出力されます
JSP
<imui:richtextbox forcedRootBlock="p" />

themeAdvancedButtons1, themeAdvancedButtons2, themeAdvancedButtons3

themeAdvancedButtons1, themeAdvancedButtons2, themeAdvancedButtons3
ツールバーの1行目に新規ドキュメント、ボールド、イタリック、アンダーライン
ツールバーの2行目にフォントサイズ選択
ツールバーの3行目にカット、コピー、ペースト
ボタンを表示します
JSP
<imui:richtextbox themeAdvancedButtons1="newdocument,bold,italic,underline" themeAdvancedButtons2="fontsizeselect" themeAdvancedButtons3="cut,copy,paste" />

themeAdvancedToolbarAlign

themeAdvancedToolbarAlign
ツールバーのボタンを右揃えにします
themeAdvancedToolbarAlignは以下の3通りの指定方法があります
themeAdvancedToolbarAlign説明
left ツールバーのボタンを左揃えにします
right ツールバーのボタンを右揃えにします
center ツールバーのボタンを中央揃えにします
JSP
<imui:richtextbox themeAdvancedToolbarAlign="right" />

themeAdvancedToolbarLocation

themeAdvancedToolbarLocation
ツールバーをリッチテキストボックスの下部に配置します
themeAdvancedToolbarLocationは以下の3通りの指定方法があります
themeAdvancedToolbarLocation説明
top ツールバーを上部に表示します
bottom ツールバーを下部に表示します
external ツールバーをmceExternalToolbarクラスを持つdiv要素に表示します
JSP
<imui:richtextbox themeAdvancedToolbarLocation="bottom" />

plainParameter

plainParameter
pasteプラグイン用のpaste_preprocessオプションとpaste_postprocessオプションを追加で指定します
このサンプルでは、リッチテキストボックスへペーストした際に「paste_preprocess」と「paste_postprocess」のアラートが表示されます
JSP
<%
    String plainParameter = "paste_preprocess : function() { alert('paste_preprocess'); },\n"
          + "                paste_postprocess : function() { alert('paste_postprocess'); }";
%>
<imui:richtextbox plainParameter="<%= plainParameter %>" plugins="paste" themeAdvancedButtons1="pastetext,pasteword,selectall" />

CSJS

CSJS
jQueryのval、TinyMCEのgetContent APIを使用することで、プレーンテキスト、リッチテキストを取得することができます
JSP
<imui:richtextbox id="rich" /><br />
<input type="button" id="plain" class="imui-medium-button" value="プレーンテキストを表示" />
<input type="button" id="html" class="imui-medium-button" value="リッチテキストを表示" />
<script type="text/javascript">
$('#plain').click(function() {
  imuiAlert($('#rich_plain').val());
});

$('#html').click(function() {
  imuiAlert(tinyMCE.get('rich').getContent());
});
</script>

readonly

readonly
readonly属性を設定することで、リードオンリーとしてテキストを表示することができます
height属性の指定がない場合、リッチテキストボックスの高さはコンテンツの高さに合わせて自動で調整されます
本属性は Ver.8.0.8 以降のバージョンで使用可能です
JSP
<imui:richtextbox readonly="true">sample</imui:richtextbox>