UMass Chan CMS Blog

Current Issue

TinyMCE, the WYSIWYG editor, now adds an attribute to the iframe tag. Whenever content in the WYSIWYG that contains an iframe is edited, TinyMCE inserts the sandbox property. This is for a security update; however, it blocks any url that is not within their allowable list which consists of a few typical sites like YouTube, Vimeo, etc. The allowable list leaves out many sites we need to display.

Workaround 

The button below links to video with instructions on a workaround until this is fixed within the WYSIWYG editor.

The workaround uses an HTML block with the same iframe code. This removes the iframe from the WYSIWYG where TinyMCE adds the attribute. The HTML block is text only, not a WYSIWYG editor, so it does not update the iframe tag.

Outline of steps

• Create a copy of an HTML block
  • NOTE: editors can't create new HTML blocks (admin only feature), but they can be copied. This video shows a folder that already has existing HTML blocks for copying; however, you can do a search at the top of the blocks tree for "HTML" and on the first item, click on the "..." and choose copy. Then navigate to a folder where you wish to paste the copied block.
• Copy the embed code
  edit the page with the iframe, view the HTML source of the WYSIWYG
  • copy the iframe HTML tag
• Paste the embed code in the block
  edit the copied HTML block
  • update the block name
  • delete any content exiting the HTML source property
  • paste the iframe HTML you just copied
  • publish the block
• Add the block to the page
  edit the page again
  • in the WYSIWYG, delete the iframe
  • drag and drop the HTML block where the iframe existing
  • preview the page to make sure all looks good
  • publish your page

Video tutorial