Welcome to the Question2Answer Q&A. There's also a demo if you just want to try it out.
+12 votes
in Plugins by
retagged by

Hi, I thought it would be good for q2a and the community to share what took me nearly 1 day of work.

The goal: A simple CKEditor (basic link field, basic image upload) - sounds simple but isn't.

Here is the config.js that you need to achieve this (with some code commented out that might help too):

CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here. For example:
    config.language = 'de';
    // config.extraPlugins = 'my_own_plugin'; // if you have any plugin
    // config.uiColor = '#AADC6E';
    // config.image_previewText = CKEDITOR.tools.repeat(' Hier steht dann dein guter Text. ', 8 );
    // config.contentsLanguage = 'de';

    config.height = 350; // 350px, specify if you want a larger height of the editor

    config.linkShowAdvancedTab = false;
    config.linkShowTargetTab = false;

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;
    //var dialog = CKEDITOR.dialog.getCurrent();
    //alert( dialog.getName() );

    // Check if the definition is from the dialog we are interested in (the 'link' dialog)
    if(dialogName == 'link') {
        dialogDefinition.onShow = function () {
            var dialog = CKEDITOR.dialog.getCurrent();
            //dialog.hidePage( 'target' ); // now via config
            //dialog.hidePage( 'advanced' ); // now via config
            elem = dialog.getContentElement('info','anchorOptions');    
            elem = dialog.getContentElement('info','emailOptions');    
            var elem = dialog.getContentElement('info','linkType');    
            elem = dialog.getContentElement('info','protocol');    
    /* if you have any plugin of your own and need to remove ok button
    else if(dialogName == 'my_own_plugin') {
        // remove ok button (this was hard to find!)
        dialogDefinition.onShow = function () {
this is a hack
    else if(dialogName == 'image') {
        // memo: dialogDefinition.onShow = ... throws JS error (C.preview not defined)
        // Get a reference to the 'Link Info' tab.
        var infoTab = dialogDefinition.getContents('info');
        // Remove unnecessary widgets
        infoTab.remove( 'ratioLock' );
        infoTab.remove( 'txtHeight' );         
        infoTab.remove( 'txtWidth' );         
        infoTab.remove( 'txtBorder');
        infoTab.remove( 'txtHSpace');
        infoTab.remove( 'txtVSpace');
        infoTab.remove( 'cmbAlign' );

        dialogDefinition.onLoad = function () {
            var dialog = CKEDITOR.dialog.getCurrent();
            var elem = dialog.getContentElement('info','htmlPreview');    
            dialog.hidePage( 'Link' );
            dialog.hidePage( 'advanced' );
            dialog.hidePage( 'info' ); // works now (CKEditor v3.6.4)
            /*var uploadTab = dialogDefinition.getContents('Upload');
            var uploadButton = uploadTab.get('uploadButton');
            uploadButton['filebrowser']['onSelect'] = function( fileUrl, errorMessage ) {
                dialog.getContentElement('info', 'txtUrl').setValue(fileUrl);
                //$(".cke_dialog_ui_button_ok span").click();

    else if(dialogName == 'table') {



Lines from "var uploadTab = ... " are commented out because the click event leads to a javascript undefined error. Described here (solution pending).

The rest works ;)


Many thanks for your valuable time and contribution!
edited by
Editor doesn't get more simple.
you are right, better to put: How to make Image Dialog and Link Dialog more simple.

To make the CKEditor more simple (i.e. remove unnecessary buttons) you need to change \qa-plugin\wysiwyg-editor\qa-wysiwyg-editor.php from line 136. This is how I did it:

                        // removed Font + FontSize
                        // changed position
                        "['RemoveFormat', 'Maximize'],".
                        // "['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar']".

hope that helps.
edited by
yes thanks!
- both Image Dialog and Link Dialog  and  CKEditor toolbar work perfect.

1 Answer

+1 vote

Great work ! I was looking for all the options but found Your post at time.

It worked after disabling line 4 : 

config.extraPlugins = 'my_own_plugin'; 

and about line 30 : 

else if(dialogName == 'my_own_plugin') { 
        // remove ok button (this was hard to find!) 
        dialogDefinition.onShow = function () { 

Thamk You !

But now there is one remaining problem !

I want autoresize these images, lets say adding some default values for the maximum width, in my case the pictures should be resized to a max width of 400 px,

Do You have a hint for me, where to add this default value ?


+1. After commenting out these lines, editor shows up.
yep, forgot, these lines are for your own plugin. if any :)
changed it in the post above!