Along all the exciting features introduced for NetAdvantage for jQuery 11.2 release (read: new Hierarchical grid, tree, combo controls) and CTP Charting with Motion Framework – it’s not that surprising some controls didn’t get their full share of the spotlight. I am talking about the jQuery-based, WYSIWYG-implementing HTML Editor control. WYSIWYG stands for ‘what you see is what you get’ (read on about it on Wikipedia), which is exactly what in its core this control is meant to provide. Transforming the opening and closing angle brackets ( “<” and “>”) into equivalent HTML – “&lt”/”&gt”. That is just an example but it is what my blog editor does as well, so those can be properly presented by the browser and not only – some servers block such content as potential threat. Even if you haven’t noticed, this kind of functionality is offered pretty much anywhere user generated content is supported – like this blog, the comments, forums, etc.

And now you can provide your users with that kind of functionality using the igHtmlEditor widget and much more!

Here should be mentioned the HTML Editor is CTP ( Community Technology Preview ) which mean it is still in the beta stage of its development. For that reason, until its official release nothing set in stone, but then again, there’s also no reason not to give it a try and get to know the control ahead of time. It is also advisable if you use the latest service release version.

Getting Started

The widget is built on top of jQuery UI, therefore as with other NetAdvantage for jQuery controls you will need first jQuery and then jQuery UI added to your page. The script for the igHtmlEditor, however, is not included in the default “ig.ui.min.js” file, but rather in its own “ig.ui.htmleditor.min.js”. The latter is actually the only required script file to include after the jQuery ones.

The default styles, you might be already familiar already with, are also required. Once more, I will encourage you to check out our Deployment Guide, where you can read exactly how to find and manage the required resources.

I will, of course, provide a combined piece of code you can use for reference ( assuming you have ‘Scripts’ and ‘themes’ folders by default) and adding the igHtmlEditor to the page is as trivial as it gets – an HTML DIV element as container and a line of script to create a new instance of the widget in JavaScript  and it’s just as easy in ASP.NET MVC. Combined code snippets for both:

Once you have that done and you might want to access the HTML in the control and you can do that using a method provided in this post on our jQuery Forums’ section.

Features, features, features!

Even though it is not finished, the jQuery Html Editor widget has an impressive array of features. In its current implementation almost all of them are provided without the need for further customization, so from developer perspective there aren’t that many things you have to set and the users always get a handful. Almost everything the user has access to is located in a toolbar area on top and options are grouped neatly in relevant sets.

The best part is that among them can be found tools for rich text formatting that almost any user would immediately recognize and feel comfortable using. One comprehensive editing experience only recognized after a visual demonstration:

Everything on the screenshot (well, except the width of the control I did alter so it would fit in this page) is as the widget creates it by default – fonts and sizes, bold and italic, underline and strikethrough, text alignment options, lists and bullets, indent control, etc. Apart from the tools on top, the control also conveniently displays the full current DOM path and the user can click on each DOM tree element to have its content highlighted in the editing area. That’s really neat when the user needs to be aware how his input is being handled behind the scenes, but should that not be enough, well the widget provides functionality to switch between the default ‘design’ and source view in a click of a button:

This is the source of the fonts demonstrated in the previous screenshot and you can also see them being applied as styles to the containers.

Furthermore, there was also copied text, which was there to show that the Editor comes with Clipboard support for all common operations – cut, copy and paste. And it’s not just different text styles being preserved inside the editing area – you can actually paste rich text and its formatting will remain the way you saw it originally. You can very well copy from a webpage and paste in the editor, but that seems not that impressive considering it’s all HTML based. What you really can do is copy from MS Word , yes, you can and it looks like that:

Moreover,  the user is provided with an easy way to insert content, other then pasting it. The toolbar offers dialogs to insert both images and links:

There is one more dialog available, and it lets the user add HTML table element with little to no effort and defining the number of columns and rows in a natural way by dragging their pointer to the desired size:

On the toolbar can also be found buttons for removing or adding new rows and columns with one click.

Customization

When mentioned there isn’t much you have to set from developers’ view, it doesn't mean the widget can’t be customized to fit your needs. When setting up the control you are allowed to define the toolbar items to be presented to the users. The default is of course “all”, but the activeToolbars property allows for custom set of toolbars to be defined. The property accepts a single string containing the names of the toolbars to use and here is a list of the default ones:

• fontProperties
• textFormat
• textAlign
• textIndent
• table
• source

But surely you are not fooled this is where customization stops – there is, of course, an option to add your own toolbar. All toolbars contain button and combo elements, namely igButton and igCombo, that can be added as items to your custom toolbar. The igButton is our styled version of the jQuery UI button and the igCombo is part of our NetAdvantage for jQuery product.

For example, let’s add a button that would link to Infragistics homepage to the toolbar and I’ve added a nice logo to it for good measure. Here is the snippet to add your own to the ‘toolbars’ property along with setting the active ones in both JavaScript and ASP.NET MVC 3 with Chaining and Razor syntax :

Yours will be added automatically, because the default active toolbars being ‘all’, but you can of course name it and include it to the list to be used as seen above. And the very same method can be used to add igCombo(s) or just more buttons. Here is how the result from the code above can look (notice the last button is our custom toolbar addition and clicking it opens the Infragistics homepage in a new tab/window):

Conclusion

The jQuery HTML Editor provides rich text formatting driven by pure client-side scripts and has set course to offer a combination of familiar and rather instinctive features and the end goal is to provide the user with amazing experience and comprehensive toolset. And the ability to create your own toolset and add it to the toolbar means this control can be as customizable as you are willing to make it. And as it is expected, it can be styled with the jQuery Themeroller and you can find instructions of that in the Deployment Guide linked above as well.

You can visit our NetAdvantage for jQuery Online Samples and you can also download the demo project for this blog, that contains a APS.NET MVC3 project with both Razor and jQuery only implementations.