CKEditor

Notes about CKEditor, a WYSIWYG editor.

Index

Removing complex tabs and validating image alt text

Tested on CKEditor version 3.3.1.5586.

Include this Javascript on whichever pages the editor loads (for Drupal that’s /node/[id]/edit).

The field IDs (e.g. txtBorder, cmbAlign, etc) can be determined from the image.js file provided with CKEditor e.g. [ckeditor]/_source/plugins/image/dialogs/image.js.

<script type="text/javascript">
//<![CDATA[

if (typeof CKEDITOR != "undefined") {
  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 on (the Link dialog).
    if ( dialogName == 'link' )
    {
      // Remove advanced tab (id, name, language direction, title, etc).
      dialogDefinition.removeContents( 'advanced' );

      // Remove target tab (just allows target to be set).
      dialogDefinition.removeContents( 'target' );

/*
Enable this part only if you don't remove the 'target' tab in the previous block.

      // Get a reference to the "Target" tab.
      var targetTab = dialogDefinition.getContents( 'target' );
      // Set the default value for the URL field.
      var targetField = targetTab.get( 'linkTargetType' );
      targetField[ 'default' ] = '_blank';
*/
    }

    if ( dialogName == 'image' )
    {
      // Remove advanced tab (id, language direction, description, etc).
      dialogDefinition.removeContents( 'advanced' );

      // Remove link tab (url, target, etc. An image can be made into a link via link button instead).
      dialogDefinition.removeContents( 'Link' );

      // Get Info tab.
      var info = dialogDefinition.getContents('info');

      // Remove fields from Info tab.
      info.remove('txtBorder');
      info.remove('txtHSpace');
      info.remove('txtVSpace');
      info.remove('cmbAlign');

      // Validate image alt text.
      var alt = i.get('txtAlt');
      alt.validate = CKEDITOR.dialog.validate.notEmpty( 'Alternative Text is missing.');

      // It's better to put the validation error message in the translation file [ckeditor]/lang/[code].js under key "altMissing".
      //alt.validate = CKEDITOR.dialog.validate.notEmpty( 'ev.editor.lang.image.altMissing );

    }

    if ( dialogName == 'flash' )
    {
      // Remove advanced tab (id, title, background colour, etc).
      dialogDefinition.removeContents( 'advanced' );

      // Remove properties tab (scale, script access, window mode, etc).
      dialogDefinition.removeContents( 'properties' );

      // Get Info tab.
      var info = dialogDefinition.getContents('info');

      // Remove fields from Info tab.
      info.remove('hSpace');
      info.remove('vSpace');
    }

  });
}
//]]>
</script>

Setting default table width and height to empty and removing them from the table dialog

Tested with CKEditor 3.5.1.

Add the following Javascript to your CKEditor config file (e.g. config.js).

The dialog, tab names and field IDs (e.g. table, tableProperties, txtWidth etc) can be determined from e.g. [ckeditor]/_source/plugins/table/dialogs/table.js, or by using Firebug (or similar JS debugger in your browser) and adding console.log statements to the JS in order to inspect the elements as you grab them.

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 window you are interested in (the "Table" dialog window).
    if ( dialogName == 'table' ) {

      // Get a reference to the "Table Properties" tab.
      var tablePropertiesTab = dialogDefinition.getContents( 'info' );

      // Set the default value for the width and height fields.
      var widthField = tablePropertiesTab.get( 'txtWidth' );
      widthField['default'] = '';
      var heightField = tablePropertiesTab.get( 'txtHeight' );
      heightField['default'] = '';

      // Remove the fields, as we're using CSS on the site that automatically styles tables.
      tablePropertiesTab.remove('txtWidth');
      tablePropertiesTab.remove('cmbWidthType'); // The units dropdown (e.g. 'pixels').
      tablePropertiesTab.remove('txtHeight');
      tablePropertiesTab.remove('htmlHeightType'); // The units selection (as chosen via width units dropdown).

    }
  });

References: How Do I Set a Default Value for a CKEditor Dialog Window Field?

Last modified: 14/11/2013 Tags:

This website is a personal resource. Nothing here is guaranteed correct or complete, so use at your own risk and try not to delete the Internet. -Stephan

Site Info

Privacy policy

Go to top