{"id":390,"date":"2012-02-24T11:59:00","date_gmt":"2012-02-24T11:59:00","guid":{"rendered":"https:\/\/staging.infragistics.com\/blogs\/?p=390"},"modified":"2025-02-25T13:37:51","modified_gmt":"2025-02-25T13:37:51","slug":"rich-text-editing","status":"publish","type":"post","link":"https:\/\/www.infragistics.com\/blogs\/rich-text-editing","title":{"rendered":"Rich Text Editing with Infragistics HTML Editor in both jQuery and ASP.NET MVC"},"content":{"rendered":"\n

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 \u2013 it\u2019s not that surprising some controls didn\u2019t get their full share of the spotlight.<\/p>\n\n\n\n

I am talking about the jQuery-based, WYSIWYG-implementing HTML Editor control. WYSIWYG stands for \u2018what you see is what you get\u2019 (read on about it on Wikipedia<\/a>), which is exactly what in its core this control is meant to provide. Transforming the opening and closing angle brackets ( \u201c<\u201d and \u201c>\u201d) into equivalent HTML \u2013 \u201c&lt\u201d\/\u201d&gt\u201d. 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 \u2013 some servers block such content as potential threat. Even if you haven\u2019t noticed, this kind of functionality is offered pretty much anywhere user generated content is supported \u2013 like this blog, the comments, forums, etc.<\/p>\n\n\n\n

And now you can provide your users with that kind of functionality using the igHtmlEditor widget and much more!<\/p>\n\n\n\n

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\u2019s 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.<\/p>\n\n\n\n

Getting Started<\/h2>\n\n\n\n

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 \u201cig.ui.min.js\u201d file, but rather in its own \u201cig.ui.htmleditor.min.js\u201d. The latter is actually the only required script file to include after the jQuery ones.<\/p>\n\n\n\n

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<\/a>, where you can read exactly how to find and manage the required resources.<\/p>\n\n\n\n

I will, of course, provide a combined piece of code you can use for reference ( assuming you have \u2018Scripts\u2019 and \u2018themes\u2019 folders by default) and adding the igHtmlEditor to the page is as trivial as it gets \u2013 an HTML DIV element as container and a line of script to create a new instance of the widget in JavaScript  and it\u2019s just as easy in ASP.NET MVC. Combined code snippets for both:<\/p>\n\n\n\n

<!-- ## Javascript\/HTML ## -->\n    <!-- CSS -->\n    <link href=\"..\/..\/themes\/min\/ig\/jquery.ui.custom.min.css\" rel=\"stylesheet\" type=\"text\/css\" \/>\n    <link href=\"..\/..\/themes\/base\/ig.ui.min.css\")\" rel=\"stylesheet\" type=\"text\/css\" \/>\n    <!-- Scripts -->\n    <script src=\"..\/Scripts\/jquery.min.js\"><\/script>\n    <script src=\"..\/Scripts\/jquery-ui.min.js\"><\/script>\n    <script src=\"..\/Scripts\/ig.ui.htmleditor.min.js\"><\/script>\n    <!-- in the body of the document: -->\n    <div id=\"HtmlEditor1\"><\/div>\n    <!-- initialize the editor on document ready: -->\n    <script type=\"text\/javascript\">\n        $(document).ready(function () {\n            $(\"#HtmlEditor1\").igHtmlEditor();\n        });\n    <\/script>\n \n<!--## ASP.NET MVC  ##-->\n    <!-- CSS -->\n    <link href=\"@Url.Content(\"~\/Content\/themes\/min\/ig\/jquery.ui.custom.min.css\")\" rel=\"stylesheet\" type=\"text\/css\" \/>\n    <link href=\"@Url.Content(\"~\/Content\/themes\/base\/ig.ui.min.css\")\" rel=\"stylesheet\" type=\"text\/css\" \/>\n    <!-- Scripts -->\n    <script src=\"@Url.Content(\"~\/Scripts\/jquery-1.5.1.min.js\")\" type=\"text\/javascript\"><\/script>\n    <script src=\"@Url.Content(\"~\/Scripts\/jquery-ui-1.8.11.min.js\")\" type=\"text\/javascript\"><\/script>\n    <script src=\"@Url.Content(\"~\/Scripts\/ig.ui.htmleditor.min.js\")\" type=\"text\/javascript\"><\/script>\n    <!-- in your View: -->\n    @using Infragistics.Web.Mvc\n    @( Html.Infragistics().HtmlEditor().Render()\n    )<\/pre>\n\n\n\n
Features, Features, Features!<\/h2>\n\n\n\n
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\u2019t 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.<\/p>\n\n\n\n
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:<\/p>\n\n\n\n
\"Rich<\/figure>\n\n\n\n
<\/p>\n\n\n\n
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 \u2013 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<\/a> path and the user can click on each DOM tree element to have its content highlighted in the editing area. That\u2019s 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 \u2018design\u2019 and source view in a click of a button:<\/p>\n\n\n\n
\"jQuery<\/figure>\n\n\n\n
<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
Furthermore, there was also copied text, which was there to show that the Editor comes with Clipboard support for all common operations \u2013 cut, copy and paste. And it\u2019s not just different text styles being preserved inside the editing area \u2013 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\u2019s all HTML based. What you really can do is copy from MS Word , yes, you can and it looks like that:<\/p>\n\n\n\n
\"jQuery<\/figure>\n\n\n\n
<\/p>\n\n\n\n
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:<\/p>\n\n\n\n
\"jQuery<\/figure>\n\n\n\n
<\/p>\n\n\n\n
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:<\/p>\n\n\n\n
\"jQuery<\/figure>\n\n\n\n
<\/p>\n\n\n\n
On the toolbar can also be found buttons for removing or adding new rows and columns with one click.<\/p>\n\n\n\n
Customization<\/h2>\n\n\n\n
When mentioned there isn\u2019t much you have to set from developers\u2019 view, it doesn’t mean the widget can\u2019t 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 \u201call\u201d, 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:<\/p>\n\n\n\n