<html>
<head>
<title>First time usage and optimizing by using an External StyleSheet for Jiffycms HTML Editor v1.0</title>
</head>
<body>
<p>One of the things you will notice in ASP.NET today is that by default, out of the box there is no standard control representing a rich text editor. You will also notice that your only viable options are quite limited to : </p>
<ul style="list-style-type: lower-alpha;">
<li>FREETEXTBOX --while the name suggests it's free, what is free is only a subset of features while the full version is on a pay basis. </li>
<li>FCKEditor --This is the most highly used editor in the market today due to it being opensource, however, mainly it's just a clientside product with several contributors having written serverside wrappers around the clientside library. The problem with this though is that the web control is simply a wrapper. </li>
<li>You purchase a commercial license from third parties (Quite pricey).</li>
</ul>
<p>Jiffycms HTML Editor is a rich text open source HTML editor with commercial grade features and is a great alternative to all A,B,C points above. It's written for ASP.NET and uses ASP.NET AJAX Extentions to the full potential. It is also a rich server side Web control requiring you to make very little effort to get it running as it uses the VS.NET designer at full potential too. There are just too many features and to list each here is not going to be possible, instead this article will focus on first time usage and specifically how to move the css generated by the WebControl to an external CSS file.</p>
<p>Unlike most html editors, Jiffycms is a true WebControl without any extra dependencies and is packaged as a single dll. Since it is built on top of the AJAX Extensions library, which many people are already referencing in their pages due to their using the UpdatePanel or what not, this also means they are already referencing the AJAX Extensions library, the payload in Client library download size is minimized something which you will incur on other third party editors out there today since they tend to use they own custom libraries. </p>
<p>Here in this post, I want to show case how easy it is to use the Jiffycms HTML Editor in your pages and how to perform some optimizations to get the best performance from your web apps by using an external CSS StyleSheet file. </p>
<ul style="list-style-type: decimal;">
<li>
<div>Firstly, let's try to start from the basics and define a new WebSite Project for the purpose of this tutorial</div>
<div>
<img alt="Create new project VS.NET" src="createnewproject.jpg" />
</div>
</li>
<li>Let's download the Jiffycms HTML Editor dll from Codeplex</li>
<li>Now that we have the dll which is Jiffycms.Net.Toolkit.dll, we are ready to add it to our toolbox in VS.NET </li>
<li>
<div>Before you add it to your toolbox, to help you in better organizing all your custom controls, you may want to create a new tab in the toolbox first and then add the control in there.</div>
<div>
<img alt="Add new tab in VS.NET Toolbox" src="addnewtab.jpg" />
</div>
</li>
<li>
<div>Now right click into your newly created tab empty area and select "Choose Items" from the context menu. You can also simply drag and drop the DLL into the empty area.</div>
<div>
<img alt="Choose Items context menu" src="choose-items.jpg" />
</div>
<div>
<img alt="Browsing for Jiffycms HTML Editor dll" src="dllbrowing.jpg" />
</div>
</li>
</ul>
<p>When your done browsing to the dll you downloaded from codeplex, you should see it in your toolbox at this point and you are ready to start using this fine component.</p>
<div>
<img alt="Jiffycms HTML Editor icon in toolbox" src="toolboxready.jpg" />
</div>
<p>While you may not like working in designview in VS.NET, dragging and dropping the control from the toolbox onto your web form is going to allow the editor to make the initial configs in your web.config file automatically. The registrations it makes can be made manually, it's just a registration for a simple Httphandler in web.config.</p>
<div>If you prefer to do this manually, then make the following entry under the path Configuration/httpHandlers section for IIS6 is as follows :</div>
<table style="width: 100%;">
<tbody>
<tr>
<td style="vertical-align: top; width: 99%;">
<pre><span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">add</span> <span style="color: rgb(255, 0, 0);">verb</span>=<span style="color: rgb(0, 0, 255);">"*"</span> <span style="color: rgb(255, 0, 0);">path</span>=<span style="color: rgb(0, 0, 255);">"jiffycms.axd"</span> <span style="color: rgb(255, 0, 0);">type</span>=<span style="color: rgb(0, 0, 255);">"Jiffycms.Net.Toolkit.WebResourceHandler"</span> <span style="color: rgb(0, 0, 255);">/></span><br /></pre>
</td>
</tr>
</tbody>
</table>
<p>For IIS7, you need to make an entry under the path : Configuration/system.webServer/Handlers section as follows :</p>
<table style="width: 100%;">
<tbody>
<tr>
<td style="vertical-align: top; width: 99%;">
<pre><span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">add</span> <span style="color: rgb(255, 0, 0);">verb</span>=<span style="color: rgb(0, 0, 255);">"*"</span> <span style="color: rgb(255, 0, 0);">path</span>=<span style="color: rgb(0, 0, 255);">"jiffycms.axd"</span> <span style="color: rgb(255, 0, 0);">name</span>=<span style="color: rgb(0, 0, 255);">"WebResourceHandler"</span> <span style="color: rgb(255, 0, 0);"><br /> type</span>=<span style="color: rgb(0, 0, 255);">"Jiffycms.Net.Toolkit.WebResourceHandler"</span> <span style="color: rgb(255, 0, 0);"><br /> preCondition</span>=<span style="color: rgb(0, 0, 255);">"integratedMode"</span> <span style="color: rgb(0, 0, 255);">/></span></pre>
</td>
</tr>
</tbody>
</table>
<p style="color: red;">Note: If your dragging and dropping the component from the toolbox, this is already done for you.</p>
<p>After dragging and dropping the control at designtime, this is what the HTML Editor looks like in DesignView :</p>
<div>
<img alt="Jiffycms HTML Editor in designview" src="editor-designview.jpg" />
</div>
<p>oh great, we got designtime rendering of the editor. Now it's a matter of playing with the various properties in the property grid. Upon running the page you will notice lots of css output in the head section of your rendered page. While this is the default, you can chose to put the css in an external css file. Doing this will not only decrease the page payload but since the css is in an external css file, it will get cached by the browser, so that subsequent requests will be served from cache automatically.</p>
<p>Fortunately this kind of change is not hard to do. You can use a designtime feature to collect all the runtime css generated by the control and manually copy it into an external CSS StyleSheet File.</p>
<div>
<img alt="CSS extraction tool" src="cssextraction.jpg" />
</div>
<div>Just copy the css and paste it into an external style sheet, then reference the css file via ExternalStyleSheet Property </div>
<div>
<img alt="Map external stylesheet to ExternalStyleSheet property" src="externalstylesheet.jpg" />
</div>
<p>Note that every time you make a modification to the editor such as modify the styles in the designer or modify style dependent properties such as IconsMode, ToolbarMode etc, you will need to regenerate the css and update your css file manually. Fortunately if you have decided to go this route, you might also be editing the css yourself so this may not be an inconvenience after all.</p>
</body>
</html>
Submit an article or tip