RichTextBox using Free TinyMCE Editor in C# ASP.Net

RichTextBox using Free TinyMCE Editor in ASP.Net

(Rich text box TinyMCE Editor in ASP.Net)

Hello friend, I will today introduce a richtextbox (which support formatting,styling of content) named TinyMCE text editor.

At the end of this tutorial there is a link to download the sample project.

Create a website project and in the default.aspx you need to integrate the TinyMCE library with your project.

Download the library here tinymce library.

Download the library and extract it and add the entire TinyMCE directory(Folder) to the root of the project by simply copying the folder and then right click on the project name in the solution explorer and paste it.

Now add these lines to the default.aspx page to link the TinyMCE library to the page.

<script type=”text/javascript” src=”tinymce/jscripts/tiny_mce/tiny_mce_src.js”></script>

<script type=”text/javascript”>
tinyMCE.init({
mode: “textareas”,
theme: “advanced”,
plugins: “safari,spellchecker,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,imagemanager,filemanager”,
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,spellchecker,|,cite,abbr,acronym, del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage”,
theme_advanced_toolbar_location: “top”,
theme_advanced_toolbar_align: “left”,
theme_advanced_statusbar_location: “bottom”,
theme_advanced_resizing: false,
template_external_list_url: “js/template_list.js”,
external_link_list_url: “js/link_list.js”,
external_image_list_url: “js/image_list.js”,
media_external_list_url: “js/media_list.js”
});
</script>

And Now to use this rich text box i.e. TinyMCE you just need to set the property TextMode=”Multiline”.

Now see the example I used, You can see that there are three fields named title, short descriptions and long descriptions. The textmode property of two textbox respective to title and short description are not specified but for long description the textmode is set to multiline.

Now build the project you can see the result as looks like in the picture attached below.

TinyMCE text Editor in C# asp .net
TinyMCE text Editor in C# asp .net

The textbox having textmode=multiline is automatically converted to TinyMCE text editor and now you can format and style your text and when you will get the text of the textbox it will return a html code including all styling and formatting as you made with your content.

Download the complete demo project here.Demo of TinyMCE text Editor in C# asp .net

How useful was this post?

Click on a star to rate it!

Average rating / 5. Vote count:

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: