機能説明

  • リッチテキストボックスを作成します
  • このページは8.0.19以降のバージョンの情報です。
    • 8.0.11以前のバージョンはこちらを参照してください。
    • 8.0.12以降、8.0.18以前のバージョンはこちらを参照してください。
  • 入力されたリッチテキストからタグを取り除いたテキストを内部的に保持します
    • 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> を編集してください
      • 設定ファイルの詳細は、下記の デフォルトのプラグイン、利用禁止のプラグインなどの設定 を参照してください
  • 制限事項
    • 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では以下のプラグインを同梱していますが、弊社では動作検証を行っておりませんので、ご理解の上ご利用ください
  • advlist
  • anchor
  • autolink
  • autoresize
  • autosave
  • bbcode
  • charmap
  • code
  • codesample
  • contextmenu
  • directionality
  • emoticons
  • fullpage
  • fullscreen
  • hr
  • image
  • imagetools
  • importcss
  • insertdatetime
  • layer
  • legacyoutput
  • link
  • lists
  • media
  • nonbreaking
  • noneditable
  • pagebreak
  • paste (※1)
  • preview
  • print
  • save
  • searchreplace
  • spellchecker
  • tabfocus
  • table
  • template
  • textcolor
  • textpattern
  • visualblocks
  • visualchars (※1)
  • wordcount
  • help
  • toc
TinyMCE3からTinyMCE4へのバージョンアップに伴い廃止された以下のプラグインは指定せずに取り除きます
  • advhr
  • advimage
  • advlink
  • iespell
  • inlinepopups
  • style
  • emotions(emoticonsに変更)
  • xhtmlxtras
本属性の動作はTinyMCEのplugins設定時の動作と同じになることしか保証をしません
詳細についてはプラグイン、およびTinyMCEのドキュメントを参照してください


(※1)
Ver.8.0.31以降は、脆弱性が存在するプラグイン「paste」、「visualchars」を利用禁止にしました
詳細については、注意事項を参考してください
-
無害化 pluginsOption Map<String, Object> plugins属性で指定したプラグインのオプションを指定します

pluginsOptionで指定可能なオプションは下記の通りです
要素名 説明バージョン
imuiAttachFile Map<String, Object>imuiAttachFileのオプションを指定します8.0.15
-
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 リッチテキストボックスの横幅を指定します -

サンプル

body部

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

value

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

decoration

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

forcedRootBlock

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

toolbar1, toolbar2, toolbar3

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

menubar

menubar
メニューバーを表示します
JSP
<imui:richtextbox menubar="true" />

menubar(内容指定)

menubar(内容指定)
メニューバーの内容を指定します
JSP
<imui:richtextbox menubar="'table format view insert edit'" />

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属性の指定がない場合、リッチテキストボックスの高さはコンテンツの高さに合わせて自動で調整されます
JSP
<imui:richtextbox readonly="true">sample</imui:richtextbox>

readonly(画面表示時に表示されないコンポーネントと組み合わせて使用する場合)

readonly(画面表示時に表示されないコンポーネントと組み合わせて使用する場合)
imuiTabs などの画面表示時にリッチテキストボックスが表示されないコンポーネントと組み合わせてreadonly属性を設定する場合、リッチテキストボックスの高さは自動で調整されません
height属性を設定して高さを調節するか、下記のようにリッチテキストボックスの表示時に再度、TinyMCEのautoresizeプラグインを呼び出してください
JSP
<%
  String contents = "sample<br />" 
                  + "sample<br />" 
                  + "sample<br />" 
                  + "sample<br />" 
                  + "sample<br />" 
                  + "sample<br />" 
                  + "sample<br />" 
                  + "sample<br />" 
                  + "sample<br />" 
                  + "sample<br />";
%>

<imui:tabs>
  <imui:tabItem id="tab1" title="タブタイトル1">タブ1</imui:tabItem>
  <imui:tabItem id="tab2" title="タブタイトル2">タブ2</imui:tabItem>
  <imui:tabItem id="tab3" title="タブタイトル3">タブ3</imui:tabItem>
  <imui:tabItem id="tab4" title="タブタイトル4">
    <imui:richtextbox id="sample" readonly="true" width="100%" value="<%= contents %>"></imui:richtextbox>
  </imui:tabItem>
</imui:tabs>
  
<script type="text/javascript">
  $(function() {
     $('#tab4').children('a').click(function() {
       tinymce.get('sample').execCommand('mceAutoResize');
     });
   });
</script>

readonly(枠線を表示しない方法)

詳細は下記の noBorder を参照してください

toolbarItemsSize

