Text Editor in JavaScript : Editor : GUI Components JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » GUI Components » Editor »

 

Text Editor in JavaScript



<!--
 * 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 (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 = 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 : Download nav_FCKeditor_2.0.zip nav_FCKeditor_2.0.zip


-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo GUI Components
» Editor