Image editing is a powerful feature for every WYSIWYG editor. It significantly enhances the capabilities of an application and delights users who want to do more with their uploaded images.

Nowadays, users expect applications to have image editing features, but implementing such features is not as trivial as it sounds.

For example, in some LMS, CMS, and document management systems, users require image editing within a

Once we get our editor running, we’ll add image editing features by enabling the natively integrated Filestack plugin. We do that by specifying options for the editor:

new FroalaEditor('#froala-editor',{

    filestackOptions: {

        filestackAPI: 'YourFilestackAPIKey',

        uploadToFilestackOnly: true,

        pickerOptions: {

            accept: [

                '.pdf',

                'image/jpeg',

                'image/png',

                'image/*',

                'video/*',

                'audio/*'

            ],

            fromSources: [

                'local_file_system',

                'url',

                'facebook',

                'instagram'

            ]

        }

    },

    toolbarButtons: {

        'moreRich': {

            'buttons': ['openFilePickerImageOnly', 'openFilePickerVideoOnly', 'openFilePicker', 'insertLink', 'insertTable', 'emoticons', 'specialCharacters', 'insertHR'],

            'buttonsVisible': 3

        },

        'moreText': {

            'buttons': ['bold', 'italic', 'underline', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'clearFormatting']

        },

        'moreParagraph': {

            'buttons': ['alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', 'formatOL', 'formatUL', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'outdent', 'indent', 'quote']

        },

        'moreMisc': {

            'buttons': ['undo', 'redo', 'fullscreen', 'selectAll', 'html', 'help'],

            'align': 'right',

            'buttonsVisible': 2

        }

    },

    events: {

        'filestack.uploadedToFilestack': function (response) {

            console.log("Callback is triggered for upload to Filestack ",)

        },

        'filestack.filestackPickerOpened': function (response) {

            console.log("Callback is triggered for picker opened ",)

        },

        'filestack.filestackPickerClosed': function (response) {

            console.log("Callback is triggered for picker closed ",)

        },

        'filestack.uploadFailedToFilestack': function (response) {

            console.log(response);

        },

    },

    heightMin: 500,

    heightMax: 1000

});

Here, we declared some options for the editor’s toolbar buttons, size, events, and additional options for Filestack. In the filestackOptions property, we declared our Filestack API key, a boolean that determines whether files are uploaded exclusively to Filestack, and a few picker options. These options determine the allowed file types and sources.

And if you haven’t already, get an API key by creating a

Notice how the editor now has better sizing. More importantly, we now have buttons with the Filestack icons in them. These buttons allow users to upload images, videos, and other files through Filestack. Now, to show you some of the Filestack plugin’s capabilities, let’s dive into some image editing use cases.

Use Cases for Image Editing within the WYSIWYG Editor

Cropping an Image

After uploading an image, click on it, and a Filestack icon should show up beside it. Click the icon to enter the file transformations view. Under the “Transform” tab, choose “Crop” and adjust the image to your liking. Note that you can crop and rotate the image even before you upload it. Let’s upload an image and crop it afterwards using Filestack transformations.

Adding and Enhancing Text

Whether it’s for adding titles to chapter titles or prices to products or real estate listings, text is essential for image editing. Using Froala Editor, you can add text with different fonts and styling. Using the image from earlier, let’s add some text and enhance it.

After clicking “Save,” we should see our enhanced image on the editor. From there, you can check the uploaded image on your Filestack dashboard. Go to “Content Browser” and you’ll see our image, which you can download separately or on your application. For reference, here’s how the image should look after performing all these operations:

.