Concepts

Media Manager

By default the Froala Rich Text Editor's media manager displays images stored on our servers and it just simulates the delete behavior. In order to display the images from your own server you have to use a server-side language. This tutorial is meant to help you understand how the editor's media manager works.

Flow

1. Include the media manager plugin file.

   The media manager is a plugin for the WYSIWYG HTML editor and the media_manager.min.js file must be included before being able to use it.

   
   

2. Set the editor's media manager options.

   When using the media manager, you can customize up to 7 parameters: preloaderSrc,  imagesLoadURL,  imagesLoadParams,  editable.imagesLoadError,  editable.imagesLoaded,  imageDeleteURL and imageDeleteParams.
   • preloaderSrc is the path to a gif file to be displayed while loading the images from the server in the media manager. If this option is not used then a loading text will appear.
   • imagesLoadURL is the URL where the request to load the images is made.
   • imagesLoadParams are additional parameters that are passed in the load images request to the server.
   • editable.imagesLoadError event is triggered if any errors occur while loading the images list from the server in the media manager.
   • editable.imagesLoaded event is triggered after the request to load images in the media manager has been completed successfully.
   • imageDeleteURL Is the URL where the request to delete an image is made.
   • imageDeleteParams are additional params that are passed in the delete request to the server.
   

   
   

3. AJAX request from editor to the imagesLoadURL link.

   When the media manager button is clicked, a HTTP request is automatically made to the server in order to retrieve the list with images to be displayed.

   
   

4. The server processes the HTTP request to load images.

   The server has to process the GET request and return an array of links for the images. The returned array needs to look like: ['http://example.com/image1.png', 'http://example.com/path/my_image.jpg']

   If you need help with the server side process please read the Media Manager in PHP server integration example.

   
   

5. The editor loads the images in the media manager.

   When the request finishes successfully the editable.imagesLoaded event is triggered and the rich text editor will load the images in the media manager. If the returned array does not follow the right structure or the image cannot be loaded, editable.imagesLoadError event is triggered.

   
   

6. AJAX request from editor to the imageDeleteURL link.

   When the delete button on an image in the media manager is clicked, a HTTP request is automatically made to the server with a src parameter containing the image file name.

   
   

7. The server processes the HTTP request to delete the image.

   The server has to process the request and physically delete the image. An example for this action can be found in the Media Manager in PHP server integration example.

Note: Returning a JSON with an error field will throw an error with the custom message contained. E.g. { error: 'My custom error message.' }

The following snippet highlights how to initialize the Froala WYSIWYG HTML Editor in order to use the media manager.

// Include the media manager plugin.
<script src="../js/plugins/media_manager.min.js"></script>

<script>
  $(function() {
    $('.selector')
      .editable({
        // Set a preloader.
        preloaderSrc: "/images/loader.gif",

        // Set the load images request URL.
        imagesLoadURL: "http://example.com/load_images",

        // Additional load params.
        imagesLoadParams: {user_id: 4219762},

        // Set the load images request URL.
        imageDeleteURL: "http://example.com/delete_image",

        // Additional delete params.
        imageDeleteParams: {param: 'value'}
      })
      .on('editable.imagesLoadError', function (e, editor, error) {
        // Custom error message returned from the server.
        if (error.code == 0) { ... }

        // Bad link. One of the returned image links cannot be loaded.
        else if (error.code == 1) { ... }

        // Error during HTTP request to load images.
        else if (error.code == 2) { ... }

        // Missing imagesLoadURL option.
        else if (error.code == 3) { ... }

        // Parsing response failed.
        else if (error.code == 4) { ... }
      })
      .on('editable.imagesLoaded', function (e, editor, data) {
        // Do something when the request finishes with success.
        alert ('Images have been loaded.');
      });
  });
</script>