I have been unable to get inline image uploading to work with my Drupal 7/wysiwyg/CKEditor installation.

CKEditor works and has an image button. I can add images to content via URLs if I upload the image separately.

However, the inline image upload seems missing. Nor is there a file browsing capability that I can find.

I've done some searching of the forums and web, but am yet to find a solution.

I apologize if this is addressed somewhere obvious, and I've just missed it..

Thanks for any assistance.

Joe

Comments

mermentau’s picture

I had the same problem a while back and solved it with the Wysiwyg module , TinyMCE, IMCE Wysiwyg API bridge, and the IMCE module. Those four components working together solved the problem. IMCE Wysiwyg API bridge only has a development version right now but it works.

If someone has an easier way I hope they post it.

jpuchalski’s picture

I figured I was just missing a parameter or permission somewhere.

Looks like its more a matter of missing modules.

I'll give your solution a try and see if that does it.

Thanks!

Joe

gooney0’s picture

Joe,

I needed to set my "cookie domain" in settings.php in order to get some features like this to work.

The CKeditor has some cryptic messages in it's readme files you'll want to read through. There are additional steps required to get everything working.

jpuchalski’s picture

Thanks again, your solution worked.

I installed the following Drupal 7 modules:

WYSIWYG 7.x-2.0
IMCE Wysiwyg API bridge 7.x-1.x-dev
IMCE 7.x-1.1

I copied the CKEditor 3.5 files to /sites/all/libraries/ckeditor

I did have to configure the wysiwyg module and edit the profiles to turn on the buttons I wanted in the editor.

It now seems to work nicely.

I guess I was so spoiled by all the nice new stuff in D7 I just expected file upload to work out of the box :-)

Thanks again,

Joe

ehegwer’s picture

FWIW - Here's the stuff from the Readme file:

To enable the IMCE plugin, do the following:

1. Open the /drupal/modules/ckeditor/ckeditor.config.js file.

2. Uncomment the following lines (removing the "//" characters) in ckeditor.config.js:
//config.extraPlugins += (config.extraPlugins ? ',imce' : 'imce' );
//CKEDITOR.plugins.addExternal('imce', Drupal.settings.ckeditor.module_path + '/plugins/imce/');

3. Add the 'IMCE' button to the editor toolbar.
For example if you have a toolbar with an array of buttons defined as follows:

['Link','Image']

simply add the 'IMCE' button at the end of the array (or somewhere in the middle):

['Link','Image','IMCE']

(remember about single quotes).

But I'm still getting hung up with some paths - It's navigating the server, but not my local HD

oshelot’s picture

Sorry to bother. I'm having the same issues. For #3 above, where do you make this change?

3. Add the 'IMCE' button to the editor toolbar.
For example if you have a toolbar with an array of buttons defined as follows:

['Link','Image']

simply add the 'IMCE' button at the end of the array (or somewhere in the middle):

['Link','Image','IMCE']

Thanks

****EDIT**** -> Found it: go to Configuration -> CKEditor -> Pick a Profile (FULL) -> Edit -> Look under Editor appearance and Modify the 'Toolbar' section!!

macdoggie’s picture

This post really helped me figure out what I was missing. In previous versions of CKEditor, in the Configuration => CKEditor => Edit Profile, the Editor appearance options required an admin to check a box for each tool to be enabled. In the newer CKEditor, this is accomplished via drag / drop from the All Buttons panel.

Click to select the toolbar of choice from the 3 options for the profile you are editing using the links available in the
=> Load sample toolbar: Basic | Advanced | Full

Drag buttons you want to enable to the Used buttons toolbar and save the profile.

As was mentioned in previous posts, no editing of the *.js files is needed in Drupal 7. You will know if your CKEditor is installed and configured properly using the MediaEmbed plug-in if a checkbox appears within the Profiles => Plugin file: MediaEmbed. After enabling the plug-in, re-edit the profile and add the button.

Sorry, but this just wasn't obvious to me and I hope it helps someone else.

shimas’s picture

thanks alot thats right...
imce-wysiwyg-7.x-1.0
tinymice
wysiwyg
imce
imce-wysiwyg
install all above modules
Configuration => CKEditor => Edit Profile
in all 3 advanced advanced2 and full edit FILE BROWSER SETTINGs and chang to IMCE

kondrat’s picture

