Text Editor in JavaScript: toolbar, Color picker, Bold style etc : Editor : GUI Components : JavaScript DHTML examples (example source code) Organized by topic

JavaScript DHTML
C++
PHP
JavaScript DHTML Home »  GUI Components   » [  Editor  ]   
 



Text Editor in JavaScript: toolbar, Color picker, Bold style etc

Please note that some example is only working under IE or Firefox.

<!--
 * FCKeditor - The text editor for internet
 * Copyright (C2003-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 ([email protected])
-->
<!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 ([email protected])
 */

// FCKeditor Class
var FCKeditor = functioninstanceName, 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 == )
  {
    this._ThrowError701'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.writethis._GetConfigHtml() ) ;
    document.writethis._GetIFrameHtml() ) ;
  }
  else
  {
    var sWidth  = this.Width.toString().indexOf('%')  this.Width  : this.Width  + 'px' ;
    var sHeight = this.Height.toString().indexOf('%'this.Height : this.Height + 'px' ;
    document.write('<textarea name="' + this.InstanceName + '" rows="4" cols="40" style="WIDTH: ' + sWidth + '; HEIGHT: ' + sHeight + '" wrap="virtual">' + this._HTMLEncodethis.Value '<\/textarea>') ;
  }

  document.write'</div>' ) ;
}

FCKeditor.prototype.ReplaceTextarea = function()
{
  if !this.CheckBrowser || this._IsCompatibleBrowser() )
  {
    var oTextarea = document.getElementByIdthis.InstanceName ;
    
    if !oTextarea )
      oTextarea = document.getElementsByNamethis.InstanceName )[0;
    
    if !oTextarea || oTextarea.tagName != 'TEXTAREA' )
    {
      alert'Error: The TEXTAREA id "' + this.InstanceName + '" was not found' ) ;
      return ;
    }

    oTextarea.style.display = 'none' ;
    this._InsertHtmlBeforethis._GetConfigHtml(), oTextarea ;
    this._InsertHtmlBeforethis._GetIFrameHtml(), oTextarea ;
  }
}

FCKeditor.prototype._InsertHtmlBefore = functionhtml, element )
{
  if element.insertAdjacentHTML )  // IE
    element.insertAdjacentHTML'beforeBegin', html ;
  else                // Gecko
  {
    var oRange = document.createRange() ;
    oRange.setStartBeforeelement ;
    var oFragment = oRange.createContextualFragmenthtml );
    element.parentNode.insertBeforeoFragment, element ;
  }
}

FCKeditor.prototype._GetConfigHtml = function()
{
  var sConfig = '' ;
  for var o in this.Config )
  {
    if sConfig.length > sConfig += '&amp;' ;
    sConfig += escape(o'=' + escapethis.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.ToolbarSetsLink += '&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"!= -&& sAgent.indexOf("mac"== -&& sAgent.indexOf("opera"== -)
  {
    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' ) != -)
    return sAgent.match/safari\/(\d+))[1>= 312 ;  // Build must be at least 312 (1.3)
  else
    return false ;
}

FCKeditor.prototype._ThrowError = functionerrorNumber, 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 typeofthis.OnError == 'function' )
    this.OnErrorthis, errorNumber, errorDescription ;
}

FCKeditor.prototype._HTMLEncode = functiontext )
{
  if typeoftext != "string" )
    text = text.toString() ;

  text = text.replace(/&/g, "&amp;";
  text = text.replace(/"/g, "&quot;";
  text = text.replace(/</g, "&lt;";
  text = text.replace(/>/g, "&gt;";
  text = text.replace(/'/g, "&#39;";

  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>

           
       
Download: FCKeditor_2.0.zip   ( 1,095  K )  
Related examples in the same category
1.  Editor based on JavascriptHas Download File
2.  Rich textHas Download File
3.  WebFX Dynamic Webboard 2.0Has Download File
4.  HTML Text Editing Component for hosting in Web PagesHas Download File
5.  Walter - A WYSIWYG HTML editor that runs purely on JavaScript
6.  Edit in place (Direct edit)Has Download File
7.  WebIEditHas Download File
8.  Bitflux Editor ExamplesHas Download File
























Home| Contact Us
Copyright 2003 - 04 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.