toolbarItemsSize
toolbarItemsSizeは以下の3通りの指定方法があります
toolbarItemsSize説明
small 小サイズのボタン表示です
medium 中サイズのボタン表示です
large 大サイズのボタン表示です
JSP
<imui:richtextbox toolbarItemsSize="small" />
<imui:richtextbox toolbarItemsSize="medium" />
<imui:richtextbox toolbarItemsSize="large" />

imuiAttachFile

imuiAttachFile
imuiAttachFileプラグインを使用して、パブリックストレージへのファイルアップロード機能を有効化します

アップロード可能なファイルは「gif,png,jpeg,jpg」です

ファイルアップロード機能を使用する際は、plugins属性およびいずれかのtoolbar属性に「imuiAttachFile」を指定する必要があります
pluginsOptionにて、imuiAttachFileプラグインのオプションを指定します

imuiAttachFileで使用可能なオプションは下記の通りです


要素名説明省略時の挙動
path String 画像ファイルのアップロード先フォルダのパスを指定します
imuiAttachFile をプラグインに指定した場合は必須です
このオプションを指定しない場合、エラー画面が表示されます
-
showStorage Boolean pathで指定したフォルダ内の画像ファイルについて、アップロードファイル一覧への表示の有無を指定します
  • false
    • このimuiRichtextbox内でアップロードした画像ファイルのみ表示されます。再読み込み後は表示されません。
  • true
    • pathで指定したフォルダ内のファイルがすべて表示されます。認可に関するオプションを設定していても、すべての画像が表示されます。
false
authzUriString 認可リソースURIを指定します
authzUriを指定する際は、オプション要素としてauthzActionやauthzConditionを指定することができます
スペース区切りで複数の認可を指定可能です
認可判断の結果が「許可」以外の場合、画像は表示されずレスポンスとして 403 Forbidden が返却されます
-
authzActionString 認可アクションを指定します
authzUriで複数のリソースURIを設定した際は、それぞれに対応した認可アクションをスペース区切りで設定する必要があります
各認可リソースURIに対応したアクションを指定してください
execute
authzConditionString authzUriを複数指定した際の動作を指定します
authzConditionは以下の2通りの指定方法があります
  • or
    • 指定した認可のどれか一つでも許可された場合に画像が表示されます
  • and
    • 指定した認可のすべてが許可された場合のみに画像が表示されます
or
アップロードされる画像のファイル名は一意な文字列とアップロード時のファイル名を「_」で結合した名前で保存されます。
showStorageに関する詳細は、下記の imuiAttachFile(showStorage) を参照してください

認可に関するオプションの詳細は、下記の imuiAttachFile(認可設定あり) を参照してください
JSP
<%
    // 本サンプルでは decoration 属性に full を指定したときと同様の plugin に imuiAttachFile を追加した場合の指定を行います
    HashMap<String, Object> attachFile = new HashMap<String, Object>();
    attachFile.put("path", "ui/richtext/sample");
    HashMap<String, Object> pluginsOption = new HashMap<String, Object>();
    pluginsOption.put("imuiAttachFile", attachFile);
    String plugins = "searchreplace,image,insertdatetime,preview,textcolor,colorpicker,fullscreen,table,hr,charmap,emoticons,link,media,directionality,print,autolink,lists,contextmenu,noneditable,advlist,imuiAttachFile";
    String toolbar1 = "newdocument, | , bold,italic,underline,strikethrough, | ,styleselect,formatselect,fontselect,fontsizeselect, | ,fullscreen";
    String toolbar2 = "cut,copy,paste, | ,bullist,numlist, | ,alignleft,aligncenter,alignright,alignjustify, | ,outdent,indent,blockquote, | ,forecolor,backcolor, | ,searchreplace, | ,preview";
    String toolbar3 = "table, | ,hr,removeformat, | ,subscript,superscript, | ,charmap,emoticons,link,unlink,image,media, | ,insertdatetime, | ,ltr,rtl, | ,undo,redo, | ,print, | ,imuiAttachFile";
%>
<imui:richtextbox plugins="<%= plugins %>" toolbar1="<%= toolbar1 %>" toolbar2="<%= toolbar2 %>" toolbar3="<%= toolbar3 %>" pluginsOption="<%= pluginsOption %>" />

imuiAttachFile(showStorage)

imuiAttachFile(showStorage)
pluginsOptionのimuiAttachFile要素内のshowStorage要素でアップロード済みファイルの一覧に表示するファイルについて設定します

