Click here to Skip to main content
Click here to Skip to main content

Syntax Hightlighting Editor

By , 24 Mar 2012
Rate this:
Please Sign up or sign in to vote.

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.

CodeSyntaxHighlightEditor/s1.gif

CodeSyntaxHighlightEditor/s2.gif

CodeSyntaxHighlightEditor/s3.gif

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.

License

This article, along with any associated source code and files, is licensed under The MIT License

About the Author

Jerry.Wang
Team Leader
China China
Jerry is from China. He was captivated by computer programming since 13 years old when first time played with Q-Basic.
 

  • Windows / Linux & C++
  • iOS & Obj-C
  • .Net & C#
  • Flex/Flash & ActionScript
  • PHP / HTML / CSS / Javascript
  • Gaming Server programming / video, audio processing / image & graphics
 
Contact: 32775973(at)qq.com
Chinese Blog: http://blog.csdn.net/wangjia184

Comments and Discussions

 
GeneralMy vote of 5 Pinmemberhyblusea24-Mar-12 18:03 
GeneralRe: Save file back to directory after update PinmemberMember 359855127-Apr-11 22:49 
GeneralRe: Save file back to directory after update PinmemberJerry.Wang20-May-11 14:58 
GeneralMy vote of 2 PinmemberiBDev10-Jul-10 17:46 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140421.2 | Last Updated 24 Mar 2012
Article Copyright 2010 by Jerry.Wang
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid