機能説明

  • リッチテキストボックスを作成します
  • このページは8.0.19以降のバージョンの情報です。
    • 8.0.11以前のバージョンはこちらを参照してください。
    • 8.0.12以降、8.0.18以前のバージョンはこちらを参照してください。
  • 入力されたリッチテキストからタグを取り除いたテキストを内部的に保持します
    • imuiRichtextboxに指定したid, name属性値を{id}, {name}とする場合、id=“{id}_plain” name=“{name}_plain”属性をもつ隠しテキストエリアに保持します
  • imuiRichtextboxが利用している 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」の設定でのみ検証をしています。それ以外の設定については動作保証しません
    • Ver.8.0.19以降は、forcedRootBlock の初期値を p に変更しました
  • 制限事項
    • imuiDialog 内で imuiRichtextbox は利用できません
    • Google Chrome にて、imuiRichtextbox の編集画面、プレビュー画面で日本語フォントはMS Pゴシックで表示されます
    • Internet Explorer 11 では、forcedRootBlock 属性に空文字を指定していても、先頭に p タグが埋め込まれる場合があります
      • 一度文字を入力したあとに全ての文字を削除すると、p タグが埋め込まれます
    • imuiRichtextbox に登録した画像がストレージに残る場合があります。
      • imuiRichtextbox 内のイメージタグを削除した場合
      • アップロード後に imuiRichtextbox の内容を保存しなかった場合
    • 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を付与
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では以下のプラグインを同梱していますが、弊社では動作検証を行っておりませんので、ご理解の上ご利用ください
  • 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
  • preview
  • print
  • save
  • searchreplace
  • spellchecker
  • tabfocus
  • table
  • template
  • textcolor
  • textpattern
  • visualblocks
  • visualchars
  • wordcount
  • help
  • toc
TinyMCE3からTinyMCE4へのバージョンアップに伴い廃止された以下のプラグインは指定せずに取り除きます
  • advhr
  • advimage
  • advlink
  • iespell
  • inlinepopups
  • style
  • emotions(emoticonsに変更)
  • xhtmlxtras
本属性の動作はTinyMCEのplugins設定時の動作と同じになることしか保証をしません
詳細についてはプラグイン、およびTinyMCEのドキュメントを参照してください
-
無害化 pluginsOption Object plugins属性で指定したプラグインのオプションを指定します

pluginsOptionで指定可能なオプションは下記の通りです
要素名 説明バージョン
imuiAttachFile ObjectimuiAttachFileのオプションを指定します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部
ボディ部とはimartタグに囲まれた部分を指します
注釈 説明 省略時の動作
リッチテキストボックスに表示する文字列です
valueと同時指定された場合は、ボディ部に書いた文字列が優先されます
バインド変数は使えません
-
HTML
<imart type="imuiRichtextbox">ボディ部</imart>

value

value
リッチテキストボックスにはvalueと表示されます
HTML
<imart type="imuiRichtextbox" value="value" />

decoration

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

forcedRootBlock

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

toolbar1, toolbar2, toolbar3

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

menubar

menubar
メニューバーを表示します
HTML
<imart type="imuiRichtextbox" menubar="true" />

menubar(内容指定)

menubar(内容指定)
メニューバーの内容を指定します
HTML
<imart type="imuiRichtextbox" menubar="'table format view insert edit'" />

plainParameter

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

CSJS

CSJS
jQueryのval、TinyMCEのgetContent APIを使用することで、プレーンテキスト、リッチテキストを取得することができます
HTML
<imart type="imuiRichtextbox" 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属性の指定がない場合、リッチテキストボックスの高さはコンテンツの高さに合わせて自動で調整されます
HTML
<imart type="imuiRichtextbox" readonly="true">sample</imart>

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

readonly(画面表示時に表示されないコンポーネントと組み合わせて使用する場合)
imuiTabs などの画面表示時にリッチテキストボックスが表示されないコンポーネントと組み合わせてreadonly属性を設定する場合、リッチテキストボックスの高さは自動で調整されません
height属性を設定して高さを調節するか、下記のようにリッチテキストボックスの表示時に再度、TinyMCEのautoresizeプラグインを呼び出してください
サーバサイド JavaScript
var contents = "sample<br />" 
             + "sample<br />" 
             + "sample<br />" 
             + "sample<br />" 
             + "sample<br />" 
             + "sample<br />" 
             + "sample<br />" 
             + "sample<br />" 
             + "sample<br />" 
             + "sample<br />";
HTML
<imart type="imuiTabs">
  <imart type="imuiTabItem" id="tab1" title="タブタイトル1">タブ1</imart>
  <imart type="imuiTabItem" id="tab2" title="タブタイトル2">タブ2</imart>
  <imart type="imuiTabItem" id="tab3" title="タブタイトル3">タブ3</imart>
  <imart type="imuiTabItem" id="tab4" title="タブタイトル4">
    <imart type="imuiRichtextbox" id="sample" readonly="true" width="100%" value=contents></imart>
  </imart>
</imart>
  
<script type="text/javascript">
  $(function() {
     $('#tab4').children('a').click(function() {
       tinymce.get('sample').execCommand('mceAutoResize');
     });
   });
</script>

リッチテキストボックスのCSJSバリデーション

リッチテキストボックスのCSJSバリデーション
imuiRichtextboxは、指定したid, name属性値を{id}, {name}とする場合、入力されたリッチテキストをid=“{id}” name=“{name}”属性をもつ隠しテキストエリアに保持します。
また、入力されたリッチテキストからタグを取り除いたテキストを、id=“{id}_plain” name=“{name}_plain”属性をもつ隠しテキストエリアに保持します。
下記は入力されたリッチテキストからタグを取り除いたテキストに対してバリデーションを行うサンプルです。
サーバサイドバリデーションの定義ファイル (validator.js)
var init = {
    sample_plain: {
        caption: 'sample',
        required: true
    }
}
HTML
<imart type="head">
  <script src="ui/libs/jquery-validation-1.9.0/jquery.validate.js"></script>