Thanks
I use free KCFinder for upload image
See my blog http://code201.net/blog/ckeditor.html for this

rpruitt625’s picture

I have this configuration -

  • imce-7.x-1.2
  • wysiwyg-7.x-2.0
  • imce_wysiwyg-7.x-1.x-dev

I am wanting to be able to use it to upload images, but only have 'Browse Server' button. I have no functionality to browse on the local machine. Where should I look to correct?

lelandnielsen’s picture

I have the same problem. Any solution yet?

mgifford’s picture

There's just an extra permission layer somewhere. It's in the issue queue somewhere, sorry I don't have the link handy.

timb’s picture

Clicking the 'Browse server' button will open up the IMCE window. In the upper right corner of this window is an 'Upload' button. Using this button allows you to browse and upload from your local drive. Is this what you have all been looking for?

- bbros.us -
Who else is interested in Lunch?

ExTexan’s picture

Well, personally, I don't want *any* of my users to be able to browse around in the files/folders on my server - much less to be able to select where they upload a given file to.

Is it really so difficult to just have a browse (their local file system) and upload feature? It seems that's all anyone posting in this thread really wants.

It's never too late to have a happy childhood. ;-)

mgifford’s picture

Just adding a link to http://drupal.org/node/1006022#comment-4015862

Where it is also being discussed.

Rodney Strong’s picture

Hi everyone, I just saw a great screencast from the mustardseed group that explains how to easily add inline images and also be able to resize them on the fly using two different modules: Insert and Image Resize Filter.

They support all the major WYSIWYGs. The video is only 8 min long so you should be up and running in no time.

Hope this helps.

URL for the screencast
http://mustardseedmedia.com/podcast/episode29

Insert module
http://drupal.org/project/insert

Image Resize Filter
http://drupal.org/project/image_resize_filter

ap’s picture

I've played around for most of the day trying different configurations.

The one I've found easiest is:
http://drupal.org/project/ckeditor
and
http://drupal.org/project/imce

Both of these have non dev releases. I did not need to edit any files, javascript or otherwise. Everything can be done from withing drupal.

The Wysiwig API http://drupal.org/project/wysiwyg sounds promising as does http://drupal.org/project/imagefield_crop

At the moment I chose against Wysiwig API but may come back in the future. I'm using the ckeditor anyway, even with Wysiwig API. And I didn't want to bother with an IMCE bridge.

TMWagner’s picture

This thread is about inline images for D7.
Mustard seed produces awesome videos, but the one on the one in the link above starts out talking about filefield insert. It unsupported and obsolete.

davidgtuttle’s picture

Did I miss the resolution to this? I'm trying to configure CK Editor and IMCE to play nice together. I have both installed correctly but there are a few problems:
1) I don't see the familiar "Upload to Server" option under CK's image properties
2) I expect that even if I get #1 resolved I will not see the "Send to CK Editor" option under IMCE

What follows is a bit off topic - or rather a broader topic...

Can anyone recommend a better site to find drupal documentation? I can't seem to ever find anything quickly on this site (drupal.org). This thread is a perfect example... I see lots of peripheral information but nothing that directly addresses the issue.

