Integrate Image Upload right from CKEditor (Wysiwyg)

jbagnato

I have integrated an image/files uploading Wysiwyg plugin to the post's blog module for the main content using CKEditor in a very easy way using this tutorial:
http://www.mixedwaves.com/2010/02/integrating-fckeditor-filemanager-in-ckeditor/

I recommend You add it in FUEL !

admin

Nice. This is good timing because the next blog post we were planning on was using the following file manager to make a better asset integrator:
https://github.com/simogeo/Filemanager

Are you familiar with it?

jbagnato

I followed that tutorial:
1- Downloaded the filemanager ZIP (http://www.mixedwaves.com/filemanager_in_ckeditor.zip) and added filemanager directory to the assets/js folder

2- Modify the filemanager/connectors/php/config.php to the fuel paths:
$Config['UserFilesPath'] = '/assets/images/' ;
$Config['UserFilesAbsolutePath'] = realpath('./../../../../../assets/images/');

3- Add these lines in MY_FUEL.php (replace www.web.com)
'filebrowserBrowseUrl' => '/assets/js/filemanager/browser/default/browser.html?Connector=http://www.web.com/assets/js/filemanager/connectors/php/connector.php',
'filebrowserImageBrowseUrl' => '/assets/js/filemanager/browser/default/browser.html?Type=Image&Connector=http://www.web.com/assets/js/filemanager/connectors/php/connector.php',
'filebrowserFlashBrowseUrl' => '/assets/js/filemanager/browser/default/browser.html?Type=Flash&Connector=http://www.web.com/assets/js/filemanager/connectors/php/connector.php',
'filebrowserUploadUrl' => 'http://www.web.com/assets/js/filemanager/connectors/php/upload.php?Type=File',
'filebrowserImageUploadUrl' => 'http://www.web.com/assets/js/filemanager/connectors/php/upload.php?Type=Image',
'filebrowserFlashUploadUrl' => 'http://www.web.com/assets/js/ckeditor/filemanager/connectors/php/upload.php?Type=Flash'

and VOILA! you can upload image files right from the CKEditor and it has an Image Panel with a preview and some other stuff.

greaterebiz

In step 3 do you add the lines to the $config['ck_editor_settings'] array or do they go somewhere else?

jbagnato

Yes! I forgot to say that the parameters of step 3 have to be written inside $config['ck_editor_settings']

greaterebiz

Thanks, this is a very helpful post.

I found I could use BASE_URL to replace www.web.com. For example,

'filebrowserBrowseUrl' => '/assets/js/filemanager/browser/default/browser.html?Connector=' . BASE_URL . 'assets/js/filemanager/connectors/php/connector.php',

greaterebiz

As an alternative for step 2 of jbagnato's instructions (thanks again for posting them) above, one may want to update filemanager/connectors/php/config.php as follows. This configures filemanager to put image and flash files into the same directories as the fuel/assets functions - reduces potential confusion on the users part.

// Path to user files relative to the document root.
$Config['UserFilesPath'] = '/assets/' ;

// Fill the following value it you prefer to specify the absolute path for the
// user files directory. Useful if you are using a virtual directory, symbolic
// link or alias. Examples: 'C:\\MySite\\userfiles\\' or '/root/mysite/userfiles/'.
// Attention: The above 'UserFilesPath' must point to the same directory.
$Config['UserFilesAbsolutePath'] = realpath('./../../../../../assets/');


$Config['FileTypesPath']['Image'] = $Config['UserFilesPath'] . 'images/' ;
$Config['FileTypesAbsolutePath']['Image']= ($Config['UserFilesAbsolutePath'] == '') ? '' : $Config['UserFilesAbsolutePath'].'images/' ;

$Config['FileTypesPath']['Flash'] = $Config['UserFilesPath'] . 'swf/' ;
$Config['FileTypesAbsolutePath']['Flash']= ($Config['UserFilesAbsolutePath'] == '') ? '' : $Config['UserFilesAbsolutePath'].'swf/' ;

jbagnato

OK! I try that in the past but it didn't worked for me but now I understand that was because I had "image" instead of "images" (the final "s").
Thank you!

admin

Just a heads up, that be sure to put in the proper FUEL authorization checks since it opens in a different window (I believe) essentially outside of FUEL. I know for the "https://github.com/simogeo/Filemanager" I mention above, there is a place to put that in the filemanager.config. Unfortunately, I don't have any sample code at the moment for that but if I do get some, I'll post.

EcotypeS

BTW -- I just downloaded the most current version of ckfinder directly from the CKFinder website-- the configuration is simpler that stated above -- it can be copied verbatum out of the ckfinder docs and works great. All I had to do was tell it where I put the JS, and even that was simpler. This was version 2.1.

I'm slightly extending the FUEL news function and want to get an optional thumbnail. Since the user is already putting images into the textarea with ckedit/ckfinder, it is logical to also use ckfinder for the thumbnail.

Now a question -- ckfinder gives an example to configure it as a popup intended only to get an image url into an html text field. Involves two short javascript functions (they put them in the head), a text (not texarea) field, a button field, and an onclick function on the button.

1. Can the javascript run within a Fuel in-line edit? How would this interact with the AJAX?
2. If yes, same question for Admin.
3. Is there a way to pass the field info for a button from the form_fields function in the news model to form-builder? It seems to be turning 'type' => 'button' into a text field.
4. Is there a way to get "onclick" or any other JS function into the field info?

If these are doable, it would be a slick and consistent combo.

Thanks.

EcotypeS

Is there a way to get at is_fuelified() from an independent program -- in this case, ckfinder?

If no, is the login status in a session variable such that it could just be grabbed and used?

Again, thanks.

admin

With regards to your questions above:

1. Currently, the javascript for inline editing is handled separately (which is a bit of a headache).
2. In the admin, you can add javascript with a simple modules "js" parameter
3. Do you have the latest version because that should work?
4. There is not. I'd recommend using jquery to target the element and apply the click handler.

We are working to address several of your questions above with the form builder to make it easier to add javascript and create custom field types (no timeframe yet though).

With regards to is_fuelified(), it does require FUEL to work. FUEL uses the CI Session class in the fuel/modules/fuel/libraries/Fuel_auth.php. I'll see if I can find someone that may have a solution implemented.

Lance

You won't be able to use is_fuelified() or get anything out of the $_SESSION array either. Fuel constants are also out leaving (at this point) $_COOKIE.

Assuming you've not changed the default CI cookie name of ci_session in config, look for that as the key EG $_COOKIE[ci_session].

If you have changed $config['sess_cookie_name'] then look for it's new value as the key. This holds the userdata.

EcotypeS

Thanks to both! I'm going to have to go study since much of this is somewhat out of my element.

I think I've figured out a way to handle the ckfinder part of this at least when editing from the front-end -- I know (tested) I can do it without boogering up Fuel code IF I can dynamically code an "after_html" to include the field_name as Fuel generates it with the record id as part of it.


$fields['thumbnail'] = array('size' => 60, 'after_html'=> " <input type='button' value='Browse Server or Upload' onclick='BrowseServer(__fuel_field__news_2--thumbnail, value);' > ");

That field name needs to match the one Fuel is generating which includes the record ID (in this case, 2).

The php generating this is in my model and I don't see how to to tell the form_builder how to create that fieldname such that it includes the record id.

Is this being run through dwoo in a manner in which it could be dynamically generated when the form is thrown?

Is there a way?

Thanks.

Lance

A bit more on that cookie, it's Fuel_ and an md5 of your site name defined in config.

Another way to go about the button to launch CKF is something like:

in form_fields()
$fields['sm_image'] = array( 'type' => 'custom', 'class' => '', 'func' => 'ckf_single_img', 'ckfinder' => 'sm_image' );

the func is a function defined in a helper. Handy if you have lots of these things in different models everywhere.

function ckf_single_img($params) { $CI =& get_instance(); $CI->load->library('form_builder'); # Display for image $output[] = img(array( 'src' => $params['value'], 'width' => 80, 'style' => 'float:left', 'class' => $params['ckfinder']) ); # Button $output[] = $CI->form->button('Open Assets', '', array('ckfinder' => $params['ckfinder'], 'class' => 'open-repo ckf-edit-image')); return join($output); }

That also shows a little thumbnail of the selection next to the button.

EcotypeS

Thanks! I'll try that -- looks better than where I was going!

EcotypeS

I'm really confused.

I copied the above, put the function into my_helper.php (it gets found). Obviously technically better than my previous code.

Identical to the above except I used "thumbnail" as the image name. I also tried it using a field name of "thumbnail_image" and that did not help (does generate the separate option to upload which I don't really want)

Based on what firebug showed me, I got
<img src="http://fnpsdev.org/" width="80" style="float: left; " class="thumbnail" alt=""/> <input type="button" name="" id="" value="Open Assets" ckfinder="thumbnail" class="open-repo ckf-edit-image"/>

ckfinder did not load. I'm not sure how the code above is intended to load it.

The image location is also not set correctly-- needs to be http://fnpsdev.org/assets/userfiles/images/filename.jpg
not
http://fnpsdev.org/filename.jpg

(if the field has a value, the value does get there )

Setting 'upload_path' also doesn't help.

What had been working in my test was manually coding an "onclick" into the button code ... but I don't see a way to do that with $CI->form->button. The function called "onclick" also gave me a way to set ckfinder options including path -- I don't see how to do that with the above.

I have to be missing several things ...
1... getting ckfinder to load based on the above code
2... telling ckfinder where the images are
3... making sure the field name that gets set is correct per Fuel

Thanks.

Lance

Sorry mate, I may have steered you wrong. Copying that (only) isn't enough to make it actually work. Was just an example of using a custom function.

If you want to use that you'll also need to:

Open up modules/fuel/assets/js/fuel/controller/BaseFuelController and add:

function set_image(fileUrl, data) { $("#"+data["selectActionData"]).val(fileUrl); // Hidden input $("."+data["selectActionData"]).attr('src', fileUrl); // Preview img }

Above the line:

fuel.controller.BaseFuelController = jqx.lib.BaseController.extend({

In the add_edit function in the same document add this anywhere:

// Editing and image field, launches CKFinder $('.ckf-edit-image').live('click',function(){ CKFinder.popup({selectActionFunction:set_image,selectActionData:$(this).attr('ckfinder')}); });

Note:
- The class name used to open it up has to be the same as what's on the button.
- It's using the set_image() function we just banged in the top of the controller and it's data is using the ckfinder attr which is the absolute path to the image

With that you should be golden. If not send me an email at lance[a t]redgemmedia[.]co.nz and I'll put a zip file up.

Something else to note is doing this with page variables in layouts. An example from MY_fuel_layouts is:

'page_image' => array( 'type' => 'custom', 'func' =>'ckf_single_img', 'ckfinder'=>'vars--page_image', # Note the 'vars--' appened to the field name for layout variables! 'description' => 'Upload image: 250px X 250px' )

EcotypeS

Thanks! I'm learning. Slowly ....

I did get it working -- using your custom field example with the thumbnail but otherwise saving it the way ckfinder recommended (the way I was trying to do it before)

I like your approach better ... !