Click here to Skip to main content
15,891,936 members
Articles / Web Development / XHTML

Integrating FCKeditor in ASP.NET

Rate me:
Please Sign up or sign in to vote.
4.43/5 (15 votes)
20 Jul 2008CPOL2 min read 270K   10.1K   64  
Integrating FCKeditor in ASP.NET
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
 * FCKeditor - The text editor for Internet - http://www.fckeditor.net
 * Copyright (C) 2003-2008 Frederico Caldeira Knabben
 *
 * == BEGIN LICENSE ==
 *
 * Licensed under the terms of any of the following licenses at your
 * choice:
 *
 *  - GNU General Public License Version 2 or later (the "GPL")
 *    http://www.gnu.org/licenses/gpl.html
 *
 *  - GNU Lesser General Public License Version 2.1 or later (the "LGPL")
 *    http://www.gnu.org/licenses/lgpl.html
 *
 *  - Mozilla Public License Version 1.1 or later (the "MPL")
 *    http://www.mozilla.org/MPL/MPL-1.1.html
 *
 * == END LICENSE ==
 *
 * Sample page.
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>FCKeditor - Sample</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="robots" content="noindex, nofollow" />
	<link href="../sample.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="../../fckeditor.js"></script>
	<script type="text/javascript">

function FCKeditor_OnComplete( editorInstance )
{
	var oCombo = document.getElementById( 'cmbSkins' ) ;

	// Get the active skin.
	var sSkin = editorInstance.Config['SkinPath'] ;
	sSkin = sSkin.match( /[^\/]+(?=\/$)/g ) ;

	oCombo.value = sSkin ;
	oCombo.style.visibility = '' ;
}

function ChangeLanguage( languageCode )
{
	document.location.href = document.location.href.replace( /\?.*$/, '' ) + "?" + languageCode ;
}

	</script>
</head>
<body>
	<h1>
		FCKeditor - JavaScript - Sample 5</h1>
	<div>
		This sample shows how to change the editor skin.
	</div>
	<hr />
	<table cellpadding="0" cellspacing="0" border="0">
		<tr>
			<td>
				Select the skin to load:&nbsp;
			</td>
			<td>
				<select id="cmbSkins" onchange="ChangeLanguage(this.value);" style="visibility: hidden">
					<option value="default" selected="selected">Default</option>
					<option value="office2003">Office 2003</option>
					<option value="silver">Silver</option>
				</select>
			</td>
		</tr>
	</table>
	<br />
	<form action="../php/sampleposteddata.php" method="post" target="_blank">
		<script type="text/javascript">
<!--
// Automatically calculates the editor base path based on the _samples directory.
// This is usefull only for these samples. A real application should use something like this:
// oFCKeditor.BasePath = '/fckeditor/' ;	// '/fckeditor/' is the default value.
var sBasePath = document.location.href.substring(0,document.location.href.lastIndexOf('_samples')) ;

// Get the skin from the URL.
var sSkin ;
if ( document.location.search.length > 1 )
	sSkin = document.location.search.substr(1) ;

var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;
oFCKeditor.BasePath	= sBasePath ;

if ( sSkin != null )
{
	var sSkinPath = sBasePath + 'editor/skins/' + sSkin + '/' ;
	oFCKeditor.Config['SkinPath'] = sSkinPath ;

	// The following switch is optional. It is done to enhance the loading
	// time of the toolbar, by preloading the images used on it.
	switch ( sSkin )
	{
		case 'office2003' :
			oFCKeditor.Config['PreloadImages'] =
				sSkinPath + 'images/toolbar.start.gif' + ';' +
				sSkinPath + 'images/toolbar.end.gif' + ';' +
				sSkinPath + 'images/toolbar.bg.gif' + ';' +
				sSkinPath + 'images/toolbar.buttonarrow.gif' ;
			break ;

		case 'silver' :
			oFCKeditor.Config['PreloadImages'] =
				sSkinPath + 'images/toolbar.start.gif' + ';' +
				sSkinPath + 'images/toolbar.end.gif' + ';' +
				sSkinPath + 'images/toolbar.buttonbg.gif' + ';' +
				sSkinPath + 'images/toolbar.buttonarrow.gif' ;
			break ;
	}
}

oFCKeditor.Value	= '<p>This is some <strong>sample text<\/strong>. You are using <a href="http://www.fckeditor.net/">FCKeditor<\/a>.<\/p>' ;
oFCKeditor.Create() ;
//-->
		</script>
		<br />
		<input type="submit" value="Submit" />
	</form>
</body>
</html>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

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


Written By
Software Developer (Senior)
Bangladesh Bangladesh
Software Engineer, Bangladesh.

Comments and Discussions