Getting Started: Redactor Plugin - carstenschaefer/ImagerJs GitHub Wiki

A simple example of using ImagerJs as a Redactor plugin.

Adding to Site

<!DOCTYPE HTML>
<html>
    <head>
        <link rel="stylesheet" href="font-awesome/4.2.0/css/font-awesome.min.css" />
        <link rel="stylesheet" href="redactor/redactor.min.css" />
        <link rel="stylesheet" href="imagerJs/imagerJs.min.css" />
    </head>
    <body>
        <textarea class="redactor" cols="30" rows="10"></textarea>
        <script src="jQuery/jquery-1.10.1.min.js"></script>
        <script src="redactor/redactor.min.js"></script>
        <script src="imagerJs/imagerJs.min.js"></script>
        <script src="imagerJs/ImagerJsLocalization.js"></script>
        <script src="imagerJsConfig.js"></script>
        <script>
            $(document).ready(function () {
                $('.redactor').redactor(redactorConfig);
      
                // apply german translations
                ImagerJs.translations.set(window.ImagerJsGerman);
            });
        </script>
    </body>
</html>

Script: imagerJsConfig.js

var pluginsConfig = {
      Crop: {
        controlsCss: {
          width: '15px',
          height: '15px',
          background: 'white',
          border: '1px solid black'
        },
        controlsTouchCss: {
          width: '25px',
          height: '25px',
          background: 'white',
          border: '2px solid black'
        }
      },
      Rotate: {
        controlsCss: {
          width: '15px',
          height: '15px',
          background: 'white',
          border: '1px solid black'
        },
        controlsTouchCss: {
          width: '25px',
          height: '25px',
          background: 'white',
          border: '2px solid black'
        }
      },
      Resize: {
        controlsCss: {
          width: '15px',
          height: '15px',
          background: 'white',
          border: '1px solid black'
        },
        controlsTouchCss: {
          width: '25px',
          height: '25px',
          background: 'white',
          border: '2px solid black'
        }
    }
};
 
var imagerOptions = {
      plugins: ['Rotate', 'Crop', 'Resize', 'Toolbar', 'Save', 'Delete'],
      waitingCursor: 'wait', // for predefined css cursors
      editModeCss: {
        border: '2px solid red',
        background: 'url(../assets/transparent.png)'
      },
      pluginsConfig: pluginsConfig,
      quality: {
        sizes: [
            { label: 'Original', scale: 1, quality: 1, percentage: 100 },
            { label: 'Large', scale: 0.5, quality: 0.5, percentage: 50 },
            { label: 'Medium', scale: 0.2, quality: 0.2, percentage: 20 },
            { label: 'Small', scale: 0.05, quality: 0.05, percentage: 5 }
        ],
        allowCustomSetting: false
      }
};      
var redactorConfig = {
      plugins: ['ImagerJs'],
      ImagerJs: {
        contentConfig: {
          saveImageData: function (imageId, imageData) {
            try {
              localStorage.setItem('image_' + imageId, imageData);
            } catch (err) {
              console.error(err);
            }
          },
          loadImageData: function (imageId) {
            return localStorage.getItem('image_' + imageId);
          }
        },
        hideFileSelection: true,
        quality: {
          sizes: [
            { label: 'Original', scale: 1, quality: 1, percentage: 100 },
            { label: 'Large', scale: 0.5, quality: 0.5, percentage: 50 },
            { label: 'Medium', scale: 0.2, quality: 0.2, percentage: 20 },
            { label: 'Small', scale: 0.05, quality: 0.05, percentage: 5 }
          ]
        },
        // here we use the same options config. It is possible and suggested to use
        // separate configs to get a different appearance of ImagerJs when initially
        // selecting an image from file or when selecting an image inside of redactor
        redactor: imagerOptions,
        preview: imagerOptions
      }
};

Script: ImagerJsLocalization.js

window.ImagerJsGerman = {
  'Incorret file type': 'Unzulässiger Dateityp',
  'Insert': 'Einfügen',
  'Cancel': 'Abbrechen',
  'Add image': 'Bild hinzufügen',
  'Quality': 'Qualität',
  'Rotate': 'Rotieren',
  'Crop': 'Zuschneiden',
  'Original': 'Original',
  'KB': 'KB',
  'Large': 'Groß',
  'Medium': 'Mittel',
  'Small': 'Klein',
  'Custom quality percent': 'Eigene Qualitätseinstellung',
  'Custom': 'Eigene Einstellung',
  'Image properties': 'Bild Eigenschaften',
  'Size:': 'Größe:',
  'width in px': 'Breite in px',
  'height in px': 'Höhe in px',
  'Left': 'Links',
  'Right': 'Rechts',
  'Center': 'Zentriert',
  'Inline': 'Inline',
  'Floating': 'Floating',
  'Transparent background': 'Transparenter Hintergrund',
  'Apply': 'Anwenden',
  'Reject': 'Widerrufen',
  'Delete image': 'Bild löschen',
  'Move image': 'Bild verschieben',
  'Are you sure want to delete this image?': 'Sicher, dass Sie das Bild löschen möchten?',
  'Or drop files here': 'Oder Datei hierher ziehen und loslassen',
  'No file selected.': 'Keine Datei ausgewählt.',
  'Please wait...': 'Bitte warten...',
  'Save': 'Speichern',
  'Undo': 'Rückgängig',
  'Rotate manually': 'Manuell drehen',
  'Rotate 90 left': '90 Grad nach links drehen',
  'Rotate 90 right': '90 Grad nach rechts drehen',
  'Image is too big and could cause very poor performance.': 'Image is too big and could cause very poor performance.'
};
⚠️ **GitHub.com Fallback** ⚠️