User Tools

Site Tools


how_to:editor_configuration_custom_files

This is an old revision of the document!


GetSimple-CKEditor comes with a default configuration file and with a default stylesheet-file (for the styles-combobox).

You can define your own configuration files which will not be overwritten by GetSimple-Upgrades and which offer some features which are not needed in a standard, stripped-down version.

Standard Configuration File

The standard configuration file, which comes with every GetSimple-Version, is located in the folder yourGetSimpleRoot/admin/template/js/ckeditor and is nearly empty.

It contains only 2 editor-options:

CKEDITOR.editorConfig = function( config )
{
	// Define changes to default configuration here. For example:
	config.removePlugins = 'elementspath,resize' ; // hide element path and resizer
	config.toolbarCanCollapse = false; // hide toolbar collapse button
};

Of couse you could add your additional options here but this file will be overwritten with each update. So better define your own configuration file in a safer location.

Custom Configuration File

To define your customized configuration file is an advantage of CKEditor.

Why do you need such a file? As you saw already, you define a lot of options in the gsconfig.php, so what?

There are some reasons:

  • you want quite a lot of options and it is more comfortable to do this in config.js than in the gsconfig.php
  • you want to define more than options, for example extended dialogues
  • you want to define the HTML-output of the formatter

Here comes your custom configuration. This file is a plain javascript-file.

  1. Take the config.js which comes with GetSimple and rename it, save it in the data- or theme-folder.
  2. edit it and upload it to the desired location at your webserver, check the filepermissions (it must be readable)
  3. define the name and the location of this custom-config-file in the gsconfig.php / EditorOptions

An example:

define('GSEDITOROPTIONS', "entities : false,customConfig : '../../../../theme/yourtheme-folder/yourconfigfile.js',skin: 'v2'
");

This option defines that the custom-config-file with the name yourconfigfile.js is located in the folder of your active theme.

Another option could be:

define('GSEDITOROPTIONS', "entities : false,customConfig : '../../../../data/editorconfig/yourconfigfile.js',skin: 'v2'
");

For this you must create the folder editorconfig in your data-directory and upload the file to that folder.

Example file:

/*
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/
CKEDITOR.editorConfig = function( config )
{
	// Define changes to default configuration here. For example:
	config.toolbarCanCollapse = true,
	config.enterMode = CKEDITOR.ENTER_P,
	config.shiftEnterMode = CKEDITOR.ENTER_BR,
	config.colorButton_enableMore = true,
  	config.bodyId = 'content',
	config.entities = false,
	config.forceSimpleAmpersand = false,
	config.fontSize_defaultLabel = '12px',
	config.font_defaultLabel = 'Arial',
	config.emailProtection = 'encode',
	config.contentsLangDirection = 'ltr',
	config.language = 'en',
	config.contentsLanguage = 'en',
	config.toolbarLocation = 'top',
	config.browserContextMenuOnCtrl = false,
	config.image_previewText = CKEDITOR.tools.repeat('Get-Simple - the best CMS for your purposes. Install it, test it, enjoy it. Free, OpenSource and userfriendly', 50 )
		};
// from  http://help.pixelandtonic.com/brandonkelly/topics/how_do_i_set_output_formatting_writer_rules?from_gsfn=true 
CKEDITOR.on( 'instanceReady', function( ev ) {

var blockTags = ['div','h1','h2','h3','h4','h5','h6','p','pre','ul','li'];
var rules = {
indent : false,
breakBeforeOpen : false,
breakAfterOpen : false,
breakBeforeClose : false,
breakAfterClose : true
};

for (var i=0; i<blockTags.length; i++) {
ev.editor.dataProcessor.writer.setRules( blockTags[i], rules );
}

});

// from  http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Dialog_Customization

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' )
		{
			/* Enable this part only if you don't remove the 'target' tab in the previous block. */
 			FCKConfig.DefaultLinkTarget = '_blank'
			// Get a reference to the "Target" tab.
			var targetTab = dialogDefinition.getContents( 'target' );
			var targetField = targetTab.get( 'linkTargetType' );
			targetField[ 'default' ] = '';
			linkField[ 'default' ] = 'URL';

		} // end dialogDefinition
 
		if ( dialogName == 'image' )
		{
		 dialogDefinition.removeContents( 'advanced' );
		dialogDefinition.removeContents( 'Link' );
		}
 
		if ( dialogName == 'flash' )
		{
					dialogDefinition.removeContents( 'advanced' );
		}
 
	});

Standard Stylesheet

The

Custom Stylesheet

how_to/editor_configuration_custom_files.1305377095.txt.gz · Last modified: 2013/04/19 14:56 (external edit)