Syntax Hightlighting Editor






3.50/5 (2 votes)
Syntax highlighting editor in flash for couples of programming languages!
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 realtextarea
in this function.
Interfaces
setParser(parseName:String)
: switch the parser dynamicallysetReadOnly(readOnly:Boolean)
: enable/disable read-only modesetText(content:String)
: set the content of the editorgetText()
: get the content of the editor, usually used to retrieve the content before form submitting.