I am very New to CKEditor. I am using many plugins, for many things. I have added many Uploader plugins but failed. At last i heard about SimpleUploads I bought this plugin in. But i Dont know how to install it on CKEditor. Or if anyone have other method to Upload Images, Files and Embed PDF files. Please Share with me Please.

I am very New to CKEditor. I am using many plugins, for many things. I have added many Uploader plugins but failed. At last i heard about SimpleUploads I bought this plugin in. But i Dont know how to install it on CKEditor. Or if anyone have other method to Upload Images, Files and Embed PDF files. Please Share with me Please.

• javascript
• ckeditor

3 Answers 3

You don't need any additional plugin if you just want to upload files. Please, read their documentation: http://docs.ckeditor./#!/guide/dev_file_browse_upload

All you have to do is to set the config.filebrowserUploadUrl with the path of a server script that will save the uploaded files.

If you have been adding "many Uploader plugins", your configuration might be a mess right now, so it could be a good idea to start from zero and follow a guide like this one: https://www.pluginsforckeditor./Tutorials/86/Upload-files-with-CKEditor

CKEditor is the favorite web-based word processor of almost all the web developers. But the issue is, it does not e with an in-built image uploading feature, i.e. CKEditor does not know how to handle image uploads. So we will assign an assistant who knows how to deal with image uploads and file management.

Our assistant is KCFinder, a free open-source web file manager. It can be integrated into FCKeditor, CKEditor, and TinyMCE WYSIWYG web editors (or your custom web applications) to upload and manage images, flash movies, and other files that can be embedded in an editor's generated HTML content.

I assume you have already set up your CKEditor into your web page. If you haven't done it yet, you can follow the instructions in my previous article: CKEditor: Web-based Word Processor For Your Web Pages

Let's get into our business.

1) Download KCFinder > http://kcfinder.sunhater./download

2) Extract the kcfinder directory in the .zip file to the public directory of your project.

3) Open /public/ckeditor/config.js and add code lines as follows;

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

/* Show these image/flash browsing feature only to Admins */
config.filebrowserBrowseUrl = '/kcfinder/browse.php?opener=ckeditor&type=files';
config.filebrowserImageBrowseUrl = '/kcfinder/browse.php?opener=ckeditor&type=images';
config.filebrowserFlashBrowseUrl = '/kcfinder/browse.php?opener=ckeditor&type=flash';

/* Image/Flash upload feature using kcfinder tool */
config.filebrowserUploadUrl = '/kcfinder/upload.php?opener=ckeditor&type=files';
config.filebrowserImageUploadUrl = '/kcfinder/upload.php?opener=ckeditor&type=images';
config.filebrowserFlashUploadUrl = '/kcfinder/upload.php?opener=ckeditor&type=flash';
};

If you do not want to let your users browse through previously-uploaded files in the server, you can remove/block-ment the first three lines and keep only the last three lines which actually do the uploading part or else you can add user level controls for each feature as per your requirement. Never let users to see the files in your server. If they change the files, other file links can be broken and it will result in huge mess in your application.

4) Activate KCFinder.

By default KCFinder es disabled. To change it, go to kcfinder/conf/config.php and under general settings, change the value of 'disabled' to false. Now, users can upload and manage files (in our case, the image files) on your web application using CKEditor interface.

You can check the detailed steps in my blog article: https://ashenlive.blogspot./2016/09/ckeditor-image-upload-with-kcfinder.html

You have change config for upload

window.parent.opener.CKEDITOR.tools.callFunction(1, xValue, '');

This does not work with two ckeditor upload image, only one by page.

you can get CKEditorFuncNum

int funcNum = Context.GetQueryString("CKEditorFuncNum").ToInt();

Then change parameters callFunction

function SetValue(xValue) {
    // your code here
    window.parent.opener.CKEDITOR.tools.callFunction(@funcNum, xValue,'');
    // your code here
}