Integration with CKEditor

Configure CKEditor to use the elFilemanager
You must tell CKEditor you where the file manager is.

By code on the fly

CKEDITOR.replace( 'editor1',
    {
        filebrowserBrowseUrl : 'path/to/editor/file', // eg. 'includes/elFinder/elfinder.html'
        uiColor : '#9AB8F3'
    });

or by editing the config.js file

CKEDITOR.editorConfig = function( config )
{
	// Define changes to default configuration here. For example:
	// config.language = 'fr';
	// config.uiColor = '#AADC6E';
	config.filebrowserBrowseUrl = 'includes/elFinder/elfinder.html';
};

Update the elFinder page being called by CKEditor

Replace this code

		<!-- elFinder initialization (REQUIRED) -->
		<script type="text/javascript" charset="utf-8">
			$().ready(function() {
				var elf = $('#elfinder').elfinder({
					url : 'php/connector.php'  // connector URL (REQUIRED)
					// lang: 'ru',             // language (OPTIONAL)
				}).elfinder('instance');
			});
		</script>

with this

		<script type="text/javascript" charset="utf-8">
		// Helper function to get parameters from the query string.
			function getUrlParam(paramName) {
				var reParam = new RegExp('(?:[\?&]|&amp;)' + paramName + '=([^&]+)', 'i') ;
				var match = window.location.search.match(reParam) ;
return (match && match.length > 1) ? match1 : ’’ ;

			}
$().ready(function() {

				var funcNum = getUrlParam(‘CKEditorFuncNum’);
var elf = $(‘#elfinder’).elfinder({

					url : ‘php/connector.php’,

					getFileCallback : function(file) {

						window.opener.CKEDITOR.tools.callFunction(funcNum, file);

						window.close();

					},

					resizable: false

				}).elfinder(‘instance’);

			});

		

1. Discussion

http://elfinder.org/forum/#/20110728/integration-with-ckeditor-759177/

1. Other HOWTOs

http://forrst.com/posts/Elfinder_2_0_beta_filemanager_for_the_web_Ex-PPS