Days
Hours
Minutes
Seconds
x

Froala Editor v4.2.0 is Here LEARN MORE

Skip to content

.NET Image Manager

How it works

  1. You specify the image load options when the javascript editor is initialized on client side.
  2. When the Image Manger modal is displayed, the javascript editor makes a request to the server to load the images.
  3. Once the request hits the server, it returns the list with the images to display in the rich text editor.
  4. The javascript editor processes the response of the server and renders the images in its interface.

Jump to Complete Example

Initialize the javascript editor

To get started, the javascript editor needs to have the imageManagerLoadURL and imageManagerDeleteURL options so that it can interact with your server to load or delete the images listed inside the Image Manager tool. Additionally, you can set other options related to the interaction between your server and the rich text editor: imageManagerLoadMethod, imageManagerLoadParams, imageManagerPreloader, imageManagerDeleteParams.

<script>
  $(function() {
    $('.selector').froalaEditor({
      // Set the image upload URL.
      imageManagerLoadURL: '/FroalaApi/LoadImages',

      // Set the image delete URL.
      imageManagerDeleteURL: '/FroalaApi/DeleteImage'
    })
  });
</script>

Receive the load request

The server implementation is responsible for receiving the request and handling it appropriately. The WYSIWYG editor's .NET SDK comes with the possibility to load all the images inside a specified folder using the FroalaEditor.Image.List method.

Note: The path of the folder from where the images are being loaded is relative to the root of the project.

string uploadPath = "/Public/";
object response = FroalaEditor.Image.List(System.Web.HttpContext.Current, uploadPath);

Receive the delete request

Your server should listen for any delete request and process it accordingly. Using the code from the Editor Initialization step, makes the image path available in the HttpContext global variable. The FroalaEditor.Image.Delete method from the .NET SDK is expecting the path of the image to remove from disk.

FroalaEditor.File.Delete("/Public/" + HttpContext.Request.Form["src"]);

Complete Example

<script>
  $(function() {
    $(function() {
      $('.selector').froalaEditor({
        // Set the image upload URL.
        imageManagerLoadURL: '/FroalaApi/LoadImages',

        // Set the image delete URL.
        imageManagerDeleteURL: '/FroalaApi/DeleteImage'
      })
    });
  });
</script>
using System;
using System.Web.Mvc;

namespace demo.Controllers
{
    public class FroalaApiController : Controller
    {
        public ActionResult LoadImages()
        {
            string uploadPath = "/Public/";

            try
            {
                return Json(FroalaEditor.Image.List(System.Web.HttpContext.Current, uploadPath));
            }
            catch (Exception e)
            {
                return Json(e);
            }
        }

        public ActionResult DeleteImage()
        {
            try
            {
                FroalaEditor.Image.Delete("/Public/" + HttpContext.Request.Form["src"]);
            }
            catch (Exception e)
            {
                return Json(e);
            }


            return Json(true);
        }
    }
}
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1960697684" 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_1484192288" 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_144350622" 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>