I found no way to upload images into the text area.
Unlike FCKEditor, not upload tab is available in the browser unless the commercial CKfinder is available.
I installed IMCE, but it only looks at the server, not at the user's desktop.

Thanks for help

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

jvieille’s picture

To be more precise concerning IMCE: the upload tab does not show up when selecting IMCE
It is present when selecting CKFinder as the CKeditor file browser (even if not installed)

choofins’s picture

-- moved my comment to the reply thread above

choofins’s picture

You have to hit Browse Server, then use the upload tool provided inside the IMCE window. Once you have selected the appropriate image, hit the "send to ckeditor".

jvieille’s picture

OK, I made it!

However, it is much too clumsy for ordinary users.
This convoluted handling would deserve a special help page explaining how to insert images in the browser...

What I look for is not a sophisticated tool as IMCE, just an uploader, I mean a buttton that opens the file browser in my desktop - exactly what was available in FCKeditor by default.

If I enable CKFinder as the CKeditor browser in the module admin without installing it, I get the upload tab and the upload button exactly as in FCKeditor, I can select files, but that then it fails at "sending to the server"

If CKFinder is installled, everything works fine as with FCKeditor, but I get the suspicious "This is the demo version of CKFinder" when hitting the "Browse Server" buttons, which nobody should ever use.

In short, how to get image upload working without all the complexity / cost of server side browsing?

jvieille’s picture

Title: Get an image upload function in CKeditor (True: it does not readily have it!) » I found a solution

Replying to myself, to keep the info in case I forget or those who face the same issues:
1) Cannot afford CKFinder
2) IMCE integration is too clumsy for simply uploading images
3) What you expect is FCKeditor-like basic image upload feature

The solution:
1) install both CKFinder and IMCE
2) Validate allow "CKFinder file uploads" permission
3) in the Dupal Edit CKeditor Profile admin page, section File Browser setting
- File browser type (Link dialog): CKFinder
- File browser type (Image dialog):IMCE
- File browser type (Flash dialog): IMCE

This way, when clicking on the CKeditor Image button, you will get the Upload tab which will correctly do the job of sending the file you select in your desktop computer to the image setting tab and into the editor writing area
When hitting any Browe server" button, you will open the IMCE browser
You will never see/use the commercial CKfinder ajax window.

Hope this helps

PS
This is little bit of hacking, but it is really unacceptable that an editor does not have such basic feature.
Maybe the Drupal CKeditor Module could complement CKeditor by providing such very basic and simple feature?
In fact, it should not be much to do as the upload tab and button normally show up (when enabling CKfinder without installing it), the problem is just getting the selected file actually uploaded and passed to the image tab.

jvieille’s picture

Title: How to upload images? » Get an image upload function in CKeditor (True: it does not readily have it!)
zdean’s picture

Title: I found a solution » Get an image upload function in CKeditor (True: it does not readily have it!)

I agree that this feature is needed. You could use one of the supported systems for an "editor" type role where you only need to train a small number of users. But if you want to allow a broader user base to be able to upload images from their desktops into their content types (for example, blog entries), then the current system is far too complicated to use.

You should simply be able to click a button, a desktop browser window opens, select an image, it gets inserted into the text area.

eforth’s picture

Just followed these quick n' easy steps and got everything working. Thanks!

zdean’s picture

eforth: did you intend to include a link?

Danny_Joris’s picture

