Redactor Options - carstenschaefer/ImagerJs GitHub Wiki

How to configure Redactor's plugin of ImagerJs.

For base configuration of ImagerJs please see 'ImagerJs Options' of documentation.

---

Configuration of ImagerJs Options for Preview Usage

var imagerOptionsPreview = {
      plugins: ['Resize', 'Crop', 'Rotate', 'Toolbar'],
      waitingCursor: 'wait', 
      editModeCss: editModeCss,
      pluginsConfig: pluginsConfig,
      quality: quality,
      quality: 0.9,
      targetScale: 0.5,
      hideFileSelection: true
};

Configuration of ImagerJs Options for Use in Redactor

var imagerOptionsRedactor = {
      plugins: ['Resize', 'Crop', 'Rotate', 'Toolbar', 'Save', 'Delete', 'Properties']
      waitingCursor: 'wait', 
      editModeCss: editModeCss,
      pluginsConfig: pluginsConfig,
      quality: quality,
      hideFileSelection: true
};

Configuration of Redactors Options

var redactorConfig = {
      plugins: ['ImagerJs'],
      ImagerJs: {
          contentConfig: contentConfig,
          hideFileSelection: true,
          quality: quality,
          redactor: imagerOptionsRedactor,
          preview: imagerOptionsPreview
      }
};

Initialization of Redactor using ImagerJs Plugin

$('.redactor').redactor(redactorConfig);

• Options are splitted into two objects: preview and redactor.
• Those options are passed into ImagerJs instance during its creation.
• preview options will be passed to ImagerJs on modal window when initial adding an image.
• redactor options will be passed to ImagerJs when image is edited inside of redactor's editor.
• quality:
  • Default quality setting of image.
• targetScale:
  • Default scale setting of image.
• hideFileSelection:
  • If set to true, file selector will be hidden after an image is selected (using file browser or drag and drop).
  • If set to false, file selector remains above selected image while ImagerJs is in edit mode.