Concepts

Delete Image

When an image is removed from the Froala Rich Text Editor, the image is not from the server. In order to delete an image from the server, you have to use the editor events to handle the delete request received from the editor.

Image Delete Flow

1. Set the editor's image events.

   There are 2 events related to image remove: editable.beforeRemoveImage and editable.afterRemoveImage. The one that is of interest for us is afterRemoveImage, because it is triggered right after the image is removed from the WYSIWYG HTML editor.

   
   

2. Make request to the server to delete the image.

   After the image is removed from the editor, the server should be notified to delete the physical image. deleteImage method can be used to make a request to the server and delete the image. It makes a HTTP POST request to the delete URL specified in imageDeleteURL option. Of course, you can use your own script to delete the image instead of using this method built into the WYSIWYG HTML editor.

   
   

3. The server processes the HTTP request.

   The server has to interpret the request and remove the stored image and return a success status if there is no problem with the request and the deletion.

   
   

4. Catch server response.

   On successful response from the server, the editable.imageDeleteSuccess event will be triggered. Similar, if there is any problem with the request the the editable.imageDeleteError event will be triggered.

   
   

The following snippet highlights how to initialize the Froala WYSIWYG HTML editor in order to delete files when they are removed from the editor.

<script>
  $(function() {
    $('.selector')
      .editable({
        // Set image delete URL.
        imageDeleteURL: '/delete_image.php'
      })

      // Catch image remove
      .on('editable.afterRemoveImage', function (e, editor, $img) {
        // Set the image source to the image delete params.
        editor.options.imageDeleteParams = {src: $img.attr('src')};

        // Make the delete request.
        editor.deleteImage($img);
      })

      // Catch image delete successful.
      .on('editable.imageDeleteSuccess', function (e, editor, data) { ... })

      // Catch image delete error.
      .on('editable.imageDeleteError', function (e, editor, error) { ... });
  });
</script>