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:
- Install IMCE module: http://drupal.org/project/imce
- 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.
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.
Hi - just wondering if anyone who got this working in D7 has a consolidated patch that can be used?
I have tested on CiviCRM 3.2.5 and latest IMCE, it should work with CiviCRM 3.3.x
Kurund
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. ;-)
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!
I just created an issue in the bug tracker. See http://issues.civicrm.org/jira/browse/CRM-7258
I'm not sure if this is going to be in core very soon, as there is probably a reason why file management wasn't enabled so far.
Since this patch depends on other IMCE drupal modules, it won't be part of core.
Kurund
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|',
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.
As promised I wrote a small drupal module to enable IMCE for TinyMCE and CKeditor.
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