jvielle : I don't see the 'hack' in your comment #5. That's how imce is suppost to work. I agree that this isn't the easiest way. It's kinda confusing for some of my clients. (2 popup windows that don't look alike just to get an image in your text) . It would be a great improvement if that image button in CKeditor would directly open the IMCE page. This is also a question to the maintainer of this module: is it possible to have a functionality that opens the imce window directly when clicking the image button in ckeditor?

I am still looking for a one button solution as well. This would need to work with imagecache , so huge photo's would be automatically re-sized to a smaller size. Actually I found this module that does this, but for me it goes one step too far in simplicity. :) It's http://drupal.org/project/dragndrop_uploads . You drag the image from the desktop into your textarea and it resizes automatically with imagecache. Very cool, but just a single button to browse trough the desktop would be perfect.

jvieille’s picture

The "hack" is that I installed CKfinder only to get the upload button working, without using CKFinder itself.
All what I needed was the same behavior than FCKEditor: selecting the third tab "Upload", hit "Select file" and then "Send to the server". This directed to the first tab where the image appears and can be sized / positioned. My dumbest users could make it (though this could still be simpler....)

The problem is that the other tabs "Link" or "Advanced" as well as the first tab itself have browser buttons.
If I do nothing else, CKFinder appear when hitting these buttons - that are useless to me and would suggest buying CKfinder.

The admin page does not allow to disable these extra functionalities:
- if you don't select a "File browser type (Link dialog)", the upload tab does not appear.
- If you select one, you must configure the 2 other selection for "Image Dialog" and "Flash Dialog"

So, installing IMCE allows to select another -not commercial - browser in case of someone would play with these buttons.

To make a long story short, I had to install both CKFinder and IMCE without using any of their functionality - just making this damned "Select file" button working

capellic’s picture

I'm going to ditto the need for a simple upload and management tool. I used to use the quick upload feature in FCKEditor. I'm not opposed to IMCE, but it needs an UX overhaul.

capellic’s picture

I'm not opposed to IMCE, but it needs an UX overhaul.

I bit the bullet and experimented with the IMCE editor and the good news is that you can theme it. I spent a little time making CSS overrides including hiding the log and some of the stat stuff that just adds visual noise IMHO. I also copied the imce-content.tpl.php file into my theme directory and made some hard style overrides because CSS wasn't getting it done.

BEWARE: Do NOT remove any DIVs or change IDs. There's a lot of jQuery in this module and it's looking for objects. If you remove them, you will get some odd behavior.

Danny_Joris’s picture

FileSize
90.79 KB

I themed imce for the first time as well a few days ago. I made it look more like ckeditor because 1) imce is ugly. 2) to give my editor a feel of consistency. To let him feel that imce is actually the same as ckeditor. I only used css and I moved an image file (sprites.png) from ckeditor karma theme to my admin theme. The css might look a bit raw or tweaky sometimes.

Those imce handle bars are only 1px. It's almost impossible to grab them. :/ I made them somewhat thicker.

Image preview in attachment.


/** remove imce's log display **/

body.imce #log-wrapper {
display: none;
}

body.imce #log-prv-wrapper #log-resizer.x-resizer {
display: none;
}

body.imce #log-clearer {
display: none !important;
}


/** remove imce's navigation display **/


body.imce #navigation-wrapper
{
  display:none;
}


body.imce .x-resizer
{
  display: none;
}
body.imce .y-resizer
{
  height: 6px;
  background-color: white;
}
body.imce #log-prv-wrapper
{
  border: none;
  background-color: #EBEBEB;
}
body.imce #browse-wrapper
{
  border: none;
  
}
body.imce table#file-header td:hover,
body.imce table#file-header td.asc,
body.imce table#file-header td.desc
{
  cursor: pointer;
  text-decoration: underline;
  color: #027AC6;
}
body.imce table#file-header td
{
  color: #027AC6;
} 


body.imce ul.secondary li
{
  border: none;
}

body.imce #file-list tr:hover,
body.imce tr.highlight
{
  background-color: #FFFFCC;
}
body.imce tr.selected td {
background-color: #fffaad;
}
body.imce table#file-list
{
  border-top: 2px solid #C0C0C0;
}
body.imce table.files td
{
  border-top: 1px solid #C0C0C0;
  border-bottom: 1px solid #C0C0C0; 
  cursor: pointer;
}




body.imce a,
body.imce div
{
  outline:none;
}



body.imce ul.secondary li {
margin:0 0.4em;
padding: 0px;
}


body.imce ul#ops-list li a,
body.imce ul#ops-list li a:hover,
body.imce ul#ops-list li a:link,
body.imce ul#ops-list li a:visited,
body.imce ul#ops-list li a:active
{
-moz-border-radius:5px 5px 5px 5px;
background:url("images-imce/sprites.png") repeat-x scroll 0 -1069px transparent;

cursor:pointer;
padding:5px 10px;

color:#000000;
font:12px Arial,Helvetica,Tahoma,Verdana,Sans-Serif;
text-align:left;

text-decoration:none;

white-space:nowrap;
width:auto;
vertical-align:baseline;
height:auto;
margin:0;
border-collapse:collapse;
border:0 none;
}



