Uploading images via CKEditor. How?

By new123456789 on 16 Jan 2013 at 02:47 UTC

I've got the latest version of the ckeditor and ckeditor module. I am only able to include images by linking to them.

How would I go about uploading the images instead?

Comments

I can't seem to find "File

new123456789 commented 16 January 2013 at 03:25

I can't seem to find "File browser settings" in
Administration panel > Configuration > Content Authoring > CKEditor section

Try IMCE

drupalshrek commented 16 January 2013 at 03:34

Yes, it's a bit strange. File upload is not part of CKEditor.

Take a look at adding:
http://drupal.org/project/imce

drupalshrek

Default file manager for

bawoor commented 16 January 2013 at 03:52

Default file manager for CKEditor from same developer is CKFinder, but not free licensed. Use IMCE , its recomended for free using.

ꦱꦠꦽꦶꦪ

Thanks guys I am sort of

new123456789 commented 16 January 2013 at 03:59

Thanks guys

I am sort of getting somewhere.

Disabling the "Dynamic display block" module allowed me to see the "File browser settings"

So now, when I try to opload the image....

Image Info -> Browser Server

I get this error message

The requested page "/sites/all/modules/ckeditor/ckfinder/ckfinder.html?Type=Images&id=Full&CKEditor=edit-body-value&CKEditorFuncNum=3&langCode=en-gb" could not be found.

And when I try:

Upload -> Browse -> Send it to the Server

I get this error message:

Image Source URL is missing.

Should I just try IMCE

new123456789 commented 16 January 2013 at 04:00

Should I just try IMCE instead?

Thanks guys. Ok, so I

new123456789 commented 16 January 2013 at 04:14

Thanks guys.

Ok, so I installed the IMCE module. It then required both IMCE Wysiwyg API bridge, which requires Wysiwyg. Both of which I've now installed and enabled.

Should I now disable the CKEditor module?

If you have installed the

rosborn commented 16 January 2013 at 15:46

If you have installed the CKeditor module, then you don't need the Wysiwyg Bridge - you can enable IMCE for file uploads directly within the CKeditor configuration. I wrote some things to check in the comments to http://drupal.org/node/1772978.

Actually, the bit about giving administer IMCE permissions to everyone is wrong. You have to tailor the profiles in admin/config/media/imce for different user roles.

Thanks for that. I am still

new123456789 commented 16 January 2013 at 22:42

Thanks for that.

I am still getting the "Image source URL is missing" error after trying to Upload an image:

Image Properties - Upload - browse - open - Send it to the Server - OK

I've now disabled the following modules:
IMCE Wysiwyg API bridge
Wysiwyg

And the modules enabled are:
IMCE
CKEditor

I am logged in as an administrator.

The administrator is set to use the Sample profile (in admin/config/media/imce).
In common settings for "Enable inline image/file insertion into plain textareas " I've got:
edit-body, body

What am I missing?

In Image properties, clicking

new123456789 commented 16 January 2013 at 23:10

In Image properties, clicking on Browse Server gives me the following error:

The requested page "/sites/all/modules/ckeditor/ckfinder/ckfinder.html?Type=Images&id=Advanced&CKEditor=edit-body-value&CKEditorFuncNum=3&langCode=en-au" could not be found.

Really Helpful!!

BDivya commented 4 August 2016 at 06:17

Thanks a lot for the information. This seems to be working :)

I am now able to upload

new123456789 commented 17 January 2013 at 04:03

I am now able to upload images to the server in the default/files/pictures directory and then select them via the interface "Image properties - image Info - Browse Server"

However, I would still like an Upload uption in the interface.

What am I missing?

I don't know if this is what

Dollowmite commented 17 January 2013 at 14:08

I don't know if this is what you are looking for, but the Insert Module is easy to use and you upload the image. The only thing is that it's not in the interface of the CKEditor Module

The Upload button should be

rosborn commented 17 January 2013 at 20:15

The Upload button should be on the left of the toolbar in the browser window that you get when you click "Browse Server." It's a two-step process - you upload the file and then click "Insert File" once it's added to the file list (I think at the bottom).

If the button is not there, then you have probably not set permissions in the IMCE profiles properly yet. The quickest way of doing that is to make sure your account has "Administer IMCE" permissions in the main permissions list. However, I think you are meant to set them in the configuration profiles within admin/config/media/imce.

