0

I have installed CKeditor and IMCE modules for Drupal7. Now when i click on a button in my page, i want to load the ckeditor with IMCE support (File browser option).

How to achieve this with javascript? So far, i am loading the ckeditor this way, but it is not showing a file browser button for image:

CKEDITOR.replace('text_'+id, { 
    width: 630,
    height: 300
});

CKEDITOR.config.toolbar = [
    ['Bold','Italic','Underline']
];

CKEDITOR.config.extraPlugins = 'imce';

The strange thing is that, the Image dialog has "Browse Server" button for the textarea under the form that is created with Drupal Form API, but when i try to apply ckeditor for a custom textarea through javascript, i don't see the "Browse Server" button for Image dialog.

3

Finally i figured it myself, after referring to some of the Drupal forum posts, like this one. I removed the 'Image' button in ckeditor toolbar, and instead used the 'IMCE' button. I realized that i must

  1. Assign a profile to the users under: admin/config/media/imce
  2. Under admin/config/content/ckeditor/edit/Full > Editor Appearance, add 'IMCE' button in the 'Used Buttons' area and check the option "Plugin for inserting files from imce without image dialog" under Plugins. (assuming that i am using 'Full' ckeditor profile)
  3. Under admin/config/content/ckeditor/edit/Full > File browser settings > select 'IMCE' for all File browser type options.
  4. Include the 'IMCE' option while applying the ckeditor for the textarea, like:

    CKEDITOR.config.toolbar = [['Bold','Italic','Underline', '-','JustifyLeft','JustifyCenter','JustifyRight','-','IMCE','Undo','Redo']];

Finally this is what i achieved in the editor:

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.