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
Can you give me a few hints on how to do this? I’m fairly new to asp.net. Thanks!
Great Tutorial !
It helped me a lot to solve my problem.
Great Stuff. I’ve been trying to get tinymce compressor for .net (3.5) to work for a few hours but was unsuccessful. After following your steps and looking at your sample code. I was able to get it up and running in less than 10 minutes.
Great article; it was very clear and concise. I was up and running in no time at all. Thanks so much!!
panak
Hi,
I am getting this error: Object expected, tiny_mce.js Code: 0, Line:1, Char: 118751, URI: http://localhost/TinyMCE/tinymce/tiny_mce.js
Please help to resolve this issue.
Thank you.
Hi,
I fixed the issue, I copied tinymce folder instead of tiny_mce folder.
Thank you for it. its working.
One more help!
a. I need to be able to save the formatted text into database and as well retrive it back. How can I do this.
b. When I press Enter, it is giving may be 2 lines space. How to fix it?
Thank you very much again. (I also want to built things like this. How can I do?)
to save the formatted text into the database, try using parameterized queries, that will take care of what needs to be taken care of.
How do you retain indentation for pasted text such as a code snippet for example?
Any help would be greatly appreciated!
You can use the like this:
And in c# the code:
protected void Page_Load(object sender, EventArgs e)
{
Literal1.Text = elm1.Text;
}
It work’s!!!
And
Hi
I have tested your code in vs2008. Its working fine. You have done a great work. However its missing the Spell check when i try to click on it, it requires me to download the file. How do i run it on the website i mean where do i integrate it in the website to run this.
Thanks..it’s really Create help for me…
Abbas
Hai,
It’s really nice. In this i want to store that
contents into file. i create the file manually and store as a .rtf file. when i stored the format is changed. Can you help me
Hai,
It’s really nice. In this i want to store that
contents into file. i create the file manually and store as a .rtf file. when i stored the format is changed. Can you help me please
A question, if I save the value of the textarea in a database, as I make for print in a div that value returned?
save it using parameterized Query
This was a FANTASTIC article. The article got me up and running with TinyMCE in 15 mintues after trying for two hours to figure it out myself.
Hi
I would like to insert image. But I couldn’t do it. Here shown text box to giving the image Url but my imge in C: drive what will the Url? Could you please help me?
upload the image on some server (there are many free picture servers available) and give the URL of that server
hi
how to used it for some other Language like
Hindi,Tamil etc
hi babarjehangir,
can i use control rather than textarea control?
thanks,
sl
sorry, i mean asp.net TextBox server control
WOW! i get it now.
mode: “exact”,
theme: “advanced”,
elements: “TextBox1″,
i can use like above.
thanks,
sl
Hi,
I followed your steps and they seem to work brilliantly in FireFox and Chrome. In IE8 I am getting a Javascript error as soon as I click a button or try to type text in the textbox? any help please?
This is the error : http://img31.imageshack.us/img31/6534/helppls.jpg