Skip to content

Tyssen Design — Brisbane Tyssen Design logo

[email protected] (07) 3300 3303

Removing unwanted fields from TinyMCE’s image and link popup windows

By /

If you use TinyMCE in your Content Management System (CMS) projects, you no doubt also give clients the ability to add images and links to their content with TinyMCE's Link and Image buttons. But by default, these popup windows come with a variety of fields into which unsuspecting clients can input values which will translate into unwanted code when delivered to the page.

The Link popup window, apart from taking the URL of the file being linked to, will also give the user the ability to add:

  • a _target to force the link to open in a new window
  • a title, and
  • a class.

The Image popup has fields for:

  • the alt attribute,
  • alignment,
  • dimensions,
  • border, and
  • hspace and vspace.

I won't go into discussion here about the merits of including and excluding some or all of the above (although things like hspace and vspace are deprecated and should be controlled by CSS), and reasons to do so may vary from project to project, (e.g. you might want to remove the class field from the Link popup for one site but leave it there for another), but recently I wanted to remove some of these fields, and couldn't find any configuration options that would let me do so.

So what I did, which I must admit is kind of hacky, was to revome the fields from the HTML of the popup windows themselves. These files can be found in your TinyMCE folder in /themes/advanced/ and they're titled image.htm and link.htm.

First of all, I just commented out the rows containing the label and form input from the HTML, but that prevented the popups from submitting their information to the main window properly; the window would refresh, but would return you to the popup window with all the fields blanked out.

The solution turned out to be to remove the comments and instead add display: none inline to the <tr> containing the label/input you wanted to remove. This completely removes the elements from the window, but doesn't trip up TinyMCE which submits the information to main window correctly.

As with any update like this made to core files of a web-based application/plugin/extension etc., you need to remember that you've done it so that you don't undo any changes when you upgrade to a new version. So this solution isn't ideal, but was the only one I could find at the time. If anyone else knows a better way to do it, I'd love to hear from you.

Like to say hello? Give us a call on (07) 3300 3303, send us an email to enquiries@tyssendesign.com.au, or a message by filling in the form below.