アップロード済みファイルにて表示されたファイルは、プレビュー表示やファイルの削除を行うことができます


  • falseに設定した場合、このrichtextbox内でアップロードしたファイルのみを表示します(デフォルト)
  • trueに設定した場合、pathオプションで指定したフォルダのファイルがすべて表示されます
JSP
<%
    HashMap<String, Object> attachFile = new HashMap<String, Object>();
    attachFile.put("path", "ui/richtext/sample/show_storage");
    attachFile.put("showStorage", true);
    HashMap<String, Object> pluginsOption = new HashMap<String, Object>();
    pluginsOption.put("imuiAttachFile", attachFile);
%>
<imui:richtextbox plugins="imuiAttachFile" toolbar1="imuiAttachFile" pluginsOption="<%= pluginsOption %>" />

imuiAttachFile(認可設定あり)

imuiAttachFile(認可設定あり)
pluginsOptionのimuiAttachFile要素内のauthzUri要素に認可リソースURIを設定することで、アップロード画像へ認可を付与します

img タグの src 属性に指定されている URL に対しての認可設定です。


  • スペース区切りで複数の認可リソースが設定可能です
  • authzAction要素(オプション)およびauthzCondition要素(オプション)にて、各リソースURIに対するアクションや、複数認可設定時の挙動を設定できます


本サンプルでを動作される場合は、authzUri に指定するリソースグループを登録してください。
以下のいずれかの認可結果が許可の場合に画像が表示されます。
  • service://richtext/auth, execute
  • service://richtext/auth2, execute
JSP
<%!private HashMap<String, Object> createPluginsOption(String path, String uri, String action, String condition) {
        HashMap<String, Object> attachFile = new HashMap<String, Object>();
        attachFile.put("path", path);
        attachFile.put("authzUri", uri);
        attachFile.put("authzAction", action);
        attachFile.put("authzCondition", condition);
        HashMap<String, Object> pluginsOption = new HashMap<String, Object>();
        pluginsOption.put("imuiAttachFile", attachFile);
        return pluginsOption;
    }
%>
<% HashMap<String, Object> pluginsOption = createPluginsOption("ui/richtext/sample/authz", "service://richtext/auth service://richtext/auth2", "execute execute", "or"); %>
<imui:richtextbox plugins="imuiAttachFile" toolbar1="imuiAttachFile" pluginsOption="<%= pluginsOption %>" />

imuiDataUrl

imuiDataUrl
imuiDataUrlプラグインは、ローカルの画像をimuiRichtextboxで利用するためのプラグインです
画像からdataスキーム形式のURLを生成し、imgタグとしてリッチテキストボックスに挿入します
本プラグインを利用する際は、plugins属性およびいずれかのtoolbar属性に「imuiDataUrl」を指定する必要があります

imuiAttachFileプラグイン と異なる点は下記の通りです
  • パブリックストレージへファイルをアップロードしない
  • 画像をdataスキームURLとして保持するため、保存するコンテンツの文字列長が長くなる
  • 利用できる画像ファイルは「gif,png,jpeg,jpg,ico」
  • プラグインに対する設定は設定ファイル(conf/ui-tag-config/ui-tag-config_imui-richtextbox.xml)で行う
設定ファイル(ui-tag-config_imui-richtextbox.xml)にて、imuiDataUrlプラグインで扱える画像のオプションを設定します
設定ファイルの詳細は、下記の imuiDataUrl(設定を変更する) を参照してください
JSP
<%
    // 本サンプルでは decoration 属性に full を指定したときと同様の plugin に imuiDataUrl を追加した場合の指定を行います
    String plugins = "searchreplace,image,insertdatetime,preview,textcolor,colorpicker,fullscreen,table,hr,charmap,emoticons,link,media,directionality,print,autolink,lists,contextmenu,noneditable,advlist,imuiDataUrl";
    String toolbar1 = "newdocument, | , bold,italic,underline,strikethrough, | ,styleselect,formatselect,fontselect,fontsizeselect, | ,fullscreen";
    String toolbar2 = "cut,copy,paste, | ,bullist,numlist, | ,alignleft,aligncenter,alignright,alignjustify, | ,outdent,indent,blockquote, | ,forecolor,backcolor, | ,searchreplace, | ,preview";
    String toolbar3 = "table, | ,hr,removeformat, | ,subscript,superscript, | ,charmap,emoticons,link,unlink,image,media, | ,insertdatetime, | ,ltr,rtl, | ,undo,redo, | ,print, | ,imuiDataUrl";
%>
<imui:richtextbox plugins="<%= plugins %>" toolbar1="<%= toolbar1 %>" toolbar2="<%= toolbar2 %>" toolbar3="<%= toolbar3 %>" />

imuiDataUrl(設定を変更する)

