Build your own Custom File Manager for CKEditor using PHP

There are many available extensions that can be coupled with CKEditor for managing files, but if you want to build your own from scaratch, then here are easy steps to help you get started:

Create a file “index.php“, in it, place the code bellow

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPE html>
<html lang="en">
<head>
<title>CKEditor Example</title>
<script src="//cdn.ckeditor.com/4.5.7/full/ckeditor.js"></script>
</head>
<body>
<div class="container">
<div class = "col-md-12">
<br />
<textarea name="termpage">Please type your auction terms and conditions here !</textarea>
<script>
CKEDITOR.replace( 'termpage', {
toolbar: null,
toolbarGroups: null
} );
CKEDITOR.config.filebrowserBrowseUrl = 'browse.php';
CKEDITOR.config.filebrowserUploadUrl = 'upload.php';
</script>
</div>
</div>
</body>
</html>

The CKEditor CDN is updated from time to time so make sure to get the latest CKEditor from here: https://cdn.ckeditor.com/

Now we need to store the files to our server, bellow is a simple PHP code that handles posted files.

Create a file “upload.php“, in it, place the code bellow

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

$funcNum = $_GET['CKEditorFuncNum'];
$url = '';

// Make sure that the anonymous function reference number used to pass the URL of a file to CKEditor is set
if( $funcNum ){

// Check if there is an error
if( ! $_FILES['upload']['error'] ) {

// Replace file name spaces and convert to lower case.
$file = pathinfo( $_FILES['upload']['name'] );
$new_file_name = str_replace(' ', '_', strtolower( $file['filename'] ) ) . '-' . time() . '.' . $file['extension'];

// Check if file was uploaded
if( move_uploaded_file( $_FILES['upload']['tmp_name'], 'uploads/' . $new_file_name )){

$message = 'File successfully uploaded';

// Check if we're running locally or live
if( $_SERVER['SERVER_NAME'] == 'localhost' ) {
$url = $_SERVER['HTTP_HOST'] . '/ckeditor/uploads/' . $new_file_name;
} else {
$url = $_SERVER['HTTP_HOST'] . '/uploads/' . $new_file_name;
}
}

} else {
// Output all errors
$message = 'Oops! Your upload triggered the following error: ' . $_FILES['upload']['error'];
}

// Return the message to the CKEDITOR File Manager
echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction($funcNum, '$url', '$message');</script>";

}

And here’s where you put the codes of your custom file manager.

Create a file “browse.php“, in it, place the code bellow

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example: Browsing Files</title>
<script>
// Helper function to get parameters from the query string.
function getUrlParam( paramName ) {
var reParam = new RegExp( '(?:[\?&]|&)' + paramName + '=([^&]+)', 'i' );
var match = window.location.search.match( reParam );

return ( match && match.length > 1 ) ? match[1] : null;
}
// Simulate user action of selecting a file to be returned to CKEditor.
function returnFileUrl() {

var funcNum = getUrlParam( 'CKEditorFuncNum' );
var fileUrl = '/path/to/file.txt';
window.opener.CKEDITOR.tools.callFunction( funcNum, fileUrl );
window.close();
}
</script>
</head>
<body>
<button onclick="returnFileUrl()">Select File</button>
</body>
</html>

Note that the only functionality privded above is just the browse button and file selection handler, you will have to build your own file browser then receive the file in CKEditor on-click of the “Select File” button.

Do you need help with a project? or have a new project in mind that you need help with?

Contact Me