Syntax Hightlighting Editor

• Download latest release from here
• Download latest source code
• View online demo

Introduction

I was looking for some online code editor which supports syntax-highlighting so that it could be embedded into my CMS project. After I tried several existing ones, I found none that satisfied me. I decided to build one, and here it is.

Features

• This editor is written in AS3/Flash Builder 4, it is compatible with any browser which has a Flash player.
• Supports real-time highlights when you are typing.
• Extended support for languages you want. Currently, it supports C#/CSS/JS/VBS/HTML/XML.
• Supports multi-languages in one document. Usually, we have CSS/JS/C#/VB code in a single ASP.NET page, this editor can highlight each section with the corresponding styles.
• Supports tab key for selected paragraph indentation.
• Supports interaction with JavaScript, the editor exposes friendly interfaces.

How to Use

To embed this editor to your page, the first step is to load this editor to your page correctly. It is strongly recommended to load the editor via swfobject.

<script language="javascript" type="text/javascript">
// initialize with parameters
var flashvars = {
    // indicate the parser, aspx / csharp /
    //       javascript / css / vbscript / html / xml
    parser: "aspx",
    
    // set the editor to read-only mode
    readOnly: false,    

    // the editor detects client installed fonts
    // and use preferred fonts if installed.
    // NOTE: the charactor '|' is required at the begin and end of the list
    preferredFonts : 
      "|Fixedsys|Fixedsys Excelsior 3.01|Fixedsys 
       Excelsior 3.00|Courier New|Courier|",

    // indicate the callback function so that we
    // can load the content into editor once it is initialized.
    onload : function() {
        // call setText to load content into editor
        document.getElementById('ctlFlash').setText( 
                 document.getElementById('content').value );
        document.getElementById('content').style.display = 'none';
    }
};

// flash player parameters, you can find more information
// at: http://code.google.com/p/swfobject/wiki/documentation
var params = { menu: "false", 
    wmode : "transparent", allowscriptaccess : "always" };

// define the id of the flash control, we need the id in javascript interaction 
var attributes = { id: "ctlFlash", name: "ctlFlash" };

// embed the flash with size, more information can be
// found at: http://code.google.com/p/swfobject/wiki/documentation
swfobject.embedSWF("CodeHighlightEditor.swf", 
  "flashContent", "800", "600", 
  "10.0.0", null, flashvars, params, attributes);
</script>

The sample code above demonstrates how to load the editor with parameters:

• parser indicates the parser; the parser name can be aspx / csharp / javascript / css / vbscript / html / xml / jsp / php / sql / cpp / java.
• readOnly indicates if read-only mode is enabled or not.
• preferredFonts indicates a list of preferred fonts to be used in the editor. The editor detects client installed fonts, and uses the first font found in the list. The list items are separated by the character "|" , and must start and end with the "|" character.
• onload indicates a callback function to be called when the editor is initialized. Usually, you can load the content into the editor and hide the real textarea in this function.

Interfaces

• setParser(parseName:String): switch the parser dynamically
• setReadOnly(readOnly:Boolean): enable/disable read-only mode
• setText(content:String): set the content of the editor
• getText(): get the content of the editor, usually used to retrieve the content before form submitting.