1. Home
  2. Blogs
  3. Blogs

Enable Image Uploads and Server Browsing for CKEditor

Published
2010-12-20 12:06
Written by
kurund - member of the CiviCRM community - view blog guidelines

CiviCRM comes with CKEditor as a default wysiwyg editor. One of the missing features has been ability to upload /browse existing files on the server using CKEditor. So after some investigation I figured out you can easily integrate IMCE drupal module for this purpose.

 

Here are the steps:

  • Modify packages/ckeditor/config.js

Index: config.js ===================================================================

--- config.js (revision 31357)

+++ config.js (working copy)

@@ -9,6 +9,10 @@ // config.language = 'fr'; //config.uiColor = '#AADC6E';

+ config.filebrowserBrowseUrl = '/index.php?q=imce&app=ckeditor|url@txtUrl|width@txtWidth|height@txtHeight';

+ config.filebrowserImageBrowseUrl = '/index.php?q=imce&app=ckeditor|url@txtUrl|width@txtWidth|height@txtHeight';

+ config.filebrowserFlashBrowseUrl = '/index.php?q=imce&app=ckeditor|url@txtUrl|width@txtWidth|height@txtHeight';

+

// disable auto spell check config.scayt_autoStartup = false;

 

  • Clear you browser cache. 
  • That't it, now when you click on image icon you will get option to "Browse Server", using which you can browse existing file or upload new files on the server.

 

By default you can browse / upload files only to files directory.

 

Sorry joomla people.. this will work only for drupal.

Filed under
CiviCRM
Drupal

Comments

What version of IMCE and CiviCRM did you test this with?

 

Also I want to confirm the path to the config.js file is:

 

<civicrm base>/sites/all/modules/civicrm/packages/ckeditor

 

Is that the correct path?

Thanks,

Sarah

 

This is amazing, 

 

Thanks guys, I used it with TinyMCE, and IMCE 6.x-2.0-RC2... Works perfectly, now if we could only get all the TinyMCE editing options in there.

 

path for TinyMCE is:

 

<civicrm base>/packages/HTML/QuickForm

I ended up adding the civicrmImceCkeditSendTo function:

var civicrmImceCkeditSendTo = function (file, win) {
var parts = /\?(?:.*&)?CKEditorFuncNum=(\d+)(?:&|$)/.exec(win.location.href);
if (parts && parts.length > 1) {
CKEDITOR.tools.callFunction(parts[1], file.url);
win.close();
}
else {
throw 'CKEditorFuncNum parameter not found or invalid: ' + win.location.href;
}
};

...to the top of the config.js file (ckeditor) and then adding the following lines:

config.filebrowserBrowseUrl = '/index.php?q=imce&app=ckeditor|url@txtUrl|width@txtWidth|height@txtHeight|sendto@civicrmImceCkeditSendTo|params@';
config.filebrowserImageBrowseUrl = '/index.php?q=imce&app=ckeditor|url@txtUrl|width@txtWidth|height@txtHeight|sendto@civicrmImceCkeditSendTo|params@';
config.filebrowserFlashBrowseUrl = '/index.php?q=imce&app=ckeditor|url@txtUrl|width@txtWidth|height@txtHeight|sendto@civicrmImceCkeditSendTo|params@';

I get the browse button in the image dialog, but clicking it gets a new window with a 404.

 

I added the "civicrmImceCkeditSendTo = function" above the CKEDITOR.editorConfig = function( config )
{} and included the other lines within the config function.

 

Never mind. It's working in D7.. had to change directories.

Joomla users should note that they have a new feature available in v3.3 -- the ability to select the "default Joomla editor" in the wysiwyg options in CiviCRM (administer > configure > global settings > site preferences). doing so will integrate the system default and/or user's preferred wysiwyg editor into the civi screens.

there are a lot of editors available for Joomla -- some may not integrate as well as others. but the most common editor -- JCE -- will work great. and of course JCE already has built in file/image browse/upload/editing right out of the box, plus great configuration control and access group features.  ;-)

Permalink
Anonymous (not verified)
2010-12-21 - 03:22

 

I tried to integrate the default Drupal editor with CiviCRM. As it turned out to be a bit more time consuming as initially expected, I just integrated TinyMCE shipped with CiviCRM with the IMCE drupal module.
 
Here is the patch file:
 
