40% Off On All Plans + 3 Months of Platinum Support
Days
Hours
Minutes
Seconds
x

New Froala Editor v5.0.0 is here โ€“ Learn More

Pricing
Get Started
Skip to content

    Handling images in WYSIWYG Editors

    It is said “A picture is worth a thousand words”, Look around you, images are in all places. You will find it in articles, forum topics, web pages, and reports. This indicates how important images are to us nowadays. .

    If you are using a WYSIWYG editor there are big chances that you want to insert images. While inserting an image is a common feature in all WYSIWYG editors but handling an image after inserting it, unless you are using the right editor, could be like banging your head against a brick wall, you could spend a couple of hours trying to resize the image without founding how to do it, or it could require you to write an HTML code to do what you are trying to do.


    In this article we will compare how different WYSIWYG editors handle images, our WYSIWYG editors list will include:
    1. Froala
    2. TinyMCE
    3. CKEditor
    4. Editor.js
    5. Summernote
    6. Quill
    7. ContentTools
    8. Trix
    9. ProseMirror

      There are multiple ways for inserting images at Trix:
    1. The default way for inserting an image is done by pasting the image URL using an old-fashioned pop-up:
      1. Click the location in the editor where you want to insert the image.
      2. Click on the โ€œInsertโ€ button from the editor toolbar.
      3. Choose โ€œImageโ€ from the appeared dropdown menu, a pop-up will appear.
      4. Paste the image URL into the location field, optionally, you can set the title and .description fields.
      5. Click the โ€œEnterโ€ keyboard button
    2. Pasting copied content from the web
    3. Pasting images by drag-n-drop
    4. Another way, that needs a custom javascript code, is by placing an uploading image button outside the editor
      After inserting image to ProseMirror editor there is no options to edit it
      Images can be dragged to a new location by clicking in the center of the image and dragging.
      Images can be deleted using the backspace or delete keyboard buttons.

    ๏ปฟAnimated Trix to Froala editor migration demo showing rich text editing interface.๏ปฟ
      There are multiple ways for inserting images at Trix:
    1. Uploading file from the device:
      1. Click the location in the editor where you want to insert the image.
      2. Click on the โ€œattachmentโ€ icon from the editor toolbar.
      3. Choose the Image file.
    2. Pasting copied content from the web
    3. Pasting images by drag-n-drop
    1. Images can be dragged to a new location by clicking in the center of the image
      and dragging.
    1. Click on the image.
    2. โ€œAdd a captionโ€ placeholder will appear under the image
    3. Write a caption

    Animated Trix to Froala editor migration demo showing rich text editing interface.

    1. Click on the image.
    2. A delete button will appear on the top of the image.
    3. Click on the image delete button.

    Animated Froala editor toolbar with text formatting tools.
      There is only one way for inserting an image by using the uploading dialog:
    1. Click the Edit button to start editing the editable area of the page.
    2. Click the location where you want to insert the image.
    3. Click on the โ€œImageโ€ icon from the editor toolbox.
    4. Click on the โ€œUploadโ€ button from the appeared โ€œInsert Imageโ€ modal.
    5. Choose the Image file.
    6. A preview of the chosen image will appear on the โ€œInsert Imageโ€ modal, with buttons to rotate and crop the image which does not work by default as it needs a server-side API to support it.
    7. Click on โ€œInsertโ€ button
    1. Click and hold in any corner then drag to adjust the size as required. While you’re
      resizing, the dimensions will be displayed in the top right hand corner of the
      element.

    ย 

      1. Images can be dragged to a new location by clicking in the center of the image

    ย 

      and dragging.
    1. Click on the image.
    2. Click on the โ€œDeleteโ€ icon from the editor toolbox or by pressing the
      โ€œdeleteโ€ key.

      There are multiple ways for inserting images at Quill:
    1. Uploading file from the device:
      1. Click the location in the editor where you want to insert the image.
      2. Click on the โ€œimageโ€ icon from the editor toolbar.
      3. Choose the Image file.
    2. Pasting copied content from the web
    3. Pasting images by drag-n-drop

    ย 

      1. Images can be dragged to a new location by clicking in the center of the image

    ย 

      and dragging.

    ย 

      Images can be deleted using the backspace or delete keyboard buttons.
        • There is unofficial modules that can be used to enable these features:
        • Inserting images by โ€œdrag and dropโ€
        • Change images Alignment
        • Resize images

    ๏ปฟEditor interface animation showing editing and formatting controls.๏ปฟ
      There are multiple ways for inserting images at Editor.js:
    1. Uploading file from the device
    2. Pasting the image URL into the Editor
    3. Pasting copied content from the web
    4. Pasting images by drag-n-drop

    Image consider as a block element, it moved between blocks by:

    1. Click on the โ€œtune blockโ€ button.
    2. Click on the โ€œup-arrowโ€ icon or โ€œdown-arrowโ€ icon.

    Drag the image to another place, do not move it, it copies the image to the new
    position without removing the original image.

    Image can deleted by:

    1. Click on the โ€œtune blockโ€ button.
    2. Click on the โ€œdeleteโ€ icon.
    1. Add border to the image
    2. Add a background to the image
    3. Stretch an image to the container’s full-width.
    4. Add Image Caption.

    While it looks a good features but it is very specific, e.g you can choose to add a
    background but you canโ€™t specify the color of the background, you can choose to change the image width to be as the containerโ€™s full-width, but you canโ€™t specify
    or resize it to a custom width.

      There are multiple ways for inserting images at Summernote
      1. Uploading file from the device
      2. Using insert image URL dialog
      3. Pasting copied content from the web
      4. Pasting images by drag-n-drop
    Summernote has an image edit popup that has three options for resizing an image to one of the following percentage:

    25% – 50% -100%

    And has an option to restore the image original size Summernote also allows resizing an image by holding in any corner then dragging to adjust the size as required.
    Summernote has an image edit popup that has three options for aligning an image:
    Float Right – Float Left – Remove Float
    Image can deleted by one of these action:
    1. Click on the โ€œDeleteโ€ button from the image edit popup.
    2. Using the backspace or delete keyboard buttons.

    Animated GIF comparing CKEditor and Froala editor features and interface
      There are multiple ways for inserting images at CKEditor:
      1. Uploading file from the device
      2. Pasting copied content from the web
      3. Pasting images by drag-n-drop

    CKEditor allows resizing an image by holding in any corner then dragging to adjust the size as required.

    CKEditor has an image edit popup that has three options for aligning an image:

    Right aligned – Left aligned – Center

    1. Click on the image.
    2. โ€œAdd a captionโ€ placeholder will appear under the image
    3. Write a caption

    CKEditor image edit popup that has an option to set image alternative text.

    To make it easy to separate images from its surrounding content, once you click
    on an image, an โ€œinsert empty paragraphโ€ button appears at the top and the
    bottom of the image.

    CKEditor automatically optimizes images before displaying it on the editor.

    Images can be dragged to a new location by clicking in the center of the image
    and dragging.

    Images can be deleted using the backspace or delete keyboard buttons.

    TinyMCE editor toolbar animation.
      There are multiple ways for inserting images at TinyMCE:
      1. Uploading file from the device
      2. Using insert image URL dialog
      3. Paste the image URL into the Editor
      4. Paste copied content from the web
      5. Paste images by drag-n-drop
      6. Paste multiple images by drag-n-drop

    TinyMCE allows resizing an image by two ways:

    1. Holding in any corner then dragging to adjust the size as required.
    2. Enter a custom width or/and height in the TinyMCE’s โ€œimage optionโ€
      dialog

    TinyMCE editor toolbar animation.TinyMCE’s โ€œimage optionโ€ dialog has three options for aligning an image:

    Align Right – Align Left – Align Center

    TinyMCE editor toolbar animation.You can add an image caption but first you should activate this option from
    TinyMCE’s โ€œimage optionโ€ dialog, then

    1. Click on the image.
    2. โ€œAdd a captionโ€ placeholder will appear under the image
    3. Write a caption

    TinyMCE’s โ€œimage optionโ€ dialog has an option to set image alternative text.

    From the โ€œUploadโ€ tab of TinyMCE’s โ€œimage optionโ€ dialog, you can
    upload/drag-n-drop another image to replace the current one.

    Images can be dragged to a new location by clicking in the center of the image
    and dragging.

    To add link to an image

    1. Select image
    2. Open the โ€œAdd linkโ€ dialog by one of these ways:
      1. Right click of the mouse and select โ€œlinkโ€ option
      2. Click on the add link icon from the editor toolbar
    3. Set the link and its options then click on the โ€œSaveโ€ button

    You can remove the link by:

    1. Select image
    2. Right click of the mouse and select โ€œRemove linkโ€ option

    From the โ€œAdvancedโ€ tab of TinyMCE’s โ€œimage optionโ€ dialog, you can set the
    margin, border width and border type.

    TinyMCE’s โ€œimage optionโ€ dialog has an option to set a CSS class to an image.

    TinyMCE using an advanced image editor to allow these functionality:

    1. Rotates selected image 90 degrees clockwise.
    2. Rotates selected image 90 degrees counterclockwise
    3. Flips selected image vertically.
    4. Flips selected image horizontally.
    5. Crop image.
    6. Adjust image brightness.
    7. Adjust image sharpen.
    8. Adjust image contrast.
    9. Adjust image color level.
    10. Adjust Gamma.
    11. Invert image color.

    Images can be deleted using the backspace or delete keyboard buttons.

    There are multiple ways for inserting images at Froala WYSIWYG editor :
    1. Uploading file from the device
    2. Using insert image URL dialog
    3. Paste copied content from the web
    4. Paste images by drag-n-drop

    Froala allows resizing an image by two ways:

    1. Holding in any corner then dragging to adjust the size as required.
    2. Enter a custom width or/and height in the Froala’s โ€œimage optionโ€ popup.

    Froala’s โ€œimage optionโ€ popup has three options for aligning an image:

    Align Right – Align Left – None

    Froala’s โ€œimage optionโ€ popup has two options for aligning an image:

    Inline – Break Text

    You can add an image caption:

    1. Click on the image.
    2. Click on โ€œImage Captionโ€ button from Froala’s โ€œimage optionโ€ popup
    3. Write a caption

    Froala’s โ€œimage optionโ€ popup has an option to set image alternative text.

    Froala’s โ€œimage optionโ€ popup has a replace image button.

    Froala allows you to define a custom style through CSS classes then you can
    apply it to the image from the โ€œStyleโ€ list on the Froala’s โ€œimage optionโ€ popup.

    To make it easy to separate images from its surrounding content. hover over the
    top or bottom of an image to reveal a break button. Click this button to add a line
    break. This option is only available when there is not already a line above or
    below the image.

    Froala using TUI advanced image editor to add advanced image editing options
    including but not limited to:

    1. Rotates selected image 90 degrees clockwise.
    2. Flips selected image vertically.
    3. Flips selected image horizontally.
    4. Crop image.
    5. Adjust image brightness.
    6. Adjust image sharpen.
    7. Rotates selected image 90 degrees clockwise.
    8. Adjust image contrast.
    9. Adjust image color level.
    10. Adjust Gamma.
    11. Invert image color.

    Froala’s โ€œimage optionโ€ popup has a button to delete the image, in addition to
    this, Images can be deleted using the backspace or delete keyboard buttons.

    Summary:

    From the above we can conclude that Froala, TinyMCE, and CKEditor are the most advanced editors to handle images, to make it easy to compare between them we list their features in a tabular view below:

    Froala
    TinyMCE
    CKEditor
    Uploading file from the device
    Using insert image URL dialog
    Paste the image URL into the Editor
    Paste copied content from the web
    Paste images by drag-n-drop
    Paste multiple images by drag-n-drop
    Image optimization:
    Holding & drag
    Width and height fields
    Image Alignment options (Float)
    Image Display option
    Style image using classes
    Image Border and margin options
    Add Image Caption
    Image alternative text (ALT)
    Replace image option
    Add Link to an image
    Insert paragraphs before and after image option
    Advanced image editor
    Using Keyboard
    Has a delete image button

    The above table shows that Froala, TinyMCE and CKEditor have a hard competition on the best editor for handling images, so let’s analyze in-depth some features which are supported by one editor and not supported by the other, I believe this will lead to finding out which editor we should use.

    Froala
    TinyMCE
    Inserting image by pasting the image URL into the editor:
    In TinyMCE you can paste an image link and it will replace it automatically with the image that link redirects to. But what if I donโ€™t want the image to appear, I just want to write the link of the image? You need to change TinyMCE options. So I think Froala deals with this better as if I want to display the image I will use the image insert button and choose insert from a link option. The Winner
    The Winner is:
    *
    Froala
    TinyMCE
    Paste multiple images by drag-n-drop
    Of course inserting multiple images at once is a great feature of TinyMCE.
    The Winner is:
    *
    Froala
    TinyMCE
    Image Display option

    Froala not only has options to set image alignment using Float but also has an option to set the display to Inline or text break (block).

    This is a great feature especially if you are using the WYSIWYG editor to build a web page because float cause problems in webpage.

    The Winner is:
    *
    Froala
    TinyMCE
    Insert paragraphs before and after image button
    After playing with images in your editor, you will figure out some situations when it is hard to separate an image from its surrounding content, in such situations an โ€œInsert paragraphsโ€ before and after image buttons are helpful.
    The Winner is:
    *
    Froala
    TinyMCE
    Image Border and margin options

    TinyMCE provides an option to add an image border and another one for adding a margin. In Froala we could edit the style of the image using a predefined CSS classes, which then can be applied to an image from the โ€œStyleโ€ list on the Froala’s โ€œimage optionโ€ popup.

    The TinyMCE option has the disadvantage of being applied directly on the html element, which is not good practice if you are using it on a web page.
    But has the advantage of enabling users who donโ€™t know how to apply classes to edit the image and set the values they want.

    Froala has the advantage of using a Class instead of inline CSS, and it is easy to be applied from the โ€œimage optionโ€ popup.

    The Winner is:
    *
    *
    Froala
    TinyMCE
    Has a delete image button
    It is a nice option, making it easy to delete an image.
    The Winner is:
    *
    Froala
    TinyMCE
    Resize image using width and height fields
    It is a nice option which enables users to enter the exact dimension they want.
    The Winner is:
    *

    User Experience:

    Froala is much better in user experience. It has a simple interface, puts all features in one place making it easy to find, in a clean and elegant design. On the other hand, TinyMCE has a classic, old-fashioned design, you could take some time to find the feature you are looking for.

    Conclusion:

    If you are looking for the best editor for handling images, it is Froala. It has all the required options that give you full control of editing an image, all displayed in a nice popup with the best icons to represent each feature, making it much easier to edit an image with a click of buttons. If you are using another editor, it is easy to migrate to Froala, we have a migration guide that will help you to migrate from any of the above editors in simple steps.