Not to be cynical but I thought this is the type of problem that Drupal 7 was meant to solve. I'm a well seasoned web developer but I've attempted to use Drupal at least 10 times and I always end up choosing another solution because of module problems like this. I cannot think of another CMS that does not have a rich text editor and a image upload feature included in the most basic installation. In fact, most of other CMSs that I have used handle theming, permissions, admin architecture, Rich Text Editor and File management better (compared to Drupal 6 at least, I'm just starting to use 7).

scottsawyer’s picture

David, sorry you are having problems. I some times feel like you with the "module soup" that is Drupal. I actually Google my questions and it often leads me to the documentation, either on or off drupal.org.

If your goal is to upload images to content, I followed the instructions in the CKEditor module (readme.txt) , and I'm using CKFinder to upload the images. The documentation is all in the readme.txt of CKEditor. It is a multi-step process, and I recommend backing up all of your changes when you get it working.

Do you have a specific reason for using IMCE instead of CKFinder?

ScottSawyerConsulting.com

aeternus’s picture

I thought I was getting so close. Followed through all these postings and was able to figure out most of the configuration. I now have an IMCE icon in the CKEditor toolbar and was able to successfully upload an image to my page. However, if you want to adjust the image by using the IMG (Image Properties) tool in CKEditor the initial adjustment works but then the page overlay goes all white and does not allow you to save the page with your image adjustments (ie vertical space, borders, alignment).

I have a basic installation of Drupal 7 with CKEditor, IMCE, IMCE Wysiwyg API bridge and Wysiwyg installed. I have CKEditor set to "FULL html".

Anyone else have this strange overlay, white-out occurrence happening in their development environment?

aeternus’s picture

Fixed this strange bug by uninstalling CKEditor and then re-installing.

danyalejandro’s picture

You could also try using the KCFinder integration module: http://drupal.org/project/kcfinder . It will allow you to insert images into CKEditor through a visual image browser.

cartagena’s picture

Thanks, this KCFinder looks good, I've been trying every image browser module and wysiwyg editor combination over the last couple days trying to find a simple way to upload and insert images and then be able to left or right align them. Nothing has worked. I will try this.

My question: are you using the media module? Even when I disable it it seems to take over any media browser options. I'm wondering if I should just get rid of it but at this point I'm not sure what that will do to the display of images on teh site...

thanks!

Web Building and Design

sandreamapp’s picture

There is no 'browse server ' button in image uploader box.......plz help me to resolve the problem...i am using drupal 7....i have configured the ckeditor,imce,IMCE Wysiwyg API bridge...

sandreamapp’s picture

how to set the cookie domain........
plz say a solution to get a upload icon in the ckeditor

luluwan’s picture

I want to thank you for explaining what you installed. I installed:
imce 7.x-1.5
imce_wysiwyg 7.x-1.x-dev

I already had CKEditor 3.6.2 installed.

All I had to do then was enable them and then go to:
admin-configuration-content authoring-wysiwyg profiles-edit the ckeditor-then click the buttons you want in the buttons and plugins section. Save and I was ready to go.

I spelled out exactly what I did because someone may have given up 10 hours into their search instead of the embarrassing time I spent searching.

The only difference with my ckeditor install is that I had to create a all/libraries folder to put my editor in for it to work because it would not even show up when I put it into the modules folder.

Even though the learning curve is ridiculous for a newby like me, I absolutely love drupal and can't wait to get my site completed and working my way.

iadefy’s picture

I installed the IMCE & CKeditor, then go to Configuration->CKeditor->Editor Appearance, drag the IMCE button from the Toolbar->"All buttons" to "Used buttons". Then in the Plugins section, check the checkbox "Plugin for inserting files from imce without image dialog", and hurray, I can insert inline image to the CKeditor easily now. Hope this info is helpful to those still looking for the modules needed and method to insert inline image.

ctsrutland’s picture

With a clean Drupal 7 installation, I installed CKeditor and IMCE .. but it still didn't work.

Then I discovered that when you installed CKeditor throught the Drupal interface it gets put under 'libraries' but it only works properly if it's put under 'modules'.

It's only taken me 3 hours work to get Drupal to a state where I can easily add basic content. No wonder Wordpress is more popular; I installed that last week and it's a breath of fresh air in comparison.. and I've use Drupal before.

deanflory’s picture

There is a "ckeditor" module folder (module name of "CKEditor - WYSIWYG HTML editor" on http://drupal.org/project/ckeditor and the same one on the ckeditor site labeled "CKEdiort for Drupal" on http://ckeditor.com/download, but check the dates to make sure one isn't updated before the other) that goes in the sites/all/modules folder. Just download it at http://drupal.org/project/ckeditor

There is a "ckeditor" library folder that goes in the sites/all/libraries folder OR the CKEditor module directs you to install it in the sites/all/modules/ckeditor/ckeditor folder, but it also allows you to set the path to the library in the admin interface's Global Profile Settings (/admin/config/content/ckeditor/editg) so you can choose, I recommend the libraries folder so updates to the module don't require you to re-upload or move the library back into the updated module folder. Download it at http://ckeditor.com/download

The javascript library is the top download on the http://ckeditor.com/download page simply called "CKEditor" (on that Web page) and it's the "engine" that powers the module. The module simply makes it possible to use admin pages to configure the ckeditor library to work in your Drupal site, bridges the gap. Both the module and the library are required (note: I did not just say both modules are required).

If you use the module above, don't install & enable the "WYSIWYG" module. If you use the "WYSIWYG" module don't install/enable the "CKEditor - WYSIWYG HTML editor" module. Both use the library "ckeditor" in the libraries folder. The "WYSIWYG" module is available at http://drupal.org/project/wysiwyg and can load CKEditor or another editor of choice within it, but may not have as many options if it's not kept up to date like the "CKEditor - WYSIWYG HTML editor" is (as they create/maintain the library and module). If you need to use different editors for different fields/pages, then you'll HAVE to use the "WYSIWYG" module and install more than one editor in the libraries folder. Both have what appears to be different options within the user interface but some options may be possible in both via editing some files, though that just complicates things for newbies. There are some sub modules for the WYSIWYG module to add functionality, but you'll just have to compare the functionality of those to what is possible in the CKEditor module at the time of your own install to see which works best for you. Elsewhere users had reported that using the WYSIWYG module made it easier to switch to another editor when CKEditor was causing issues. Others elsewhere reported that the CKEditor module worked in overlays (or somewhere) where WYSIWYG was giving them problems (don't hold me to this statement, just compiling notes and with each module update things are likely to change).

If you want to try them both out, keep in mind you can only try one module at a time and you MUST turn the other off (disable & uninstall) or they will interfere with each other and do indeed make things not work for one or both. If something's not working, check that both the CKEditor module and the WYSIWYG module aren't both installed and enabled at the same time on the Modules admin page.

Read the README files for each module to make sure everything is set-up correctly.

If anything I've stated is incorrect, simply correct me with a reply comment, just going off the top of my head as I remember issues when first trying to get CKEditor to work in Drupal 6 and the README(s) didn't give the correct folder structure at that time which severely complicated things to the point of almost giving up on it all. The developers of CKEditor have been trying to make it easier to use CKEditor and CKFinder over the years, hence the separate module from WYSIWYG.

poorva’s picture

I have tried to upload the image with ckeditor vai both methods:

1. WYSIWYG + IMCE + IMCE_WYSIWYG modules (Latest recommended module version today)
2. Ckeditor module + IMCE (Latest recommended module version today)

But still same problem persist that the upload/resize/delete buttons are missing. I have the latest release of Drupal.

Please help me out..

Thanks,
Poorva

poorva’s picture

Finally I got the solution.

Javascript for IMCE module was conflicting with my custom module's Js.

john ackers’s picture

CKEdit and IMCE (file browser and uploader) alone worked well for me.

I downloaded one of the integrated Drupal/CKEdit packages from CKEdit. It contains the the Drupal CKEditor module inside which contains the CKEditor library (see post above).

I was misled by a lot of 2011 posts that talk about editing the ckeditor/config.js to integrate IMCE into CKEdit. But the current versions of CKEdit allow you to select your 'File Browser Type'. Edit your CKEditor profile(s) and change 'File Browser Settings' to IMCE.

One extra IMCE button can be added to the CKEditor toolbar. Clicking on 'browse server' on the existing 'image' button or clicking the 'IMCE' button directs you to the IMCE file browser and from there you can upload files.

ExTexan’s picture

@john, I removed all modules I had tried before (wysiwyg, imce, imce_wysiwyg) in favor of just ckeditor and imce. Now, even though I see the button that, when I hover over it, says "IMCE", it *still* opens the standard image dialog box with the "Browse server" option. That's NOT what I want; I just want a simple browse/upload feature that browses the user's local file system and uploads the file of their choice. What am I missing here?

It's never too late to have a happy childhood. ;-)

plcarpenter’s picture

First of all, I worked on this problem for two days...and tried everything imaginable such as Insert module, ckfinder, tried tinymce, etc., etc., etc., as well as editing all kinds of configuration files.

Then, I found it is possible to use only 2 drupal modules and the ckeditor program There is no need even to install WYSIWYG!

Here is a link to the YouTube video that explains it all. I did it and I am a newbie, so I think this will help anyone.

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

tswiatek’s picture

This is silly. I've used over 5 different CMS systems over the last 2-3 years and I have never had to go through so much to upload an image to a page or article. Most of them have it built in or at least built into the WYSIWIG modules you need to add.

It's going to be 2015, come on.

teggsdgreat’s picture

just go to "admin-config-content authoring-text formats" and uncheck "display any HTML as plan text" this worked for me.

surendra77c’s picture

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