Index: HTML/QuickForm/tinymce.php
===================================================================
--- HTML/QuickForm/tinymce.php (revision 3.3.0)
+++ HTML/QuickForm/tinymce.php (working copy)
@@ -140,6 +140,13 @@
         } else {
             // load tinyMCEeditor
             $config = CRM_Core_Config::singleton( );
+            $imce_config = '';
+            if($config->userFramework == 'Drupal') {
+              if (module_exists('imce') && imce_access()) {
+                drupal_add_js("function mceImageBrowser(fid, url, type, win) { win.open(Drupal.settings.basePath + '?q=imce&app=TinyMCE|url@'+ fid, '', 'width=760, height=560, resizable=1'); }", 'inline');
+                $imce_config = 'file_browser_callback : "mceImageBrowser",';
+              }
+            }
             // tinymce is wierd, it needs to be loaded initially along with jquery
             $html = null;
             $html .= sprintf( '<script type="text/javascript">
@@ -153,6 +160,7 @@
         theme_advanced_buttons2    : "separator,numlist,bullist,|,outdent,indent,cite,separator,justifyleft,justifycenter,justifyright",
         theme_advanced_buttons2_add: "justifyfull,separator,pastetext,pasteword,|,spellchecker,separator,removeformat,separator,code,|,fullscreen,help",
         theme_advanced_buttons3    : "",
+        '.$imce_config.'
         theme_advanced_toolbar_location : "top",
         theme_advanced_toolbar_align : "left",
         theme_advanced_statusbar_location : "bottom",
 
 
This patch is only enabling IMCE integration for Drupal, not for Joomla 
I tested it with Drupal 6.19 and CiviCRM 3.3.0
 
To get absolute URLs for newsletters I also set "convert_urls : true". Is there a better way to achieve this?
 

I would recommend you should follow lcdweb's approach where in you add an option to use default wysiwyg drupal in editor, rathar than modifying existing core files.

I think eventually we would like CiviCRM to use CMS wysiwg editor. CMS provide much better interface to customize plugins etc.

Looking forward for the patch.

Kurund

 

That was my first approach.
I added a new option (Default Drupal Editor), added the drupaleditor.php to packages/HTML/QuickForm and registered it in HTML_QUICKFORM_ELEMENT_TYPES. 
But I didn't manage to get the editor loaded in the textarea (I am using wysiwyg module). As I don't have much time at the moment I gave it up and changed tinymce.php to integrate with IMCE.

Maybe I'll find some time in the future to get the default drupal editor working. Then I'll upload the patch to the issue tracker...

 

Are either (or both) of these patches for CKEditor and TinyMCE planned to be part of the next CiviCRM point release? Hopefully version 3.3.2 ? 

 

This is a great enhancement for regular non-techie folks using CiviCRM!

Today I wrote a small drupal module to integrate IMCE with CKeditor and TinyMCE for regular non-techie folks :) 

Unfortunately at the moment it is not working with TinyMCE out of the box. If this feature request (http://issues.civicrm.org/jira/browse/CRM-7266) is successful, it will also work for TinyMCE in future versions of CiviCRM.

As soon as I know if and how this requested feature will be implemented, I'll publish the module. 

When I test the patch for CKEditor by trying to add a graphic to an event description. I can browse to an existing image, or upload a new image.  However, the usual "Send to Editor" link is missing from the IMCE dialog box.  So the image is never added to the event description.   Once the end-user chooses their image, how do they get it into their event description?

 

Thanks,

Sarah

 

You can change above lines to:

filebrowserBrowseUrl : '/index.php?q=imce&app=ckeditor|sendto@imceCkeditSendTo|',

filebrowserImageBrowseUrl : '/index.php?q=imce&app=ckeditor|sendto@imceCkeditSendTo|',

filebrowserFlashBrowseUrl : '/index.php?q=imce&app=ckeditor|sendto@imceCkeditSendTo|',
 
Then you could install the drupal module imce_wysiwyg and include its js in the template file drupal.tpl
 
Index: templates/CRM/common/drupal.tpl
===================================================================
--- templates/CRM/common/drupal.tpl (revision 64)
+++ templates/CRM/common/drupal.tpl (revision 65)
@@ -58,6 +58,7 @@
     <script type="text/javascript" src="{$config->resourceBase}packages/tinymce/jscripts/tiny_mce/jquery.tinymce.js"></script>
     <script type="text/javascript" src="{$config->resourceBase}packages/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
 {elseif $defaultWysiwygEditor eq 2}
+    <script type="text/javascript" src="/sites/all/modules/imce_wysiwyg/js/imce_wysiwyg.js"></script>
     <script type="text/javascript" src="{$config->resourceBase}packages/ckeditor/ckeditor.js"></script>
 {/if}
 
 
If you don't want to install that module, you could just include the function imceCkeditSendTo instead of the js. It looks like this:
 
/**
 * CKeditor integration.
 */
var imceCkeditSendTo = function (file, win) {
  var parts = /\?(?:.*&)?CKEditorFuncNum=(\d+)(?:&|$)/.exec(win.location.href);
  if (parts && parts.length > 1) {
    CKEDITOR.tools.callFunction(parts[1], file.url);
    win.close();
  }
  else {
    throw 'CKEditorFuncNum parameter not found or invalid: ' + win.location.href;
  }
};

I found this here: http://forum.civicrm.org/index.php?action=profile;u=55218;sa=showPosts 
 
Permalink
Anonymous (not verified)
2010-12-26 - 16:49

https://github.com/rvtcadmin/CiviCRM-File-Upload--Image-Upload-and-Flash-Embed

 

There are some extra help notes here http://www.rvtc.us/blog/adding-file-and-image-upload-and-flash-embed-civicrm-editor

 

Hope this helps.

Permalink
Anonymous (not verified)
2010-12-27 - 23:59

As promised I wrote a small drupal module to enable IMCE for TinyMCE and CKeditor.

 
At the moment I don't have the time to create a project on drupal.org
If anybody would like to do that instead of me, please feel free to do so.
 
I tested it with drupal 6.19, imce 6.x-2.0-rc2, imce 6.x-2.0, imce 6.x-2.1
and CiviCRM 3.3.0
Would be nice if you could post test results with other CiviCRM versions.
 
Please note that the integration for TinyMCE is only working out of the box with CiviCRM versions >= 3.3.2
For Versions below 3.3.2 you have to apply the patch file included in the module directory "tinymce.php.diff" or from the issue tracker http://issues.civicrm.org/jira/browse/CRM-7266
 
tom

 

Thomas,

Thank you for this module! It's a huge improvement over the tedious process of having to upload the image to the server, etc.

One thing I ran into yesterday with a client that should be noted:

The default setting for IMCE is to insert a relative URL (e.g., sites/default/files/images, etc.) as opposed to the full URL. This means that when composing a mailing, the image will appear just fine on the system, but won't be found by the recipient.

Under IMCE settings > Common Settings, Absolute URL should be selected for everything to work as it should. Easy as pie.

Thanks again, Thomas - great work!

I have implemented this module and find that it functions correctly with TinyMCE. However when I use it with CKEditor the IMCE window opens but is blank.

Could someone give me some guidance on what might be causing this.

Thanks
Martin Fuggle