body.imce ul#ops-list li#op-item-delete a,
body.imce ul#ops-list li#op-item-delete a:hover,
body.imce ul#ops-list li#op-item-delete a:link,
body.imce ul#ops-list li#op-item-delete a:visited,
body.imce ul#ops-list li#op-item-delete a:active
{
background:url("images-imce/sprites.png") repeat-x scroll 0 -1106px transparent;
}

body.imce ul#ops-list li a:hover,
body.imce ul#ops-list li#op-item-delete a:hover
{
background-position:0 -1181px;
}

Cheers,
Danny

capellic’s picture

@Danny... amazing! Thanks for sharing, really helpful.

Danny_Joris’s picture

You're most welcome. Glad I can help. :)

jcisio’s picture

Have a themed IMCE is nice, but is it possible to have a button, click on that shows directly the IMCE browser instead of the default image button?

mephir’s picture

@jcisio: yes but you need to write plugin with opening window, if i had some free time in the weekend i would write small plugin with it.

Danny_Joris’s picture

That would be really cool! :)

jcisio’s picture

That would be great, @mephir. I'd tried to write a plugin for CKEditor from the _example folder, but it was too complicated for me, and not much docs for the 3.x version now. However I'm willing to test it ;)

mephir’s picture

FileSize
1.34 KB

Attached plugin, for install:

  1. extract archice to ckeditor/plugins, next to drupalbreaks etc...
  2. edit ckeditor.config.js and add lines below(next to media upload):
      config.extraPlugins += (config.extraPlugins ? ',imce' : 'imce' );
      CKEDITOR.plugins.addExternal('imce', Drupal.settings.ckeditor.module_path + '/plugins/imce/');
  3. add button IMCE into toolbar, also in ckeditor.config.js
  4. refresh page with editor and enjoy

Afterword:
This plugin isn't part of ckeditor module, so if you have some problems with it please mail me or write in this issue. If someone have better idea for icon i'm open for any suggestion, i'm not graphic designer. Also this think concern about adding no-images files. Now plugin creates url to this file. Maybe someone have better proposition for it. Popup window height and width depends on ckeditor filebrowsers size.

mephir’s picture

FileSize
1.32 KB

Version without unnecessary code, sorry i forgot about cleanup.

jcisio’s picture

Status: Active » Needs work

Thanks, mephir. Just test on Firefox 3.6 and Safari 4.0, works great. About the icon, at the moment I think we can just use the Image icon (and hide the image button, as it is functional duplicate). Or there is a work on progress at http://drupal.org/node/606490 about Drupal icons and we can take one (it should be GPL'ed).

For content types different than images, I think by now it could simply ignore urls that are not ended with .jpg/png/gif etc. Images are far more frequently used than flashes or files, and simple image upload/insert has more sense (and so is the title of this issue ;-). I'm OK for the current behavior (link to files).

A little more about the output: I think the default syntax in CKEditor is style="width:...px;height:...px;" instead of the usage of width/height properties. The alt should be optional in the module settings, as this property can be use for image description (not display if empty) by other image-enhanced modules like lightbox-enabled, auto caption...

Thank you again for this plugin. I can change all things mentioned above in the imce/plugin.js file ;-)

mephir’s picture

Today evening i will make some changes to plugin, because hockey match between USA and Canada is loom large in my mind. By the way html writer change width and height attributes into style definition.

mephir’s picture

Status: Needs work » Active

Imce with own button moved to #721914: Opening IMCE window without Image Dialog, maybe it will be merged into dev release.

mephir’s picture

Status: Active » Fixed

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

FreddieK’s picture

I really like the look but can't find where the file sprites.png you mention is to be found?

Danny_Joris’s picture

It's part of ckeditor. You'll find it in ckeditor/skins/kama/images/sprites.png. Copy it to somewhere in your theme and refer to it from there.

FreddieK’s picture

Thanks. I forgot that CKEditor is a library as well as a module.

ShannonK’s picture

subscribe

kenorb’s picture

momper’s picture

subscribe

kruser’s picture

subsribe

narendrak’s picture

Will CKfinder Demo version work fine after site is live? ( only for simple file upload feature ) or do we need to purchase license copy?

