Latest revision as of 15:06, 16 January 2010

CKEditor has been built with customization and flexibility in mind. These aspects have also being considered for its most basic aspects, like its installation files location, which can be also fully customized.

The Files Loaded from the Server

To create editor instances in a page, developers must include the ckeditor.js file into it. This file contains the core code of the editor. It creates editors in the page, and automatically loads all necessary files to make them run. The following is a list of files that are generally loaded:

• Configurations file.
• Skin files, which include CSS and eventually JavaScript.
• Language files.
• Plugin files.
• Dialog files.
• etc...

In a standard installation, not all the above files are loaded and all of them are located inside the CKEditor installation folder. Other installations may load files from other folders also, depending on the configurations and customizations.

While the path and the file name of some of the editor files are customizable (like configuration files), others are quite standard and fixed. For example, the English language files will always come from the "lang" folder, with file name en.js, while the main skins file for the Kama skin comes from "skins/kama/editor.css".

Understanding the Files Loading

By default, the editor core code uses the CKEDITOR.getUrl function to load files. This function transforms editor relative paths into full URLs pointing to resources in the server. Additionally, it appends the editor timestamp to the URL querystring, providing the anti-cache feature.

For example, calling CKEDITOR.getUrl('lang/en.js') returns "http://www.example.com/ckeditor/lang/en.js?t=A067", if using CKEditor 3.1, installed in the "/ckeditor" folder of the www.example.com web site.

Manipulating URLs

CKEditor offers a simple way to manipulate the results of the CKEDITOR.getUrl function. It's enough to define a global CKEDITOR_GETURL function in the page. This function will be called by CKEDITOR.getUrl. If anything is returned from it, it will be used as the resolved URL, otherwise the default resolution procedure is used.

For example, the following function sends all language file requests to a PHP script, passing the language code to it. The script could then take the language file code from a database:

<script type="text/javascript">

function CKEDITOR_GETURL( resource )
{
	var match = resource.match( /lang\/([a-z\-]+)\.js$/ );
	if ( match )
		return '/getlang.php?lang=' + match[ 1 ];
}

</script>
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>

In this example, only the language files will be resolved by our function. All other files will have pass though the default resolution process.

Note that the CKEDITOR_GETURL function must be defined before the ckeditor.js loading, otherwise it will be ignored. The above code can be included at the top of the ckeditor.js file also.

Usage Cases

There are several cases that may benefit from this feature. Here we have a list of few of them:

• Point editor core files to be loaded from different directories with different names. For example having the English language file coming from "/mylangfiles/lang_en.js".
• Having all editor files being served by a server process (like loading from the database), instead of having them physically installed.
• Some server applications may avoid directories structures. For example, we could have the English language files renamed to "lang_en.js" and a skin file to "skin_kama_editor.css" (all slashes replaced by underscores).
• etc...