imuiDataUrl(設定を変更する)
imuiDataUrlプラグインの設定を設定ファイル(ui-tag-config_imui-richtextbox.xml)にて変更するサンプルです
imuiDataUrlで使用可能なオプションは下記の通りです


注釈 タグ名 パラメータ名設定値・設定する内容初期値
必須imuiRichtextbox max_size 画像から生成されたdataスキームURLの文字列長の最大値です
単位はバイトです
dataスキームURLの文字列長がこの値を超える場合、リサイズ後にこの値に収まるまで画像を圧縮します
圧縮してもdataスキームURLの文字列長がこの値に収まらない場合はエラーとなります
100000
必須 max_width 画像の最大横幅です
max_sizeの値を超える画像ファイルを指定された場合、この横幅にリサイズします
単位はpxです
640
必須 max_height 画像の最大高さです
max_sizeの値を超える画像ファイルを指定された場合、この高さにリサイズします
単位はpxです
480
画像処理は以下の順番で行われます
  1. 選択された画像から、そのままdataスキームURLを生成する
  2. 生成したdataスキームURLの長さをmax_sizeと比較し、max_size以内であればそのまま表示、超える場合は3へ
  3. max_width、max_heightより大きい画像の場合は、その大きさにリサイズする
  4. リサイズした画像のdataスキームURLの長さを、max_sizeと比較し、max_size以内であればそのまま表示、超える場合は5へ
  5. 画像をjpegに変換し、dataスキームURLの長さがmax_size以内に収まるまで、画質を落としながら圧縮を繰り返す
  6. 画質を最低まで落としたdataスキームURLの長さが、max_sizeを超える場合はエラー、収まった場合はその圧縮率で表示
max_sizeを増やすことで大きな画像ファイルの利用が可能になりますが、以下のような注意事項があります
また、max_sizeが初期値のままであっても、同一画面内にこのプラグインによる画像の挿入が大量に行われることが想定される場合は、同様の注意が必要です
  • 画面表示に時間がかかる場合があります
    • dataスキームURLを利用することで一般的にデータサイズが約1.3倍に大きくなります
    • そのためレスポンス量が増加し、画面表示時に時間がかかる場合があります
  • 画像をdataスキームURLで保持するため、保存コンテンツが大きくなる場合があります
  • dataスキームURLの生成はクライアントで行っているため、ブラウザによっては変換に時間がかかる場合があります

その他、以下の制限事項があります
  • ファイル圧縮時にjpegに変換することで画像の透過情報が失われます
下記は、max_width、max_heightを変更し、ファイルの縦横の大きさがリサイズされていることを確認するサンプルです
ui-tag-config_imui-richtextbox.xml
<?xml version="1.0" encoding="UTF-8"?>
<ui-tag-config xmlns="http://www.intra-mart.jp/ui/tag-config"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://www.intra-mart.jp/ui/tag-config ../../schema/ui-tag-config.xsd">

  <tag name="imuiRichtextbox">
    <parameter>
      <param-name>entity_encoding</param-name>
      <param-value>raw</param-value>
    </parameter>

    <parameter>
      <param-name>max_size</param-name>
      <param-value>100000</param-value>
    </parameter>

    <parameter>
      <param-name>max_width</param-name>
      <param-value>320</param-value>
    </parameter>

    <parameter>
      <param-name>max_height</param-name>
      <param-value>240</param-value>
    </parameter>
  </tag>

</ui-tag-config>
JSP
<imui:richtextbox plugins="imuiDataUrl" toolbar1="imuiDataUrl" />

noBorder

noBorder
readonly表示時の外枠の線を消すことができます
height属性の指定がない場合、リッチテキストボックスの高さはコンテンツの高さに合わせて自動で調整されます
JSP
<imui:richtextbox readonly="true" id="target" noBorder="true">sample</imui:richtextbox>

デフォルトのプラグイン、利用禁止のプラグインなどの設定

Ver.8.0.31以降に追加された設定ファイル($imart.home/WEB-INF/conf/ui-tag-config/ui-tag-config_imui-richtextbox.xml)に、以下の内容を設定できます


各装飾種別(decoration 属性)で使用するデフォルトのプラグインをカンマ区切りで指定できます

タグ名 パラメータ名設定値・設定する内容
imuiRichtextbox decoration_simple decoration 属性に simple を指定したときに使用するデフォルトのプラグイン名
decoration_full decoration 属性に full を指定したときに使用するデフォルトのプラグイン名
decoration_menu decoration 属性に menu を指定したときに使用するデフォルトのプラグイン名