okdnet’s picture

I too couldn't get IMCE working with CKEditor (the "missing button"). I started looking for answers here and experienced much confusion like others. I finally figured out where I was having a problem. I had installed WYSIWYG and the CKEditor LIBRARY, but NOT the CKEditor module. That's where the confusion starts, because CKEditor WORKS at that point.

I didn't even know I was missing the module (and corresponding settings). I'm certain others have done the same. It wasn't until I started to try and get IMCE working, and reading posts here telling me to change settings that I couldn't even get to that I figured it out. I downloaded and installed the CKEditor module, completed the profile settings, and then figured out what others were talking about with the counter-intuitive ImageButton>> Browse Server>>Upload Button workflow.

Perhaps the WYSIWYG module could perform a better "check" and warning (it shows CKEditor installed without any hint the module is missing).

jcisio’s picture

Why do people keep subscribing a closed issue?

@okdnet: as we were saying above, enable the "imce" plugin to have a direct image upload button. There is a separate issue for this #721914: Opening IMCE window without Image Dialog

Nolza’s picture

@36: I had the exact some problem! thanks for clarifying.... took a load off the growing pain in my head. Configuration definitely needs to be made more intuitive... it's really too confusing!

jonz35’s picture

FileSize
1.47 KB

Wrote a small module to enable the upload tab in the "insert flash" box. Works with wysiwyg-6.x-2.1 and ckeditor 3.4.2. Puts files in $filespath/flashfiles. Enable it, go to wysiwyg configuration and enable simpleupload_wysiwyg for ckeditor. Made specific for my needs, so a few modifications will probably be needed if you want to use it. Haven't tested it for image uploads but it probably works for that as well. Please notify me if you extend the module to work in a more general way and for more editors.

jonz35’s picture

FileSize
1.51 KB

Added automatic directory creation

jcisio’s picture

That simply does not work here. You are in the wrong issue queue.

victor871129’s picture

Simplicity, thats why google, apple and facebook make lots of money. +1 to:http://drupal.org/project/dragndrop_uploads

Luciuz’s picture

jonz35
i "install" , "plug" and "set permisssions" but nothing happends. Not news in image dialog box, not news in tools panel.

sathishs’s picture

How to list the images in the CKEditor by using the CKFinder

Luciuz’s picture

bad idea

damiano_81’s picture

CKfinder bad idea, i prefer CKuploader - http://www.ckuploader.com

topik’s picture

i have same issues for this module.. use imce and ckeditor
use ckfinder
use ckeditor at file browser
use IMCE
use IMCE at file browser

twood’s picture

I found that it worked when I switched to Filtered HTML... otherwise, the "Browse server" button did not show up.

doka_md’s picture

You can use DOKSoft Quick image upload plugin.
It does not have images catalog, but provides very simple (in two clicks) uploading and inserting images to page.
It is the best for letting visitors ability to attach images in there posts, but can be useful and for site administrator or content managers.

shimas’s picture

hi freindes
install library then install ckeditor (all/library-> ckeditor 7)then in ckeditor->ckeditor copy and past ckeditor standard... then install (IMCE Wysiwyg API bridge and Wysiwyg) in library too

to have image bottom in ckeditor
configuration->ckeditor->advanced->edit->File browser setting: change File browser type (Image dialog window)&File browser type (Flash dialog window) to IMCE
sorry for my bad english explain:))))

jvieille’s picture

We seem to have alternatives to the complex CKFinder (not free) +IMCE settings
- DOKSoft Quick image upload plugin http://doksoft.com/soft/ckutils/index.html
- CKuploader plugin - http://www.ckuploader.com

However, they cannot work out of the box in a Drupal environment as the path setting for uploaded images is global.
The CKEditor Drupal module has a setting for the CKFinder image path

How to make them upload images in a site specific directory (thinking of multi-site configuration)

doka_md’s picture

jvieille, DOKSoft plugins has ability to easely configure paths in config.php. Just two variables to change and all works.
Now the process of installation of this plugin on Drupal is described here: http://doksoft.com/soft/ckutils/bundle-install.html
See (4) in this manual to know how to configure paths.

GaëlG’s picture

Issue summary: View changes

This might be an answer too: CKEditor Insert.