Text Editor in JavaScript: toolbar, Color picker, Bold style etc
<!--
* FCKeditor - The text editor for internet
* Copyright (C) 2003-2005 Frederico Caldeira Knabben
*
* Licensed under the terms of the GNU Lesser General Public License:
* http://www.opensource.org/licenses/lgpl-license.php
*
* For further information visit:
* http://www.fckeditor.net/
*
* File Name: sample01.html
* Sample page.
*
* File Authors:
* Frederico Caldeira Knabben (fredck@fckeditor.net)
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>FCKeditor - Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="robots" content="noindex, nofollow">
<link href="_samples/sample.css" rel="stylesheet" type="text/css" />
<!-- fckeditor.js -->
<script type="text/javascript">
/*
* FCKeditor - The text editor for internet
* Copyright (C) 2003-2005 Frederico Caldeira Knabben
*
* Licensed under the terms of the GNU Lesser General Public License:
* http://www.opensource.org/licenses/lgpl-license.php
*
* For further information visit:
* http://www.fckeditor.net/
*
* File Name: fckeditor.js
* This is the integration file for JavaScript.
*
* It defines the FCKeditor class that can be used to create editor
* instances in a HTML page in the client side. For server side
* operations, use the specific integration system.
*
* File Authors:
* Frederico Caldeira Knabben (fredck@fckeditor.net)
*/
// FCKeditor Class
var FCKeditor = function( instanceName, width, height, toolbarSet, value )
{
// Properties
this.InstanceName = instanceName ;
this.Width = width || '100%' ;
this.Height = height || '200' ;
this.ToolbarSet = toolbarSet || 'Default' ;
this.Value = value || '' ;
this.BasePath = '/fckeditor/' ;
this.CheckBrowser = true ;
this.DisplayErrors = true ;
this.EnableSafari = false ; // This is a temporary property, while Safari support is under development.
this.Config = new Object() ;
// Events
this.OnError = null ; // function( source, errorNumber, errorDescription )
}
FCKeditor.prototype.Create = function()
{
// Check for errors
if ( !this.InstanceName || this.InstanceName.length == 0 )
{
this._ThrowError( 701, 'You must specify a instance name.' ) ;
return ;
}
document.write( '<div>' ) ;
if ( !this.CheckBrowser || this._IsCompatibleBrowser() )
{
document.write( '<input type="hidden" id="' + this.InstanceName + '" name="' + this.InstanceName + '" value="' + this._HTMLEncode( this.Value ) + '" />' ) ;
document.write( this._GetConfigHtml() ) ;
document.write( this._GetIFrameHtml() ) ;
}
else
{
var sWidth = this.Width.toString().indexOf('%') > 0 ? this.Width : this.Width + 'px' ;
var sHeight = this.Height.toString().indexOf('%') > 0 ? this.Height : this.Height + 'px' ;
document.write('<textarea name="' + this.InstanceName + '" rows="4" cols="40" style="WIDTH: ' + sWidth + '; HEIGHT: ' + sHeight + '" wrap="virtual">' + this._HTMLEncode( this.Value ) + '<\/textarea>') ;
}
document.write( '</div>' ) ;
}
FCKeditor.prototype.ReplaceTextarea = function()
{
if ( !this.CheckBrowser || this._IsCompatibleBrowser() )
{
var oTextarea = document.getElementById( this.InstanceName ) ;
if ( !oTextarea )
oTextarea = document.getElementsByName( this.InstanceName )[0] ;
if ( !oTextarea || oTextarea.tagName != 'TEXTAREA' )
{
alert( 'Error: The TEXTAREA id "' + this.InstanceName + '" was not found' ) ;
return ;
}
oTextarea.style.display = 'none' ;
this._InsertHtmlBefore( this._GetConfigHtml(), oTextarea ) ;
this._InsertHtmlBefore( this._GetIFrameHtml(), oTextarea ) ;
}
}
FCKeditor.prototype._InsertHtmlBefore = function( html, element )
{
if ( element.insertAdjacentHTML ) // IE
element.insertAdjacentHTML( 'beforeBegin', html ) ;
else // Gecko
{
var oRange = document.createRange() ;
oRange.setStartBefore( element ) ;
var oFragment = oRange.createContextualFragment( html );
element.parentNode.insertBefore( oFragment, element ) ;
}
}
FCKeditor.prototype._GetConfigHtml = function()
{
var sConfig = '' ;
for ( var o in this.Config )
{
if ( sConfig.length > 0 ) sConfig += '&' ;
sConfig += escape(o) + '=' + escape( this.Config[o] ) ;
}
return '<input type="hidden" id="' + this.InstanceName + '___Config" value="' + sConfig + '" />' ;
}
FCKeditor.prototype._GetIFrameHtml = function()
{
var sLink = this.BasePath + 'editor/fckeditor.html?InstanceName=' + this.InstanceName ;
if (this.ToolbarSet) sLink += '&Toolbar=' + this.ToolbarSet ;
return '<iframe id="' + this.InstanceName + '___Frame" src="' + sLink + '" width="' + this.Width + '" height="' + this.Height + '" frameborder="no" scrolling="no"></iframe>' ;
}
FCKeditor.prototype._IsCompatibleBrowser = function()
{
var sAgent = navigator.userAgent.toLowerCase() ;
// Internet Explorer
if ( sAgent.indexOf("msie") != -1 && sAgent.indexOf("mac") == -1 && sAgent.indexOf("opera") == -1 )
{
var sBrowserVersion = navigator.appVersion.match(/MSIE (.\..)/)[1] ;
return ( sBrowserVersion >= 5.5 ) ;
}
// Gecko
else if ( navigator.product == "Gecko" && navigator.productSub >= 20030210 )
return true ;
// Safari
else if ( this.EnableSafari && sAgent.indexOf( 'safari' ) != -1 )
return ( sAgent.match( /safari\/(\d+)/ )[1] >= 312 ) ; // Build must be at least 312 (1.3)
else
return false ;
}
FCKeditor.prototype._ThrowError = function( errorNumber, errorDescription )
{
this.ErrorNumber = errorNumber ;
this.ErrorDescription = errorDescription ;
if ( this.DisplayErrors )
{
document.write( '<div style="COLOR: #ff0000">' ) ;
document.write( '[ FCKeditor Error ' + this.ErrorNumber + ': ' + this.ErrorDescription + ' ]' ) ;
document.write( '</div>' ) ;
}
if ( typeof( this.OnError ) == 'function' )
this.OnError( this, errorNumber, errorDescription ) ;
}
FCKeditor.prototype._HTMLEncode = function( text )
{
if ( typeof( text ) != "string" )
text = text.toString() ;
text = text.replace(/&/g, "&") ;
text = text.replace(/"/g, """) ;
text = text.replace(/</g, "<") ;
text = text.replace(/>/g, ">") ;
text = text.replace(/'/g, "'") ;
return text ;
}
</script>
</head>
<body>
<h1>FCKeditor - Javascript - Sample 1</h1>
This sample displays a normal HTML form with an FCKeditor with full features
enabled.
<hr>
<form action="sampleposteddata.asp" 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.pathname.substring(0,document.location.pathname.lastIndexOf('_samples')) ;
var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;
oFCKeditor.BasePath = sBasePath ;
oFCKeditor.Height = 300 ;
oFCKeditor.Value = 'This is some <strong>sample text<\/strong>. You are using <a href="http://www.fckeditor.net/">FCKeditor<\/a>.' ;
oFCKeditor.Create() ;
//-->
</script>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
FCKeditor_2.0.zip( 1,095 k)Related examples in the same category