imuiRichtextbox

<imart type="imuiRichtextbox">ボディ部</imart>

<imart type="imuiRichtextbox">ボディ部</imart>

<imart type="imuiRichtextbox" value="value" />

<imart type="imuiRichtextbox" value="value" />

<imart type="imuiRichtextbox" decoration="simple" />
<imart type="imuiRichtextbox" decoration="full" />
<imart type="imuiRichtextbox" decoration="menu" />

<imart type="imuiRichtextbox" decoration="simple" />
<imart type="imuiRichtextbox" decoration="full" />
<imart type="imuiRichtextbox" decoration="menu" />

<imart type="imuiRichtextbox" forcedRootBlock="div" />

<imart type="imuiRichtextbox" forcedRootBlock="div" />

<imart type="imuiRichtextbox" toolbar1="newdocument,bold,italic,underline" toolbar2="fontsizeselect" toolbar3="cut,copy,paste" />

<imart type="imuiRichtextbox" toolbar1="newdocument,bold,italic,underline" toolbar2="fontsizeselect" toolbar3="cut,copy,paste" />

<imart type="imuiRichtextbox" menubar="true" />

<imart type="imuiRichtextbox" menubar="true" />

<imart type="imuiRichtextbox" menubar="'table format view insert edit'" />

<imart type="imuiRichtextbox" menubar="'table format view insert edit'" />

<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>

<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>

<imart type="imuiRichtextbox" readonly="true">sample</imart>

<imart type="imuiRichtextbox" readonly="true">sample</imart>

var contents = "sample<br />" 
             + "sample<br />" 
             + "sample<br />" 
             + "sample<br />" 
             + "sample<br />" 
             + "sample<br />" 
             + "sample<br />" 
             + "sample<br />" 
             + "sample<br />" 
             + "sample<br />";

var contents = "sample<br />" 
             + "sample<br />" 
             + "sample<br />" 
             + "sample<br />" 
             + "sample<br />" 
             + "sample<br />" 
             + "sample<br />" 
             + "sample<br />" 
             + "sample<br />" 
             + "sample<br />";

<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>

<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>

var init = {
    sample_plain: {
        caption: 'sample',
        required: true
    }
}

var init = {
    sample_plain: {
        caption: 'sample',
        required: true
    }
}

<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>

<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>

<imart type="imuiRichtextbox" toolbarItemsSize="small" />
<imart type="imuiRichtextbox" toolbarItemsSize="medium" />
<imart type="imuiRichtextbox" toolbarItemsSize="large" />

<imart type="imuiRichtextbox" toolbarItemsSize="small" />
<imart type="imuiRichtextbox" toolbarItemsSize="medium" />
<imart type="imuiRichtextbox" toolbarItemsSize="large" />

// 本サンプルでは decoration 属性に full を指定したときと同様の plugin に imuiAttachFile を追加した場合の指定を行います
var $plugins = '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, | ,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"
    }
};

// 本サンプルでは decoration 属性に full を指定したときと同様の plugin に imuiAttachFile を追加した場合の指定を行います
var $plugins = '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, | ,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"
    }
};

<imart type="imuiRichtextbox" plugins=$plugins toolbar1=$toolbar1 toolbar2=$toolbar2 toolbar3=$toolbar3 pluginsOption=$options />

<imart type="imuiRichtextbox" plugins=$plugins toolbar1=$toolbar1 toolbar2=$toolbar2 toolbar3=$toolbar3 pluginsOption=$options />

var $options = {
        imuiAttachFile:{
            path: "ui/richtext/sample/show_storage",
            showStorage: true
        }
};

var $options = {
        imuiAttachFile:{
            path: "ui/richtext/sample/show_storage",
            showStorage: true
        }
};

<imart type="imuiRichtextbox" plugins="imuiAttachFile" toolbar1="imuiAttachFile" pluginsOption=$options />

<imart type="imuiRichtextbox" plugins="imuiAttachFile" toolbar1="imuiAttachFile" pluginsOption=$options />

var $options = {
        imuiAttachFile:{
            path: "ui/richtext/sample/authz",
            authzUri: "service://richtext/auth service://richtext/auth2",
            authzAction: "execute execute",
            authzCondition: "or"
        }
};

var $options = {
        imuiAttachFile:{
            path: "ui/richtext/sample/authz",
            authzUri: "service://richtext/auth service://richtext/auth2",
            authzAction: "execute execute",
            authzCondition: "or"
        }
};

<imart type="imuiRichtextbox" plugins="imuiAttachFile" toolbar1="imuiAttachFile" pluginsOption=$options />

<imart type="imuiRichtextbox" plugins="imuiAttachFile" toolbar1="imuiAttachFile" pluginsOption=$options />

// 本サンプルでは decoration 属性に full を指定したときと同様の plugin に imuiDataUrl を追加した場合の指定を行います
var $plugins = '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, | ,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';

// 本サンプルでは decoration 属性に full を指定したときと同様の plugin に imuiDataUrl を追加した場合の指定を行います
var $plugins = '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, | ,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';

<imart type="imuiRichtextbox" plugins=$plugins toolbar1=$toolbar1 toolbar2=$toolbar2 toolbar3=$toolbar3 />

<imart type="imuiRichtextbox" plugins=$plugins toolbar1=$toolbar1 toolbar2=$toolbar2 toolbar3=$toolbar3 />

<?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>

<?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>

<imart type="imuiRichtextbox" plugins="imuiDataUrl" toolbar1="imuiDataUrl" />

<imart type="imuiRichtextbox" plugins="imuiDataUrl" toolbar1="imuiDataUrl" />

<imart type="imuiRichtextbox" readonly="true" id="target" noBorder="true">sample</imart>

<imart type="imuiRichtextbox" readonly="true" id="target" noBorder="true">sample</imart>

<?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>

<?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>