Text Editor in JavaScript: toolbar, Color picker, Bold style etc : Editor « GUI Components « JavaScript DHTML

Home
JavaScript DHTML
1.Ajax Layer
2.Data Type
3.Date Time
4.Development
5.Document
6.Dojo toolkit
7.Event
8.Event onMethod
9.Ext JS
10.Form Control
11.GUI Components
12.HTML
13.Javascript Collections
14.Javascript Objects
15.Javascript Properties
16.jQuery
17.Language Basics
18.Mochkit
19.Mootools
20.Node Operation
21.Object Oriented
22.Page Components
23.Rico
24.Scriptaculous
25.Security
26.SmartClient
27.Style Layout
28.Table
29.Utilities
30.Window Browser
31.YUI Library
JavaScript DHTML » GUI Components » Editor 
Text Editor in JavaScript: toolbar, Color picker, Bold style etc
 
<!--
 * 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>

           
         
  
FCKeditor_2.0.zip( 1,095 k)
Related examples in the same category
1.Editor based on Javascript
2.Rich text
3.WebFX Dynamic Webboard 2.0
4.HTML Text Editing Component for hosting in Web Pages
5.Walter - A WYSIWYG HTML editor that runs purely on JavaScript
6.Edit in place (Direct edit)
7.WebIEdit
8.Bitflux Editor Examples
9.editarea 0.8.1.1
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.