"<i>CkEditor Is not uploading images and files.<\/i> CkEditor 没有上传图片和文件。<\/b> <i>Even i have no Option to upload image or files<\/i>即使我没有上传图片或文件的选项<\/b>"

Question

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<\/code> 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.

"

Answer 1

You don't need any additional plugin if you just want to upload files. Please, read their documentation: http://docs.ckeditor.com/#!/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.com/Tutorials/86/Upload-files-with-CKEditor

Answer 2

CKEditor is the favorite web-based word processor of almost all the web developers. But the issue is, it does not come with an in-built image uploading feature, ie 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.com/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-comment 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 comes 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.com/2016/09/ckeditor-image-upload-with-kcfinder.html

Answer 3

you have change config for upload

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

dos not work two ckeditor upload image only page

you can 1- get CKEditorFuncNum => int funcNum = Context.GetQueryString("CKEditorFuncNum").ToInt(); then 2- change parameters callFunction

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