Attachments

This plugin helps you attach/upload files to your server. It is based on the upload feature if CKEditor but is focused on attachments as menu option. Installation is as follows :-

customToolbar:
    [
      { name: 'tools', items : [ 'Maximize', 'ShowBlocks','-', 'Attachments' ] }
    ]

 CKEDITOR.replace('ckeditor',
  { extraPlugins: 'attach',
    toolbar: this.customToolbar,
    filebrowserUploadUrl: '/path/to/upload.php', 
  })

Various configuration options which help you alter the plugin behavior are :-
  1) AutoClose -  To auto close dialog on upload (autoClose: true)
  2) Callback on attachment upload - onAttachmentUpload: function(responseHTML) {}
  3) validateSize - Validate size of file before upload (validateSize: 30) i.e 30mb limit

Sample Code :-

CKEDITOR.replace('ckeditor', {
  filebrowserUploadUrl: '/path/to/upload.php',
  extraPlugins: 'attach', // attachment plugin
  toolbar: this.customToolbar, //use custom toolbar
  autoCloseUpload: true, //autoClose attachment container on attachment upload
  validateSize: 100, //100mb size limit
  on: {
    onAttachmentUpload: function(response) {
      /*
       the following code just utilizes the attachment upload response to generate 
       ticket-attachment on your page
      */
      attachment_id = $(response).attr('data-id');
      if (attachment_id) {
        attachment = $(response).html();
        $closeButton = $('<span class="attachment-close">').text('x').on('click', closeButtonEvent)
        $('.ticket-attachment-container').show()
          .append($('<div>', { class: 'ticket-attachment' }).html(attachment).append($closeButton))
          .append($('<input>', { type: 'hidden', name: 'attachment_ids[]' }).val(attachment_id)
          );
        }
      }
    }
  }
});

 


 

attach

1,109 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.24 4.23 4.22

Version: 1.0

DownloadRelease notes

The first version of attachment plugin for CKEditor. Please report any issues faced in the comments section or mail me at sahilbathla1@gmail.com

Twitter Facebook Facebook Instagram Medium Linkedin GitHub Arrow down Phone Menu Close icon Check