</imart>

<imart type="imuiValidationRule" rule="validator#init" rulesName="rules" messagesName="messages"/>
<script>
$(document).ready(function() {
    // 登録/更新ボタンクリック
    $('#button').click(function() {
        // バリデーションチェック
        if (imuiValidate('#form', rules, messages,':hidden:not("[name=sample_plain]")')) {
            // 確認ダイアログ表示
            imuiConfirm(
                '<imart type="string" value=message/>', // メッセージ
                '<imart type="string" value=title/>', // タイトル
                function() { // OKクリック時のコールバック関数
                    imuiAjaxSend('#form', 'POST', 'json',
                        function() {
                            $(document.body).imuiIndicator(); // imuiIndicator を表示
                        },
                        function() {
                            $(document.body).imuiIndicator('destroy'); // imuiIndicator を非表示
                        }
                    ); // Ajaxでのデータ送信
                }
            );
        }
    });
});
</script>
<form id="form" action="somewhere/ajax">
    <imart type="imuiRichtextbox" name="sample"></imart>
    <input type="button" id="button" value="Submit" />
</form>

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

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

toolbarItemsSize

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

imuiAttachFile

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

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

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

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


要素名説明省略時の挙動
path string 画像ファイルのアップロード先フォルダのパスを指定します
imuiAttachFile をプラグインに指定した場合は必須です
このオプションを指定しない場合、imuiRichtextbox が生成されません
-
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(認可設定あり) を参照してください
サーバサイド JavaScript
// 本サンプルでは decoration 属性に full を指定したときと同様の plugin に imuiAttachFile を追加した場合の指定を行います
var $plugins = 'paste,searchreplace,image,insertdatetime,preview,textcolor,colorpicker,fullscreen,table,hr,charmap,emoticons,link,media,directionality,print,autolink,lists,contextmenu,noneditable,advlist,imuiAttachFile';
var $toolbar1 = 'newdocument, | , bold,italic,underline,strikethrough, | ,styleselect,formatselect,fontselect,fontsizeselect, | ,fullscreen';
var $toolbar2 = 'cut,copy,paste,pastetext, | ,bullist,numlist, | ,alignleft,aligncenter,alignright,alignjustify, | ,outdent,indent,blockquote, | ,forecolor,backcolor, | ,searchreplace, | ,preview';
var $toolbar3 = 'table, | ,hr,removeformat, | ,subscript,superscript, | ,charmap,emoticons,link,unlink,image,media, | ,insertdatetime, | ,ltr,rtl, | ,undo,redo, | ,print, | ,imuiAttachFile';
var $options = {
    imuiAttachFile:{
        path: "ui/richtext/sample"
    }
};
HTML
<imart type="imuiRichtextbox" plugins=$plugins toolbar1=$toolbar1 toolbar2=$toolbar2 toolbar3=$toolbar3 pluginsOption=$options />

imuiAttachFile(showStorage)

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

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


  • falseに設定した場合、このimuiRichtextbox内でアップロードしたファイルのみを表示します(デフォルト)
  • trueに設定した場合、pathオプションで指定したフォルダのファイルがすべて表示されます
サーバサイド JavaScript
var $options = {
        imuiAttachFile:{
            path: "ui/richtext/sample/show_storage",
            showStorage: true
        }
};
HTML
<imart type="imuiRichtextbox" plugins="imuiAttachFile" toolbar1="imuiAttachFile" pluginsOption=$options />

imuiAttachFile(認可設定あり)

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

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


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


本サンプルでを動作される場合は、authzUri に指定するリソースグループを登録してください。
以下のいずれかの認可結果が許可の場合に画像が表示されます。
  • service://richtext/auth, execute
  • service://richtext/auth2, execute
サーバサイド JavaScript
var $options = {
        imuiAttachFile:{
            path: "ui/richtext/sample/authz",
            authzUri: "service://richtext/auth service://richtext/auth2",
            authzAction: "execute execute",
            authzCondition: "or"
        }
};
HTML
<imart type="imuiRichtextbox" plugins="imuiAttachFile" toolbar1="imuiAttachFile" pluginsOption=$options />

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(設定を変更する) を参照してください
サーバサイド JavaScript
// 本サンプルでは decoration 属性に full を指定したときと同様の plugin に imuiDataUrl を追加した場合の指定を行います
var $plugins = 'paste,searchreplace,image,insertdatetime,preview,textcolor,colorpicker,fullscreen,table,hr,charmap,emoticons,link,media,directionality,print,autolink,lists,contextmenu,noneditable,advlist,imuiDataUrl';
var $toolbar1 = 'newdocument, | , bold,italic,underline,strikethrough, | ,styleselect,formatselect,fontselect,fontsizeselect, | ,fullscreen';
var $toolbar2 = 'cut,copy,paste,pastetext, | ,bullist,numlist, | ,alignleft,aligncenter,alignright,alignjustify, | ,outdent,indent,blockquote, | ,forecolor,backcolor, | ,searchreplace, | ,preview';
var $toolbar3 = 'table, | ,hr,removeformat, | ,subscript,superscript, | ,charmap,emoticons,link,unlink,image,media, | ,insertdatetime, | ,ltr,rtl, | ,undo,redo, | ,print, | ,imuiDataUrl';
HTML
<imart type="imuiRichtextbox" 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>
HTML
<imart type="imuiRichtextbox" plugins="imuiDataUrl" toolbar1="imuiDataUrl" />

noBorder

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