ASP.NET MVC 1.0 Test Driven Development: Problem - Design - Solution

12.3. Solution

If you use the out-of-the-box "Insert Image" button, you will get the dialog shown in Figure 12-1. If we insert a URL to a picture, we see something like Figure 12-2.

Figure 12-2. Figure 12-2

We can overwrite the default button behavior to execute custom JavaScript using the following code:

$("#html").wysiwyg({
    controls: {
        html: { visible: true },
        insertImage: {
            visible: true,
            exec: function() { alert("insert image button clicked"); }
        }
    }
});

This simply tells the editor to make the "Insert Image" button visible and to have it execute our custom code. If we click the button, we get the Alert box shown in Figure 12-3.

Now we have an entry point into our custom code. Instead of displaying an Alert box, we are going to display a modal JavaScript dialog box. We will use the jQuery UI library.

Figure 12-3. Figure 12-3

jQuery UI Library jQuery UI is a widget and interaction library built on top of the jQuery JavaScript Library that you can use to build highly interactive web applications. One component of this library is a Dialog control that allows us to create JavaScript-based modal dialogs. The library is located at http://jqueryui.com and has a configuration utility that customizes your download to include only the components that you need and that comes pre-built ...