各装飾種別(decoration 属性)で使用するツールバーの表示ボタン/コントロールのリストをカンマ区切りで指定できます

パラメータ値1~パラメータ値5でtoolbar1~toolbar5を指定できます

タグ名 パラメータ名設定値・設定する内容
imuiRichtextbox toolbar_simple decoration 属性に simple を指定したときに使用するツールバーの表示ボタン名
toolbar_full decoration 属性に full を指定したときに使用するツールバーの表示ボタン名
toolbar_menu decoration 属性に menu を指定したときに使用するツールバーの表示ボタン名

利用禁止プラグインをカンマ区切りで指定できます

タグ名 パラメータ名設定値・設定する内容初期値
imuiRichtextbox exclude_plugins 利用禁止のプラグイン名を設定します
plugins 属性の設定値から利用禁止のプラグインを外します
脆弱性が存在するプラグイン「paste」、「visualchars」が設定されています
また、以下の方法で無効にしたプラグインを有効にすることができます

脆弱性が存在するプラグインを有効にする際は、お客様の環境にて十分な検証を行っていただき、お客様のご責任のもとご対応ください
  1. 「exclude_plugins」のパラメータ設定値から有効にしたい対象プラグインを外します
  2. 「decoration_full」、「decoration_menu」のパラメータ設定値に有効にしたい対象プラグインを追加します

value 属性にサニタイズ(無害化)対象文字列パターンを正規表現式で指定できます

タグ名 パラメータ名設定値・設定する内容
imuiRichtextbox value_sanitize リッチテキストボックスに表示する文字列の指定値(value 属性)に、サニタイズ(無害化)対象文字列パターンを正規表現式で指定します
正規表現に該当する文字列に対してhtml特殊文字のエスケープ処理を実施します


下記は、当該設定ファイルの内容です
ui-tag-config_imui-richtextbox-decoration.xml
<?xml version="1.0" encoding="UTF-8"?>
<ui-tag-config xmlns="http://www.intra-mart.jp/ui/tag-config"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://www.intra-mart.jp/ui/tag-config ../../schema/ui-tag-config.xsd">

  <tag name="imuiRichtextbox">
    <parameter>
      <param-name>decoration_simple</param-name>
      <param-value>fullscreen,textcolor,colorpicker</param-value>
    </parameter>

    <parameter>
      <param-name>decoration_full</param-name>
      <param-value>searchreplace,image,insertdatetime,preview,textcolor,colorpicker,fullscreen,table</param-value>
      <param-value>hr,charmap,emoticons,link,media,directionality,print,autolink,lists,contextmenu,noneditable,advlist</param-value>
    </parameter>

    <parameter>
      <param-name>decoration_menu</param-name>
      <param-value>advlist,autolink,lists,link,image,charmap,print,preview,hr,anchor,pagebreak</param-value>
      <param-value>searchreplace,visualblocks,code,fullscreen</param-value>
      <param-value>insertdatetime,media,nonbreaking,save,table,contextmenu,directionality</param-value>
      <param-value>emoticons,textcolor,colorpicker</param-value>
    </parameter>

    <parameter>
      <param-name>toolbar_simple</param-name>
      <param-value>newdocument | bold italic underline strikethrough | alignleft aligncenter alignright | forecolor backcolor</param-value>
      <param-value>fontsizeselect | cut copy paste | undo redo | fullscreen</param-value>
    </parameter>

    <parameter>
      <param-name>toolbar_full</param-name>
      <param-value>newdocument | bold italic underline strikethrough | styleselect formatselect fontselect fontsizeselect | fullscreen</param-value>
      <param-value>cut copy paste | bullist numlist | alignleft aligncenter alignright alignjustify | outdent indent blockquote | forecolor backcolor | searchreplace | preview</param-value>
      <param-value>table | hr removeformat | subscript superscript | charmap emoticons link unlink image media | insertdatetime | ltr rtl | undo redo | print</param-value>
    </parameter>

    <parameter>
      <param-name>toolbar_menu</param-name>
      <param-value>bold italic | styleselect fontselect fontsizeselect | bullist numlist | forecolor backcolor</param-value>
      <param-value>alignleft aligncenter alignright alignjustify | outdent indent | print preview link image media | emoticons | undo redo</param-value>
    </parameter>

    <parameter>
      <param-name>exclude_plugins</param-name>
      <param-value>paste,visualchars</param-value>
    </parameter>

    <parameter>
      <param-name>value_sanitize</param-name>
      <param-value></?textarea>|</?textarea\s+?.*?>|</?script>|</?script\s+?.*?></param-value>
    </parameter>
  </tag>

</ui-tag-config>