Category: CKEditor

  • Drupal and CKEditor, setting default values in the image properties dialog

    Copy this file to the root of your theme directory:

    /sites/all/modules/ckeditor/ckeditor.config.js

    Edit the file and add the following code which will give a default value to HSpace, VSpace and ensure Bootstrap’s “img-responsive” class will be added to all images:

    CKEDITOR.on( 'dialogDefinition', function( ev )
      {
        var dialogName = ev.data.name;
        var dialogDefinition = ev.data.definition;
     
        if ( dialogName == 'image' )
        {
          //set the margins
          var infoTab = dialogDefinition.getContents( 'info' );
          var hspaceField = infoTab.get( 'txtHSpace' );
          var vspaceField = infoTab.get( 'txtVSpace' );
          hspaceField['default'] = '10';     
          vspaceField['default'] = '10';
    
          //set the default class for images
          var advTab = dialogDefinition.getContents( 'advanced' );
          var stylesheetClassesField = advTab.get( 'txtGenClass' );
          stylesheetClassesField['default'] = 'img-responsive';
        }
      });

    Lastly, edit your CKEditor profiles and set “Load ckeditor.config.js from theme path” to “Yes”:

    /admin/config/content/ckeditor/edit/Advanced

    Done.