Days
Hours
Minutes
Seconds
x

Froala Editor v4.2.0 is Here LEARN MORE

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.

    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
  1. Click on the image.
  2. A delete button will appear on the top of the image.
  3. Click on the image delete button.

    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.
    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
    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
    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.
    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.
    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’s “image option” dialog has three options for aligning an image:

Align Right – Align Left – Align Center

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.

[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_399534258" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1467732919" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1616408109" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>