Image upload in CKeditor

CKeditor is an open source HTML text editor. For adding CKeditor we need to create a <textarea> element in our web page and call CKeditor script.

We are going to create 3 files ie, ckeditor.html, upload.js, upload.php and an image folder to upload image.
1) ckeditor.html: HTML with a textarea element.
2) upload.js: Script to display CKeditor and Upload tab in image properties.
3) upload.php: Code for uploading images in image folder.

Folder structure:

CKeditor_files

1) ckeditor.html

<!DOCTYPE html>
<html>
    <head>
        <title>CKEditor Image Upload</title>
        <!-- Path to the CKEditor -->
        <script src="ckeditor/ckeditor.js"></script>
    </head>
    <body>
        <form>
            <textarea id="ckeditor"></textarea>
        </form>
        <!-- Upload image scripts -->
        <script src="upload.js"></script>
    </body>
</html>

The upload.js enclose script to replace textarea with CKEditor.

// Replace textarea element with CKEditor
// 'ckeditor', id of textarea element
CKEDITOR.replace( 'ckeditor' );

This will output as:

CKeditor_default

Currently, we don’t have Upload tab for image upload. The upload tab will appear once “filebrowserUploadUrl” or “filebrowserImageUploadUrl” is set.
1) If filebrowserUploadUrl is set, the upload tab will appear in Link, Image and Flash properties.
2) If filebrowserImageUploadUrl is set, the upload tab will appear only in Image properties.

Let’s use filebrowserUploadUrl and change,

CKEDITOR.replace( 'ckeditor' );

to

var base_url = window.location.origin;

// Add Upload tab
CKEDITOR.replace( 'ckeditor', {
    filebrowserUploadUrl : base_url + '/ckeditor/upload.php'
});

CKeditor_upload

Since, we don’t need “Link” tab in Image dialog and “Target” tab in Link dialog, we can remove it by adding the following script.

// Remove Link and Target tab
CKEDITOR.on('dialogDefinition', function( e ) {
    var dialog_name = e.data.name;
    var dialog_definition = e.data.definition;
    
    switch (dialog_name) {
        case 'image': //Image dialog
            dialog_definition.removeContents('Link');
        break;
        case 'link': //Link dialog
            dialog_definition.removeContents('target');
        break;
    }
});

So, the overall code for upload.js will be as:

2) upload.js

var base_url = window.location.origin;

// Add Upload tab
CKEDITOR.replace( 'ckeditor', {
    filebrowserUploadUrl : base_url + '/ckeditor/upload.php'
});

// Remove Link and Target tab
CKEDITOR.on('dialogDefinition', function( e ) {
    var dialog_name = e.data.name;
    var dialog_definition = e.data.definition;
    
    switch (dialog_name) {
        case 'image': //Image dialog
            dialog_definition.removeContents('Link');
        break;
        case 'link': //Link dialog
            dialog_definition.removeContents('target');
        break;
    }
});

To make upload work we will need upload.php, which we used for filebrowserUploadUrl.

3) upload.php

<?php

// Function number as indicated by CKEditor.
$func_number = $_GET['CKEditorFuncNum'] ;

// The returned url of the uploaded file
$url = '' ;

// Optional message to show to the user (file renamed, invalid file, not authenticated...)
$message = '';

// In CKeditor the uploaded file was sent as 'upload'
if (isset($_FILES['upload'])) {
    
    $name = $_FILES['upload']['name'];
    $temp_name = $_FILES['upload']['tmp_name'];
    
    // If filename exists then append number '1' and increment it
    $actual_name = pathinfo($name, PATHINFO_FILENAME);
    $original_name = $actual_name;
    $extension = pathinfo($name, PATHINFO_EXTENSION);
    
    $count = 1;
    while(file_exists('image/' . $actual_name . "." . $extension)) {
        
        $actual_name = (string)$original_name . $count;
        $name = $actual_name . "." . $extension;
        $count++;
        
    }
    
    // Upload file
    move_uploaded_file($temp_name, 'image/'. $name);
    
    // Get base url
    $base_url =  "http://" . $_SERVER['SERVER_NAME'];
    
    // Build the url that should be used for this file   
    $url = $base_url . "/ckeditor/image/" . $name ;
    
} else {
    
    $message = 'No file has been sent';
    
}

// We are in an iframe, so we must talk to the object in window.parent
echo "<script type='text/javascript'> window.parent.CKEDITOR.tools.callFunction($func_number, '$url', '$message')</script>";

?>

Note: Don’t forget to provide the permissions for image folder.

Reference: Using your own Uploader in CKEditor

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s