Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
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
Comment | File | Size | Author |
---|---|---|---|
#40 | simpleupload_wysiwyg.zip | 1.51 KB | jonz35 |
#39 | simpleupload_wysiwyg.zip | 1.47 KB | jonz35 |
#22 | imce-ckeditor.tar_.gz | 1.32 KB | mephir |
#21 | imce-ckeditor.tar_.gz | 1.34 KB | mephir |
#14 | imce_ckeditor.png | 90.79 KB | Danny_Joris |
Comments
Comment #1
jvieille CreditAttribution: jvieille commentedTo 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)
Comment #2
choofins CreditAttribution: choofins commented-- moved my comment to the reply thread above
Comment #3
choofins CreditAttribution: choofins commentedYou 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".
Comment #4
jvieille CreditAttribution: jvieille commentedOK, 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?
Comment #5
jvieille CreditAttribution: jvieille commentedReplying 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.
Comment #6
jvieille CreditAttribution: jvieille commentedComment #7
zdean CreditAttribution: zdean commentedI 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.
Comment #8
eforth CreditAttribution: eforth commentedJust followed these quick n' easy steps and got everything working. Thanks!
Comment #9
zdean CreditAttribution: zdean commentedeforth: did you intend to include a link?
Comment #10
Danny_Joris CreditAttribution: Danny_Joris commentedjvielle : 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.
Comment #11
jvieille CreditAttribution: jvieille commentedThe "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
Comment #12
capellicI'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.
Comment #13
capellicI 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.
Comment #14
Danny_Joris CreditAttribution: Danny_Joris commentedI 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.
Cheers,
Danny
Comment #15
capellic@Danny... amazing! Thanks for sharing, really helpful.
Comment #16
Danny_Joris CreditAttribution: Danny_Joris commentedYou're most welcome. Glad I can help. :)
Comment #17
jcisio CreditAttribution: jcisio commentedHave 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?
Comment #18
mephir CreditAttribution: mephir commented@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.
Comment #19
Danny_Joris CreditAttribution: Danny_Joris commentedThat would be really cool! :)
Comment #20
jcisio CreditAttribution: jcisio commentedThat 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 ;)
Comment #21
mephir CreditAttribution: mephir commentedAttached plugin, for install:
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.
Comment #22
mephir CreditAttribution: mephir commentedVersion without unnecessary code, sorry i forgot about cleanup.
Comment #23
jcisio CreditAttribution: jcisio commentedThanks, 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 ;-)
Comment #24
mephir CreditAttribution: mephir commentedToday 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.
Comment #25
mephir CreditAttribution: mephir commentedImce with own button moved to #721914: Opening IMCE window without Image Dialog, maybe it will be merged into dev release.
Comment #26
mephir CreditAttribution: mephir commentedComment #28
FreddieK CreditAttribution: FreddieK commentedI really like the look but can't find where the file sprites.png you mention is to be found?
Comment #29
Danny_Joris CreditAttribution: Danny_Joris commentedIt'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.
Comment #30
FreddieK CreditAttribution: FreddieK commentedThanks. I forgot that CKEditor is a library as well as a module.
Comment #31
ShannonK CreditAttribution: ShannonK commentedsubscribe
Comment #32
kenorb CreditAttribution: kenorb commented#714810: CKEditor + IMCE - Upload button missing
Comment #33
momper CreditAttribution: momper commentedsubscribe
Comment #34
kruser CreditAttribution: kruser commentedsubsribe
Comment #35
narendrak CreditAttribution: narendrak commentedWill CKfinder Demo version work fine after site is live? ( only for simple file upload feature ) or do we need to purchase license copy?
Comment #36
okdnet CreditAttribution: okdnet commentedI 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).
Comment #37
jcisio CreditAttribution: jcisio commentedWhy 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
Comment #38
Nolza CreditAttribution: Nolza commented@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!
Comment #39
jonz35 CreditAttribution: jonz35 commentedWrote 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.
Comment #40
jonz35 CreditAttribution: jonz35 commentedAdded automatic directory creation
Comment #41
jcisio CreditAttribution: jcisio commentedThat simply does not work here. You are in the wrong issue queue.
Comment #42
victor871129 CreditAttribution: victor871129 commentedSimplicity, thats why google, apple and facebook make lots of money. +1 to:http://drupal.org/project/dragndrop_uploads
Comment #43
Luciuz CreditAttribution: Luciuz commentedjonz35
i "install" , "plug" and "set permisssions" but nothing happends. Not news in image dialog box, not news in tools panel.
Comment #44
sathishs CreditAttribution: sathishs commentedHow to list the images in the CKEditor by using the CKFinder
Comment #45
Luciuz CreditAttribution: Luciuz commentedbad idea
Comment #46
damiano_81 CreditAttribution: damiano_81 commentedCKfinder bad idea, i prefer CKuploader - http://www.ckuploader.com
Comment #47
topik CreditAttribution: topik commentedi have same issues for this module.. use imce and ckeditor
use ckeditor at file browser
use IMCE at file browser
Comment #48
twood CreditAttribution: twood commentedI found that it worked when I switched to Filtered HTML... otherwise, the "Browse server" button did not show up.
Comment #49
doka_md CreditAttribution: doka_md commentedYou 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.
Comment #50
shimas CreditAttribution: shimas commentedhi 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:))))
Comment #51
jvieille CreditAttribution: jvieille commentedWe 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)
Comment #52
doka_md CreditAttribution: doka_md commentedjvieille, 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.
Comment #53
GaëlGThis might be an answer too: CKEditor Insert.