Tutorial: Add nicEdit to an ASP.Net page
Description: This topic will show you how to add the NicEdit inline content editor to your ASP.Net web application and allow your Server Side code to access the editable content.
Notes: You will need to download the current version of NicEdit at
nicEdit.com
Also, if you are going to use the code changes recommended in the nicEdit.js file, I am requiring that you include my comments of authorship.
Let's set up the a web application to use NicEdit. It's assumed you know how to start a Web Application and add pages, so the steps below will show you how to add the NicEdit to an existing page.
1. In your ASP.Net Web Application solution, add a folder called js.
2. Under this folder, place the "nicEdit.js" file.
3. Add an html
<textarea> control to your ASP.Net page. I like wrapping things in
</div>'s, which are optional.
<div style="width:100%">
MyTextArea<br />
<textarea cols="88" id="MyTextArea"></textarea>
</div>
4. Add the following script to your
<head> tag, or within your
<asp:Content> tags if you are using MasterPages. Make sure your
<head> tag has
runat="server". Also, make sure the panelInsance method has the id of your
<textarea> in it. [E.g.
panelInstance('MyTextArea')]
<script type="text/javascript" src="../js/nicEdit.js"></script>
<script type="text/javascript">
//<![CDATA[
bkLib.onDomLoaded(function()
{
try
{
new nicEditor({fullPanel : true}).panelInstance('MyTextArea').SetASPNetHiddenField($get("<%=HiddenTextArea.ClientID%>").name);
}
catch(ex)
{ }
});
//]]>
</script>
Feedback from this article has been given that states the above instantiation of the nicEditor can be accomplished with the following line instead of the one listed above.
new nicEditor({fullPanel : true}).panelInstance('MyTextArea').SetASPNetHiddenField($("<%=HiddenTextArea.ClientID%>").selector);
5. What you'll notice about the above script is that I've extended nicEdit with additional methods to help remember the values of controls during postbacks. I've done this by adding a Hidden Field to the asp.Net page and using javascript to populate it during the client-side "blur" event. later on you'll see the NicEdit changes I made to the nicEdit.js file.
6. On your ASP.Net page, add a hidden field control below your current <textarea> tag.
<div style="width:100%">
MyTextArea<br />
<textarea cols="88" id="MyTextArea"></textarea>
</div>
<asp:HiddenField ID="HiddenTextArea" runat="server" />
7. Next we are going to modify the nicEdit.js file.
a. Add the following ASPNetHiddenField variable after the Copyright comments and before the bxExtend line.
/* NicEdit - Micro Inline WYSIWYG
* Copyright 2007-2008 Brian Kirchoff
*
* NicEdit is distributed under the terms of the MIT license
* For more information visit http://nicedit.com/
* Do not remove this copyright message
*/
// Variable added for ASPNet Hidden Field (David Littleton – CovertCoder)
var ASPNetHiddenField;
var bkExtend=...
b. Next, do a search on "". There should only be one instance of this within the nicEdit.js file. Start formatting the code until it looks like the section below:
. . .
var nicEditor=bkClass.extend
(
{
construct:function(C)
{
this.options=new nicEditorConfig();
bkExtend(this.options,C);
this.nicInstances=new Array();
this.loadedPlugins=new Array();
var A=nicEditors.nicPlugins;
for(var B=0;B<A.length;B++)
{
this.loadedPlugins.push(new A[B].p(this,A[B].o))
}
nicEditors.editors.push(this);
bkLib.addEvent(document.body,"mousedown",this.selectCheck.closureListener(this))
},
panelInstance:function(B,C)
{
B=this.checkReplace($BK(B));
var A=new bkElement("DIV").setStyle(
{
width:(parseInt(B.getStyle("width"))||B.clientWidth)+"px"
}).appendBefore(B);
this.setPanel(A);
return this.addInstance(B,C)
},
checkReplace:function(B)
{
...
c. Next, add the "
SetASPNetHiddenField" section between the "
construct:function(C)" and "
panelInstance:function(B,C)" sections. It should look like the code below:
...
var nicEditor=bkClass.extend
(
{
construct:function(C)
{
this.options=new nicEditorConfig();
bkExtend(this.options,C);
this.nicInstances=new Array();
this.loadedPlugins=new Array();
var A=nicEditors.nicPlugins;
for(var B=0;B<A.length;B++)
{
this.loadedPlugins.push(new A[B].p(this,A[B].o))
}
nicEditors.editors.push(this);
bkLib.addEvent(document.body,"mousedown",this.selectCheck.closureListener(this))
},
SetASPNetHiddenField:function(NewField)
{
// New Method added to populate name of ASPNet Hidden Field (David Littleton - CovertCoder)
ASPNetHiddenField = NewField;
},
panelInstance:function(B,C)
{
B=this.checkReplace($BK(B));
var A=new bkElement("DIV").setStyle(
{
width:(parseInt(B.getStyle("width"))||B.clientWidth)+"px"
}).appendBefore(B);
this.setPanel(A);
return this.addInstance(B,C)
},
checkReplace:function(B)
{...
d. Next, do a search on "". There should only be one instance of this within the nicEdit.js file. Start formatting the code until it looks like the section below:
...
blur:function()
{
this.isFocused=false;
this.elm.removeClass("selected")
},
saveContent:function()
{...
e. Modify the "blur" method to look like the following:
...
blur:function()
{
// This code was added for the ASP.Net Hidden Control
// modified by David Littleton - Covert Coder
try
{
var HiddenField = document.getElementById(ASPNetHiddenField);
HiddenField.value = this.getContent();
}
catch(ex)
{
// First time through there is no object, so catch
// and move on
}
this.isFocused=false;
this.elm.removeClass("selected")
},
saveContent:function()
{...
f. In your nicEdit.js file, you'll notice a section near the top that works with the buttons of NicEdit. The nicEdit.js file references the nicEditor.gif image file. Make sure the the "iconsPath" refers to the proper relative location within your web application's path. If not, the buttons for the editor will not show up.
8. On of the tricks required to get the nicEdit text editor to get a value from the server into the
<textarea> so that the javascript could operated on it required the use of a nested literal server side control. Place the
<asp:Literal> in the markup, as follows:
<div style="width:100%">
MyTextArea<br />
<textarea cols="88" id="MyTextArea">
<asp:Literal ID="litTopic" runat="server" />
</textarea>
</div>
<asp:HiddenField ID="HiddenTextArea" runat="server" />
9. Now you can populate the editor from the server side with code like this:
protected void Page_Load( object sender, EventArgs e )
{
if( !IsPostBack )
{
litTopic.Text = "<DIV><FONT size=3><DIV><B>My Favorite Site: </B>www.covertcoder.com</DIV></FONT></DIV>";
}
}
10. To get the value out of the nicEdit text editor from any postback method, you can use the following code:
string x = HiddenTextArea.Value;
11. If you get a "a potentially dangerous Request.Form value was detected..." error, you need to add the following attribute/value to your Page declaration:
ValidateRequest="false"
This is an example of the declaration:
<%@ Page Language="C#" MasterPageFile="~/CovertCoder.master" AutoEventWireup="true" CodeFile="Topics.aspx.cs" Inherits="Topics" Title="Covert-Coder Topics" ValidateRequest="false" %>
That should be all that is required to use nicEdit to your ASP.Net web application.