Skip to main content

Remove Tabs and Elements from CKEditor Dialog Window

Sometimes having too many options confuses the end users, or it allows them to play with functions you would rather not expose. This came from a futile attempt to communicate the relevance of using site contact forms instead of exposing email addresses with mailto:// links - bots and spammers harvest these automatically, and then your (and your company's) inbox are overflowing with spam.

Here is how to remove tabs and elements from the heavily JavaScripted CKEditor dialog windows. This approach works with the standalone editor, with Drupal's WYSIWYG module, or the CKEditor module (without WYSIWYG).

For this example we'll use the Link dialog window. Here's what it looks like by default.

Default CKEditor Link dialog window

In the default CKEditor configuration file, such as sites/all/modules/ckeditor/ckeditor.config.js, add the following code:

CKEDITOR.on( 'dialogDefinition', function( ev ) { // Take the dialog name and its definition from the event data. var dialogName =; var dialogDefinition =; // Check if the definition is from the dialog we're // interested in (the 'link' dialog). if ( dialogName == 'link' ) { // Remove the 'Target' and 'Advanced' tabs from the 'Link' dialog. dialogDefinition.removeContents( 'target' ); dialogDefinition.removeContents( 'advanced' ); // Get a reference to the 'Link Info' tab. var infoTab = dialogDefinition.getContents( 'info' ); // Remove unnecessary widgets from the 'Link Info' tab. infoTab.remove( 'linkType'); infoTab.remove( 'protocol'); } });

Effectively we are listening to the event when CKEditor is on, obtaining the name and definitions of the dialog window, then eliminating entire tabs or elements within them.

When the link button is now clicked within CKEditor, a simplified Link dialog window is presented.

Modified CKEditor Link dialog window

Simple, clean, and easy to use. Note that this won't stop a user with View Source capabilities from entering the code by hand.

Share this post