Click here to Skip to main content
11,501,513 members (69,556 online)
Click here to Skip to main content

Tagged as

Integrating TinyMCE Editor with ASP.NET

, 16 Jun 2010 CPOL 69.1K 6.1K 35
Rate this:
Please Sign up or sign in to vote.
Integrating TinyMCE editor with ASP.NET

Introduction

In one of my projects, there was a requirement to embed a WYSIWYG editor. Some of the features that were looked into were:

  • Easy to configure
  • Open source
  • In some cases, user can edit only portion of the pre-rendered text in the editor.

After searching a lot, I came across TinyMCE editor (http://tinymce.moxiecode.com/). But, I had some issues in integrating the same with ASP.NET applications. The following write up provides one of the ways to integrate with TinyMCE.

How To

The following section provides the steps to implement it in ASP.NET.

Step 1: Download the latest version (tinymce_3_3_7.zip) from the following location, http://tinymce.moxiecode.com/download.php. Unzip the downloaded .zip file in one of your local folders.

Step 2: Create an ASP.NET web application and copy the tinymce folder to the web application. The solution explorer would look something like this.

Figure1.jpg

Note: You can remove the examples folder under tinymce folder.

Step 3: Add a reference of tiny_mce.js file to the page in which you would like to integrate the TinyMCE editor.

Include tiny_mce.js file at the top of your file.

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

Add the following lines of code which initialize all the textarea controls on the WYSIWYG editor type. They are quite customizable, please check the examples section in their web site.

<script type="text/javascript"> 
tinyMCE.init({ 
// General options 
mode: "textareas", 
theme: "advanced", 
plugins: "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,
wordcount,advlist,autosave", 
setup: function(ed) { 
ed.onKeyPress.add( 
function(ed, evt) { 
} 
); 
}, 
// 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,restoredraft", 
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", 
// Style formats 
style_formats: [ 
{ title: 'Bold text', inline: 'b' }, 
{ title: 'Red text', inline: 'span', styles: { color: '#ff0000'} }, 
{ title: 'Red header', block: 'h1', styles: { color: '#ff0000'} }, 
{ title: 'Example 1', inline: 'span', classes: 'example1' }, 
{ title: 'Example 2', inline: 'span', classes: 'example2' }, 
{ title: 'Table styles' }, 
{ title: 'Table row 1', selector: 'tr', classes: 'tablerow1' } 
], 
// Replace values for the template plugin 
template_replace_values: { 
username: "Some User", 
staffid: "991234" 
} 
}); 
</script>

Step 4: Add a text area control on to the page.

<textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 80%" 
runat="server"></textarea>

Step 5: Execute the Page J and you should able to see the editor embedded in your ASP.NET page.

Figure2.jpg

Additional Features

In case you would want to have pre rendered text with some non editable text, use the CSS class mceNonEditable for the text you would want to make it non editable.

this.elm1.Value = "<p>This is a test document. 
Some <span class='mceNonEditable' style=\"color: #ff0000;\">Portion</span> 
of this document can't be changed.</p>\r\n<p>The area with red 
<span class='mceNonEditable' style=\"color: #ff0000;\">background </span>
can't be <span class='mceNonEditable' style=\"color: #ff0000;\">removed</span>. 
You can only <span class='mceNonEditable' style=\"color: #ff0000;\">change </span>
the area with black.</p>\r\n<p>&nbsp;</p>"; 

Where this.elm1 is a textarea control.

Summary

I had difficulties in getting it to work, hence thought this should be useful for people wanting to integrate the TinyMCE editor with their ASP.NET applications.

History

  • 16th June, 2010: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Manjunath Shrikantiah
Architect
India India
9+ plus years of experience in IT industry. This includes experience in architecting, designing and developing solutions on Web and desktop application platforms

Comments and Discussions

 
SuggestionSolved my issue with TinyMCE for ongoing project Pin
Nancy Dsouza4-Jan-15 9:39
memberNancy Dsouza4-Jan-15 9:39 
QuestionIt saved my hours! Pin
jignesh.hRathod11-Dec-12 5:30
memberjignesh.hRathod11-Dec-12 5:30 
QuestionTinyMCE does not work in my project Pin
jackthomson17-Dec-11 22:58
memberjackthomson17-Dec-11 22:58 
AnswerRe: TinyMCE does not work in my project Pin
mbielski28-Jul-12 4:07
membermbielski28-Jul-12 4:07 
GeneralRe: TinyMCE does not work in my project Pin
purushottamahire17-Dec-12 0:00
memberpurushottamahire17-Dec-12 0:00 
GeneralRe: TinyMCE does not work in my project Pin
Member 793937831-Dec-12 18:16
memberMember 793937831-Dec-12 18:16 
GeneralWith Ajax Not post back Pin
zubair0130-Jan-11 2:35
memberzubair0130-Jan-11 2:35 
GeneralRe: With Ajax Not post back Pin
Manjunath Shrikantiah30-Jan-11 17:56
memberManjunath Shrikantiah30-Jan-11 17:56 
GeneralRe: With Ajax Not post back [modified] Pin
zubair012-Feb-11 6:50
memberzubair012-Feb-11 6:50 
GeneralMy vote of 5 Pin
Bo Vistisen25-Nov-10 0:32
memberBo Vistisen25-Nov-10 0:32 
QuestionDid you try the HTML Editor that ships with the AJAX Control Toolkit? Pin
rc10023-Jul-10 9:30
memberrc10023-Jul-10 9:30 
AnswerRe: Did you try the HTML Editor that ships with the AJAX Control Toolkit? Pin
manjunath_s25-Jul-10 20:25
membermanjunath_s25-Jul-10 20:25 
GeneralNice little article. Pin
mbielski22-Jun-10 4:27
membermbielski22-Jun-10 4:27 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150520.1 | Last Updated 16 Jun 2010
Article Copyright 2010 by Manjunath Shrikantiah
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid