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

Thank you for sharing this code.

However, do you have any idea how I can get this stripped editor work ONLY for answers/comments? (I would on the other hand like to have a fully functioning editor for question askers...)

---

Aslan, you would need to duplicate the plugin folder and possibly rename the names in the files, e.g. to "WYSIWYG2". Then make those changes to one copy of the plugin so you can select "WYSIWYG" for questions and "WYSIWYG2" for answers/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!