Posted by babarjehangir in - for now there is no support for adding Rich Textbox (JavaScript WYSIWYG Editor ) by asp.net framework, but thanks to TinyMCE, its not a problem anymore. I will go through a simple sample asp.net application to integrate TinyMCE RichTexBox.
- Download TinyMCE (Developers Version ) from their website.
- Create a new asp.net website
An illustration of the adding new website
- copy the tinymce folder located above in the working directory of this website and refresh the folder by right-clicking the project in the solution explorer.
- now we reference the tinymce javascript eidtor which renders a textarea and changes it into a WYSIWYG Edit/RichTextBox by adding the following script in head tag
<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
// Theme options
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
// Example content CSS (should be your site CSS)
content_css : "css/content.css",
// Drop lists for link/image/media/template dialogs
template_external_list_url : "lists/template_list.js",
external_link_list_url : "lists/link_list.js",
external_image_list_url : "lists/image_list.js",
media_external_list_url : "lists/media_list.js",
// Replace values for the template plugin
template_replace_values : {
username : "Some User",
staffid : "991234"
}
});
</script>
- the above script actually renders any textarea into a richtextbox which appears in body, so now adding a textarea with an ID and runat=”server” tag so that we can access it on the server side on a button click event.
<textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 80%" runat="server"> </textarea> <br /> <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
- Also add the following code in the button click event
protected void Button1_Click(object sender, EventArgs e)
{
String HTMLText = elm1.Value;
int a = 0;
}
- we are pretty much done, but there is a little problem here. this textarea is now supposed to send HTML through the request object and when the request is parsed by the framework it marks it has malicious and the request will eventually fail, so in order to make the parser ignore this content we have to put ValidateRequest=”false” attribute in the page directive tag. Now we are good to go, run the website.
An illustration of Rich Text Box ( WYSIWYG )
- now add a break point on the first line of the button click event to see what is posted back to the server from this textarea
An illustration of HTML posted back by the Rich Text Box
- Quite simple, isn’t it
- here is the code for this sample, Download
- Enjoy !
I just tried your code .. and i get an error? .. dunno why .. maybe i have to add assemlbys or dlls to the bin ??
I just saw that is beacuse im not using frame3.5 LOL
I need to get a project running on ASP.net 2.0 can anyone help me!! ???
Mario,
just repeat the same steps I mentioned in the article with a Visual Studio 2005 Project and you should be good :).
( Create VS 2005 Project and then copy paste the code from the source code provided in the article in to your project )
Hi, could you tell me where I locate it in my asp.net code. In othe words how do I put it into an asp.net application
this sample is already a asp.net sample, download the source code and go through the text here.
perfect!
Thanks a lot for the great help
Thanks for sharing - works great
Hi there, can you tell me how to add tinymce to a visual studio project ( as opposed to a Visual Studio website ). With the website I can simply add the folder outside of Visual Studio and then refresh my application. Not so with the project though. I assume the .proj file needs to be updated etc and that is the reason. There are quite a lot of files/folders to add manually though so there must be a shortcut, no?
thanks in advance
Tony
Hello Tony,
can you clarify the question little further, is this project you are talking about a part of the website project (included as dll) or are you talking about Windows Application, and you want to add a RichTextBox to it?
Hi babarjehangir,
this is a C# website project which I have inherited. I don’t know how to explain this further but in Visual Studio 2008 the Start Page gives the option to open/create a Website or a Project. My application is a Project.
I hope this makes my issue a bit clearer
Tony
Hi babarjehangir,
I’ve just realised I’ve been doing something daft. After adding the folder outside of VS 2008 I have to click on ‘Show All Files’ and then ‘Include in Project’.
Sorry for any confusion I may have caused.
thanks anyway
Tony
so thx
Where should i place ‘ValidateRequest=”false”’ at?
in the page directive tag, your start of the .aspx file should look like
i got it already…
thanks..
but now i have 1 more problem which is
Compiler Error Message: CS0115: ‘ASP.forums_new_post_aspx.FrameworkInitialize()’: no suitable method found to override
what should i do?
try to download the code with this post and run it, and let me know if you are able to run it successfully.
I got it already…
Thanks for the help ^&^
thanks alot for this great tool it helped to much, but if i want to dispaly the text that i format it in other page in my site,
as i have homepage and the adminpage and i want to write the text with its format and in the admin page and view it in the hompage.
can you help please.
thanks
peter
well its simple, just assign this text to a label control in the homepage and you should be good.
thanks for your help i did it and worked very well
thanks
thanks for the help, good work.
Please reply does this code has some license ?
nopes, ,it does not.
thnks for reply
keep up the good work
I try to copy Word Formula and it doens’t work.
because word formula does not translate into HTML therefore it cannot be copy pasted as it is.
Great help here thanks
I was just wondering what if we want to use the save button (the little button on the control itself) to save, what should we do for it? How can we handle it in our code?
well you have to look for the onclick event handler for the save img tinymce js files and modify the code accordingly.
Thanks Buddy
Your example code is too good
thanks again