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.

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 = ev.data.name; var dialogDefinition = ev.data.definition; // 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.

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





Comments
thaks, but the tabs target or advanced no clean example:
var infoTab = dialogDefinition.getContents( 'target' );
infoTab.remove( 'target');
infoTab.remove( 'targetFrame');
Thanks for posting this, you really helped me!
Prosim pekne, rado sa stalo!
Thank you! This works perfectly!
Thanks for sharing this. I've been all over the internet trying to figure this out.
In my case, I'd like to keep the 'Link Type' menu, but remove the 'Link to anchor in the text' option.
I've been able to do this by hardcoding the link.js file as follows:
I was wondering if you (or anybody) knows a way of doing this from the config.js, as in the above example?
juste un merci en passant !
Exactement ce dont j'avais besoin
Thanks, this worked fine. At least much better than hacking the CKEditor source code ;-)
Hello,
Thanks a lot for sharing this. i've juste a question. I need to remove The input name Title in table dialog. How can i know the dialogName of a dialog and the name of an element in this dialog.
I think that the table dialog's name is 'table' but do you know a way to find this name without just mean it ;)
thanks
Hugo
After hours of searching... thanks for your post!!
Now the only thing left is:
How to remove the okButton and cancelButton from the dialog? (using the config.js of ckeditor).
When using "infoTab.remove( 'protocol');"
you will get the following javascript error:
Error: F is undefined - Source File: plugins/link/dialogs/link.js?t=B8DJ5M3Line: 8
Has anybody found a solution of hiding elements from ckeditor without removing them?