Oh Dear!!!! The Upload button

new123456789 commented 18 January 2013 at 01:13

Oh Dear!!!!

The Upload button should be on the left of the toolbar in the browser window that you get when you click "Browse Server."

Found it!!!

Thank you so much!!!

Normal story for D7

drupalshrek commented 18 January 2013 at 02:51

In Drupal 7 your experience is very typical. Every time I have to install a fresh Drupal 7 I am again shocked that a WYSIWYG editor is not included, and fight to get it all working together. Thankfully, at last, in Drupal 8, a WYSIWYG editor should be in core.

drupalshrek

This might be an answer too:

GaëlG

he/him

French

Lille, France

commented 12 June 2014 at 14:27

This might be an answer too: CKEditor Insert.

https://www.youtube.com/watch

plcarpenter commented 16 July 2014 at 04:59

https://www.youtube.com/watch?v=1VTEI8tNEMw

Watch this YouTube video...it worked perfectly and no code hacking. I spent 2 days going everywhere and trying everything until I found this fix!

And here we are 3 years later

badcrocodile commented 1 March 2016 at 16:40

And here we are 3 years later without a solution to UPLOADING IMAGES INTO A BLOG

=-=

VM commented 1 March 2016 at 19:27

incorrect. there are multiple methods available.

Uploads

fkelly12054@gmail.com commented 12 March 2016 at 15:40

If you go to:

admin/config/content/formats/manage/full_html

you have the option to allow image uploads. Once you do that and go into content authoring, the image button will give you the option to browse for files (jpgs usually) on your local system.

This is on Drupal 8. I am using 8.0.5 right now.

It likely works for other text formats besides full_html but I haven't tested that. I'm admin and the only registered user on my site so I just use full_html.

The only issue I have is that it appears that with JUST ckeditor, you can EITHER turn uploads on (as above) or access images that are already stored on your site but you can't do BOTH at the same time. If you turn uploads off in "admin/config/content/formats/manage/full_html" then you get the option to enter a url in the image box. IMCE seems to allow both, but the images you are accessing from your site then have to be in the public directory.

Ckeditor image upload option | upload image from your local pc

surendra77c commented 22 March 2016 at 11:16

only 2 module is required for this CKEditor and IMCE .

Step - 1
http://xyz.com/admin/config/content/ckeditor/edit/Advanced

Basic setup - > Full HTML { or you choice}
Editor appearance -> Add Imce icon to Toolbar by drag and drop
File browser settings - > File browser type (Link dialog window) {IMCE} | File browser type (Image dialog window) {IMCE}
save the configuration
Step - 2

http://xyz.com/admin/config/media/imce

Configuration profiles - > Click on edit user1 [ check this box : Display file browser tab in user profile pages. ] and save the configuration
Role-profile assignments - > select the dropdown under public files and select user1 as your profiles

Ckeditor and images

fkelly12054@gmail.com commented 22 March 2016 at 13:09

I have added IMCE to the base cdkeditor config, along the lines you suggested. It does solve one problem nicely: you can add image files both by uploading from a local computer (desktop) and by browsing files in the public directory of your site and selecting them. You wind up with two image buttons on your toolbar: one for the base ckeditor and one for IMCE.

That's good as far as it goes. However, in a Drupal 7 site I visit (and have editor but not admin right to), when I click on the image button from ckeditor while I have an image selected in the wysiwyg area I get a nice image editing overlay which allows me to position and size my image. In Drupal 8 on my own site I just get a brain dead overlay that allows me to put in a url or upload a file (one or the other, not both as per previous posts in this thread) and put in a caption and alt field. I can activate the alignment buttons (left, right, center) and select the image and use alignment to position it, but that's about it for editing an existing image.

There are posts in the issues area of Drupal about adding ckeditor plugins to Drupal 8, but they basically require treating the plugins as Drupal contrib modules and then editing the code. I don't want to get into that: first I am not even sure which Plugins would accomplish what I want and second, if Drupal 8 is supposed to be content editor friendly it should not require editing code to install a plugin.

Now in Drupal 8 you can use

birdsnbees commented 1 September 2016 at 00:03

Now in Drupal 8 you can use https://www.drupal.org/project/ckeditor_uploadimage this will enable you to upload images by drag and drop or paste an image from clipboard to your editor as inline image(s).