Posted by bveb on January 26, 2010 at 1:16pm
Hello everybody,
I couldnt find any doc for how to enable CKEditor image upload. I just want to use simple "upload and insert" functionality. I enabled Upload core module but couldnt see any upload tab on Ckeditor's image window.
Thanks.
Comments
I am also trying to implement
I am also trying to implement this, no luck yet..
Already exists
Hi,
This functionality is already exist, you could see it in action on demo site of CKEditor. When you click insert image button, an upload tab appears immediately. The problem are no instructions to enable it.
Available documentation
From the readme in the CKEditor tarball:
Uploading images and files
--------------------------
There are three ways of uploading files: By using commercial file browser like CKFinder (http://ckfinder.com),
by using modules like IMCE, WebFM, Image Browser or by using the core upload module.
To select preferred file browser, under "Administer > Site configuration > CKEditor", adjust
CKEditor profiles. In each profile you can choose which file browser will be used (in "File browser settings" section).
Note: to choose IMCE, WebFM or Image Browser you should install an appropriate Drupal module first.
Note that it says "..or by using the core upload module"
On this page:
http://docs.cksource.com/CKEditor_3.x/Developers_Guide/File_Browser_(Uploader)
We have this statement about the upload tab:
The filebrowserUploadUrl setting is the location of a script that handles file uploads. If set, the "Upload" tab(2) will appear in dialog boxes (only where such functionality is available, i.e. in "Link", "Image" and "Flash" dialog windows).With an example of how to set filebrowserUploadUrl in the CKEditor source. Does the core upload module have a path that we can give to filebrowserUploadUrl ?
A not-so-good solution without IMCE
I don't like solution of IMCE because it make things too complicate. I just need to upload the image. I don't care where it stores.
I love the solution of "wysiwyg_imageupload module" but it doesn't support Drupal 7.
Add this code in hook_init or somewhere run with CKEditor. It makes "Upload" tab of image popup dialog appears like demo in CKEditor's website.
drupal_add_js('jQuery(document).ready(function() {CKEDITOR.config.filebrowserImageUploadUrl = "' . $base_url . '/' . '/upload.php";
});', 'inline');
Put following upload.php in Drupal root. It's the handler of uploaded image.
<?php
define('DRUPAL_ROOT', getcwd());
require_once DRUPAL_ROOT . '/includes/bootstrap.inc';
drupal_bootstrap(DRUPAL_BOOTSTRAP_FULL);
if (user_access('access content')) { // change the permission yourself!!!
$function_num = $_GET['CKEditorFuncNum'];
$filename = $_FILES['upload']['name'];
$tmp_path = $_FILES['upload']['tmp_name'];
$target_dir = drupal_realpath('public://ckeditor-images/');
if (!file_exists($target_dir))
mkdir($target_dir);
$target_path = $target_dir . '/' . $filename;
$i = '';
if (file_exists($target_path)) {
$i = 2;
while (file_exists($target_dir . '/' . $i . $filename)) {
$i++;
}
$target_path = $target_dir . '/' . $i . $filename;
}
copy($tmp_path, $target_path);
$url = file_create_url('public://ckeditor-images/' . $i . $filename);
echo "<script type=\"text/javascript\">window.parent.CKEDITOR.tools.callFunction(" .
$function_num . ", '" . $url . "');</script>";
} else {
echo "permission deny";
}
?>
At last clean upload, paste from clipboard, drag and drop
Many thanks for submitting this. I elaborate from hgneng's proposal for a simpler, more comprehensive approach to both upload and paste images in CKEditor.
1) update CKeditor to the latest 4 branch that allows pasting from 4.5 version
2) in CKeditor.module;
- at the end of the file, add this
function ckeditor_pasteimage(){
$function_num = $_GET['CKEditorFuncNum'];
$filename = $_FILES['upload']['name'];
$tmp_path = $_FILES['upload']['tmp_name'];
$target_dir = file_directory_path() . '/editor';
if (!file_exists($target_dir))
mkdir($target_dir);
$target_path = $target_dir . '/' . $filename;
$i = '';
if (file_exists($target_path)) {
$i = 2;
while (file_exists($target_dir . '/' . $i . $filename)) {
$i++;
}
$target_path = $target_dir . '/' . $i . $filename;
}
copy($tmp_path, $target_path);
$url = file_create_url($target_dir . '/' . $i . $filename);
// echo "<script type=\"text/javascript\">window.parent.CKEDITOR.tools.callFunction(" . $function_num . ", '" . $url . "');</script>";
echo '{
"uploaded": 1,
"fileName": "' . $filename .'",
"url": "/' . $target_dir . '/' . $i . $filename . '"
}';
}
function ckeditor_uploadimage(){
$function_num = $_GET['CKEditorFuncNum'];
$filename = $_FILES['upload']['name'];
$tmp_path = $_FILES['upload']['tmp_name'];
$target_dir = file_directory_path() . '/editor';
if (!file_exists($target_dir))
mkdir($target_dir);
$target_path = $target_dir . '/' . $filename;
$i = '';
if (file_exists($target_path)) {
$i = 2;
while (file_exists($target_dir . '/' . $i . $filename)) {
$i++;
}
$target_path = $target_dir . '/' . $i . $filename;
}
copy($tmp_path, $target_path);
$url = file_create_url($target_dir . '/' . $i . $filename);
echo "<script type=\"text/javascript\">window.parent.CKEDITOR.tools.callFunction(" . $function_num . ", '" . $url . "');</script>";
}
in function ckeditor_menu(), add this:
$items['ckeditor/pasteimage'] = array('title' => 'Paste image in ckeditor',
'description' => 'Paste image in ckeditor.',
'page callback' => 'ckeditor_pasteimage',
'access arguments' => array('access ckeditor'),
'type' => MENU_CALLBACK,
);
$items['ckeditor/uploadimage'] = array(
'title' => 'Upload file in ckeditor',
'description' => 'Upload file in ckeditor.',
'page callback' => 'ckeditor_uploadimage',
'access arguments' => array('access ckeditor'),
'type' => MENU_CALLBACK,
);
3) in CKeditor profile, advanced options, CUSTOM JAVASCRIPT CONFIGURATION:
config.filebrowserUploadMethod = 'form';config.extraPlugins = 'uploadimage';
config.uploadUrl = '/ckeditor/pasteimage';
config.filebrowserImageUploadUrl='/ckeditor/uploadimage';
config.removeDialogTabs = 'image:advanced;image:Link;flash:advanced;flash:Link';
4) in CKeditor profile, File browser settings
Set File browser type to "None"
(You can removed your CKFinder, IMCE or any useless stuff you had to setup for a costly or messy implementation)
5) Visit and save the modules page.
You'll get
- a clean, neat image upload popup that does onlyt that
- the ability to paste and drag/drop images
Thanks
I could enable upload tab from CKEditor advanced settings tab . Unfortunately I couldnt find drupal upload handler url. There should be something that handles image uploads and returns image url to client side.
removing image when it is deleted from editor
Hello,
When I insert inline image and delete it while I am writing is it possible to remove exact image from disk?
For a different,
For a different, Drupal-centric approach, take a look at the Insert module. There's a good tutorial by Matthew Saunders and an older video by Mustard Seed Media.
Just noticed this call out
Christefano - thanks for the shout out 2.75 years ago! I missed this entirely - and only noticed today because the referral popped up through Woopra as a live session when I just happened to be looking! So, thanks - all be it belated.
there is also the
there is also the wysiwyg_imageupload module which integrates with the WYSIWYG editor, compared to insert which is not integrated (but pretty small and nice).
You can see a videocast here, to see the module in action
http://www.youtube.com/watch?v=LEKpvI1G8qE
Pity this isn't in the Drupal Core...
Because it seems to answer one of the most unexpected omissions in Drupal, one that surprises people the most when starting out (What, how to I get this image into my page?), and one that people quote as the last straw when they leave the boat for other shores.
In fact, it's a pity it's not an actual module, one you can download and install in the usual ways. To install it you have to use a drush batch file. I don't know whether that's easy or not. But having failed to run a patch up to now, and not being a Linux expert, I'm a bit apprehensive.
The reason it isn't in core
The reason it isn't in core is because there are half a dozen ways you can go about uploading, inserting and managing your images. I personally think IMCE and IMCE Wysiwyg bridge is the cleanest way to do so but I'm sure there are fans of Web FM who would say that it is a superior solution. One of the great things about Drupal is that you have freedom of choice in what tools you decide to include in your development project.
Build Custom Download
I agree, but there might be a better way of connecting new Drupal users to the modules they seem to be expecting are in the default distribution.
For example, on the download page on Drupal.org, we could have a "Build Custom Download" feature similar to http://jqueryui.com/download that lets you package your download with contrib modules that offer certain features.
@fizk: I like that custom
@fizk: I like that custom build idea. That would be cool. I suppose developers can do that themselves with Drush or Profiles and Features but it would be cool to have that ability from the Drupal Org site.
Half a dozen ways...
But I for the moment I have none that is totally satisfactory.
I have drag'n'drop but it only works in Firefox (see open issues).
I have CKeditor, wysiwyg, imce, and wysiwyg-imce bridge. I can upload files but I have to go through multiple steps to do so: first click on the image icon (that opens 1 dialog box), then click Browse server (opens a second), click Browse again to open the windows file manager. Then I have the name of the file in the Upload dialog, I have to validate by clicking the Upload button... And this took me days to achieve!
Well, all things evolve over
Well, all things evolve over time.
I am still using Wysiwyg, TinyMCE, + IMCE for file management and it is a breeze (for me). If I need to upload a huge number of images, I'll FTP them but... Now that we have been introduced to apps like facebook's gallery's file manager with simple drag-n-drop new options start making their way to CMS's. Have you looked at Media and the Plupload integration module. I've built a couple of sites using Media/Media Gallery + Plupload integration module. It makes it quick & easy to drag a number of files to the upload window and upload them.
Thanks for your answer
I will try those other modules as soon as I can.
Yes, I use FTP when I have to upload files, but the site I am working on is a social network, so it's other people (who now are accustomed to Google Apps and the like) who are making unfavorable comparisons.
CKEditor / IMCE / WYSIWYG
Install WYSIWYG module
Install IMCE module
Install IMCE WYSIWYG bridge module
You also need to downlaod CKEditor separately from its website and place it into /sites/all/libraries/
(also install CKEditor Link module while you're at it)
Make sure you assign an IMCE profile to any editors. You may want to include subdirectories (which you should create in advance), to separate images from pdfs, for instance.
In WYSIWYG settings, you'll need to assign CKEditor to any profiles you're using, and make sure to enable the appropriate editor buttons.
In input filters, make sure to enable the CKEditor Link filter
To insert an image from CKEditor while editing a node:
- click the "insert image" icon.
- click "Browse Server" button
- it should show you the files already uploaded to the server (and you can navigate directories as allowed in the settings)
- if you want to upload a new file, click "upload", and browse your local system for it
- when you've found the right image, you can click "insert"
To insert a link to a PDF or other file from CKEditor:
- click the "link" icon (with the chain)
- make sure link type is URL
- click the "browse server" icon
- now you can follow the same instructions as above
(Also, with the CKEditor Link module, you can insert a link to another Drupal node: set link type as "Drupal", then start typing the title of a node. It will do a search and show matching nodes. That way if those nodes are renamed or moved or whatever, the link will always be up to date. And yes, the url as displayed on the site will include whatever proper path alias you may have set using Path.)