Resizing the rich text editor - xmpie-users/uStore-js GitHub Wiki

By default, the rich text editor (RTE) is placed into the customization step at 445 x 280 pixels.

To change the size, first load the storefront page showing your RTE, then view the source of the page in your browser and identify the ID of the RTE. It will be something like this:

<iframe src="/uStore/UIControls/uEditRTF_IFrame.aspx?DialId=12176&
  OrderProductID=2191&ProductID=17&Enabled=true&Width=445&Height=280"
  id="ctl00_cphMainContent_ucDialCustomization_Duc12176_uEditRTF_IFrame" width="500px" height="220px" 
  marginheight="0" marginwidth="0" frameborder="0" scrolling="no"> </iframe>

Please note the actual height and width in the source URL (In this case: Width=445&Height=280) if these defaults are different, you will need to make the necesary adjustments in the code bellow

In the above HTML example, the ID you would need is ctl00_cphMainContent_ucDialCustomization_Duc12176_uEditRTF_IFrame. So view source on your page and write this down.

Also, write down your exact product name - note it is case sensitive.

Then go to the store on uStore Admin and select Add Javascript to Storefront, put in the below code:

<script type="text/javascript">
$(document).ready(function() { 
  var productName = "My Product";  //replace with the name of your product
  var newWidth = 445;  //replace with you desired width
  var newHeight = 280;  //replace with you desired height
  var dialID = "ctl00_cphMainContent_ucDialCustomization_Duc12176_uEditRTF_IFrame";  //replace with your dial id

  var pathname = window.location.pathname.toLowerCase(); 
  if (pathname.indexOf("customization.aspx") > 0) {
    if ($("#ctl00_containerPageProductName").html().indexOf(productName) >= 0) {
      $("#" + dialID).hide(); 
      $("#" + dialID).height(newHeight+20); 
      $("#" + dialID).one("load", function() {
        var result = $("#" + dialID).attr("src").replace("Width=445&Height=280", "Width=" + newWidth + "&Height=" + newHeight);
        $("#" + dialID).attr("src", result); 
        $("#" + dialID).show(); 
      });
    } 
  } 
});
</script>

Make sure you replace the productName, dialID, newWidth and newHeight variable values with your values.

⚠️ **GitHub.com Fallback** ⚠️