ACE Editor Common API

This article transferred from: http://www.cnblogs.com/cz-xjw/p/6476179.html

ACE is an open-source, standalone, browser-based code editor that can be embedded in any Web page or JavaScript application. ACE supports more than 60 language syntax highlighting, and can handle large documents with up to 4 million lines of code. The ACE development team says that ACE is comparable in performance and functionality to local code editors (such as Sublime Text, TextMate, Vim, and so on).

ACE is a successor to the Mozilla Skywriter (formerly known as Bespin) project and serves as the main online editor for CLOUD9.

The following is its detailed features:

• Syntax coloring for more than 60 languages (you can import textmate/sublime/.tmlanguage files)
• 20 + Themes (you can import textmate/sublime/.tmtheme files)
• Auto indent, reduce indent
• An optional command line
• Handle huge files that can handle 4,000,000 lines of code
• Fully customizable key bindings, including V-Regular expression search and replace
• Highlight match Brackets
• Switch between a soft label and a real label
• Show hidden characters
• Drag and drop text with the mouse
• Line break
• Code Folding
• Multiple Cursors and selections
• Real-time grammar checker (support Javascript/coffeescript/css/xquery)
• Cut, copy and paste features IM and Emacs modes

Project Address:

1. git clone git://github.com/ajaxorg/ace.git

Related projects:

• Gcli
• Dryice
• Ace Wrapper for ExtJS
• Ace Wrapper for GWT

Use boot:
1. Introduction

1. var ace = require("Lib/ace");

2. Set the theme

1. Editor. SetTheme("Ace/theme/twilight");

3. Set Program Language mode

1. Editor. GetSession(). SetMode("Ace/mode/javascript");

4. Common operation
Set up, get content:

1. Editor.  SetValue("The new text Here"); //or Session.setvalue
2. Editor.  GetValue(); //or Session.getvalue

Get the selection:

1. Editor. Session. GetTextRange(editor. Getselectionrange());

Insert at cursor:

1. Editor. Insert("Something cool");

Get the row or column where the cursor is located:

1. Editor. Selection. GetCursor();

Jump To Line:

1. Editor. GoToLine(linenumber);

Get total number of rows:

1. Editor. Session. GetLength();

To set the default tab size:

1. Editor. GetSession(). Settabsize(4);

Use a soft label:

1. Editor. GetSession(). Setusesofttabs(true);

To set the font size, this doesn't really count as an API:

1. Document. getElementById(' editor '). Style. FontSize=' 12px ';

To set up code folding:

1. Editor. GetSession(). Setusewrapmode(true);

Set highlighting:

1. Editor. Sethighlightactiveline(false);

To set the print margin visibility:

1. Editor. Setshowprintmargin(false);

The settings editor is read-only:

1. Editor.  Setreadonly(true); //False to make it editable

5. Trigger Size Scaling
Editor default adaptive size, if you want to program resize, use the following methods:

1. Editor. Resize();

6. Search

2. Editor. Find(' needle ', {
4. Backwards: false,
6. Wrap: false,
8. CaseSensitive: false,
10. Wholeword: false,
12. REGEXP: false
14. });
16. Editor. FindNext();
18. Editor. FindPrevious();

The following options are available for your search parameters:
needle: string or regular expression to find
backwards: Whether to reverse search, default to False
Wrap: Search to the bottom of the document to return to the top, false by default
casesensitive: Match case Search, default to False
Wholeword: whether to match the entire word search, default to False
Range: Search for the entire document is set to empty
REGEXP: Whether the search content is a regular expression, the default is False
start: Search Start location
skipcurrent: If the current row is not searched, the default is False
To replace a single character:

1. Editor. Find(' foo ');
2. Editor. Replace(' bar ');

To replace multiple characters:

1. Editor. ReplaceAll(' bar ');

Editor.replaceall need to call Editor.find before use (' needle ', ...)
7. Event Monitoring
Monitoring Change events:

1. Editor. GetSession(). On(' Change ', function(e) {
2. E.type, etc
3. });

Listen for selection events:

1. Editor. GetSession(). Selection. On(' changeselection ', function(e) {
2. });

Monitor cursor Movement:

1. Editor. GetSession(). Selection. On(' changecursor ', function(e) {
2. });

8. Add new command, bind button
To specify a key to bind to a custom function:

2. Editor. Commands. AddCommand({
4. Name: ' mycommand ',
6. Bindkey: {win: ' ctrl-m ', mac: ' command-m '},
8. EXEC: function(editor) {
10. //...
12. },
14. ReadOnly: true //If you do not need to use read-only mode, set false here
16. });

Detail api:http://ace.c9.io/#nav =api

ACE Editor Common API