Hiding rich text editor buttons - xmpie-users/uStore-js GitHub Wiki

Sometimes, you want to provide customers with the Rich text editor (RTE) but allow them to change only certain text attributes.

Since the RichTextEditor (RTE) is inside of an iFrame all regular JavaScript DOM manipulations are not working. You need to inject CSS changes to the iFrame in order to change elements inside of there.

Also, the JavaScript needs waits until the iFrame is loaded and then replace the CSS you want changed.

In the example below, "#ctl00_cphMainContent_ucDialCustomization_Duc18408_uEditRTF_IFrame" is the ID of the iFrame that shows the RTE. It searches for the ID #colors and adds "display:none" to it. This way the color selection disappears and so the user cannot change the text color:

<script type="text/javascript">
window.setTimeout(function(){
  $("#ctl00_cphMainContent_ucDialCustomization_Duc18408_uEditRTF_IFrame").contents().find("#colors").css("display","none");
}, 1000);
</script>

In the example below all RTE dials will have their colour buttons hidden including the palette control

window.setTimeout(function(){
  $("[id^=ctl00_cphMainContent_ucDialCustomization_Duc]").contents().find("#btnTextColorMenu").css("display","none");
  $("[id^=ctl00_cphMainContent_ucDialCustomization_Duc]").contents().find("#colors").css("display","none");
}, 1000);	
</script>

For information on how to add JavaScript to your store: How to add JavaScript to a storefront.