Simple CKEditor - how to modify it to be simple (solution)!

Question

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.getElement().hide();
            elem = dialog.getContentElement('info','emailOptions');    
            elem.getElement().hide();
            var elem = dialog.getContentElement('info','linkType');    
            elem.getElement().hide();
            elem = dialog.getContentElement('info','protocol');    
            elem.disable();
        };
            
    }
    /* 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
           document.getElementById(this.getButton('ok').domId).style.display='none';
        };
    }*/
    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');    
            elem.getElement().hide();
        
            dialog.hidePage( 'Link' );
            dialog.hidePage( 'advanced' );
            dialog.hidePage( 'info' ); // works now (CKEditor v3.6.4)
            this.selectPage('Upload');
            
            /*var uploadTab = dialogDefinition.getContents('Upload');
            var uploadButton = uploadTab.get('uploadButton');
            uploadButton['filebrowser']['onSelect'] = function( fileUrl, errorMessage ) {
                //$("input.cke_dialog_ui_input_text").val(fileUrl);
                dialog.getContentElement('info', 'txtUrl').setValue(fileUrl);
                //$(".cke_dialog_ui_button_ok span").click();
            }*/
        };

    }
    else if(dialogName == 'table') {
        dialogDefinition.removeContents('advanced');
    }        

});
 

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

The rest works ;)

 

Comments

Many thanks for your valuable time and contribution!

---

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:

                $qa_content['script_lines'][]=array(
                    "qa_wysiwyg_editor_config={toolbar:[".
                        "['Bold','Italic','Underline','Strike'],".
                        // removed Font + FontSize
                        //"['Font','FontSize'],".
                        "['TextColor','BGColor'],".
                        "['Link','Unlink'],".
                        // changed position
                        "['RemoveFormat', 'Maximize'],".
                        "'/',".
                        "['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],".
                        "['NumberedList','BulletedList','-','Blockquote'],".
                        // "['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar']".
                        //"['Image','Flash','Table','Smiley','SpecialChar'],".
                        "['Table','Smiley'],".
                        "['SpecialChar']".
                    "]".

hope that helps.

---

yes thanks!
- both Image Dialog and Link Dialog  and  CKEditor toolbar work perfect.

Answer 1

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 () { 
            document.getElementById(this.getButton('ok').domId).style.display='none';
        }; 
    } 

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 ?

 

Comments

+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!