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 Uploder
In this case, just put whole path of the image in the URL box and we can get the images inside CKEditor content.
With File Uploder
In this case, we connect our own File Uploder or Server and the image preview pops up with CKEditor dialog. Thus, the user can upload or select the files.
Step 1
Enable browse Server button.
You can see the above image doesn’t have any browse button in the image dialog. Thus, we must enable browse Server button to bind custom event. Thus, we add filebrowserBrowseUrl option in config.js.
- CKEDITOR.editorConfig = function( config ) {
-
- config.filebrowserBrowseUrl = 'javascript:void(0)';
-
- }
Now, we can get 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) {
-
- var dialogName = ev.data.name;
- var dialogDefinition = ev.data.definition;
- if (dialogName == 'image') {
- var infoTab = dialogDefinition.getContents('info');
- var browse = infoTab.get('browse');
- browse.onClick = function() {
-
- 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 CKEditor dialog URL input box.
-
-
- 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: