Add Custom File Upload In CKEditor

Introduction

CKEditor allows us to add the images and videos in CKEditor content. If you want to add an image in an editor content, just put the URL of your image path in the image dialog popup -- but the real Web Applications user cannot do this. Thus, first upload the files to the Server, followed by the image path, which is automatically bound in an image tag. This post allows you to learn how to add your own fileuploader in CKEditor.

Without File Uploader

In this case, just put the whole path of the image in the URL box and we can get the images inside CKEditor content.

With File Uploader

In this case, we connect our own File Uploader or Server and the image preview pops up with CKEditor dialog. Thus, the user can upload or select the files.

Step 1

Enable browse the Server button.

You can see the above image doesn’t have any browse button in the image dialog. Thus, we must enable the browse Server button to bind custom events. Thus, we add filebrowserBrowseUrl option in config.js.

CKEDITOR.editorConfig = function( config ) {
config.filebrowserBrowseUrl = 'javascript:void(0)';
}

Now, we can get the Browse Server button.

Step 2

Bind CKEditor dialog with Custom File Uploader

Add the codes given below to your CKEditor page.

$(document).ready(function() {
CKEDITOR.replace('myckeditor');
CKEDITOR.on('dialogDefinition', function(ev) {
//dialogDefinition is a ckeditor event it's fired when ckeditor dialog instance is called
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if (dialogName == 'image') { //dialogName is name of dialog and identify which dialog is fired.
var infoTab = dialogDefinition.getContents('info'); // get tab of the dialog
var browse = infoTab.get('browse'); //get browse server button
browse.onClick = function() {
//here we can invoke our custom fileuploader or server files popup
alert('open your file uploader or server files popup');
};
}
});
});

Step 3

Insert path of an image to CKEditor

After uploading or selecting the file, we can get the full path of the image. Finally, insert an image path into the CKEditor dialog URL input box.

//set image path to dialog
var dialog = CKEDITOR.dialog.getCurrent();
dialog.selectPage('info');
var tUrl = dialog.getContentElement('info', 'txtUrl');
tUrl.setValue("put value of image path");

If you want to remove Browse Server Button from Link tab, just add the code given below inside dialogDefinition.

if (dialogName == 'image') {
var linkTab = dialogDefinition.getContents('Link');
linkTab.remove('browse');
}

For more about CKEditor, refer to:

4 Comments

Join the conversation! Your thoughts help the community grow.

Zainab Rasool6y ago
I am not getting browser buttton on adding this to config.js config.filebrowserBrowseUrl = 'javascript:void(0)';
Joginder Banger9y ago
If image will be save in database then plz show how get the image .
- Alagappapandian M9y ago
  Image saved in database, you must get some id or url of the image. so pass the id or image path in ckeditor dialog box. if you get id only you must add baseurl + id. Example for /file/getimagebyid?id='imageid'.
Joginder Banger9y ago
HI thanks for sharing information, but i have question where is the image save?