搬运ace-editor文档

ace

发布时间 : 2020-06-19 15:04

阅读 :

Configuring the editor
1. Changing the size of the editor
Setting Themes
Setting the Programming Language Mode
One Editor, Multiple Sessions
Common Operations

鉴于 ace 官网国内访问较慢，搬运了一份guide到博客，仅供学习，请勿用于商业用途，侵权请联系我删除

<!DOCTYPE html>
<html>
    <head>
        <title>Demo of ACE Editor</title>
        <!--导入js库-->
        <script src="./ace.js"></script>
        <script src="./ext-language_tools.js"></script>
    </head>

    <body>
        <!--代码输入框（注意请务必设置高度，否则无法显示）-->
        <pre id="code" class="ace_editor" style="min-height:400px">
            <textarea class="ace_text-input">
#include
                int main(){
                    int n,m;
                    scanf("%d %d",&n,&m);
                    printf("%d",n+m);
                    return 0;
                }
            </textarea>
        </pre>

        <script>
            //初始化对象
            var editor = ace.edit("code");

            //设置风格和语言（更多风格和语言，请到github上相应目录查看）
            var theme = "clouds"
            var language = "javascript"
            editor.setTheme("ace/theme/" + theme);
            editor.session.setMode("ace/mode/" + language);

            //字体大小
            editor.setFontSize(18);

            //设置只读（true时只读，用于展示代码）
            editor.setReadOnly(false);

            //自动换行,设置为off关闭
            editor.setOption("wrap", "free")

            //启用提示菜单
            ace.require("ace/ext/language_tools");
            editor.setOptions({
                    enableBasicAutocompletion: true,
                    enableSnippets: true,
                    enableLiveAutocompletion: true
                });
        </script>

    </body>
</html>

In all of these examples Ace has been invoked as shown in the embedding guide.

Configuring the editor

there are several ways to pass configuration to Ace

// pass options to ace.edit

ace.edit(element, {

    mode: "ace/mode/javascript",

    selectionStyle: "text"

})

// use setOptions method to set several options at once

editor.setOptions({

    autoScrollEditorIntoView: true,

    copyWithEmptySelection: true,

});

// use setOptions method

editor.setOption("mergeUndoDeltas", "always");



// some options are also available as methods e.g. 

editor.setTheme(...)



// to get the value of the option use

editor.getOption("optionName");

See Configuring-Ace wiki page for a more detailed list of options.

Changing the size of the editor

Ace only checks for changes of the size of it’s container when window is resized. If you resize the editor div in another manner, and need Ace to resize, use the following:

1	editor.resize()

if you want editor to change it’s size based on contents, use maxLines option as shown in https://ace.c9.io/demo/autoresize.html

Setting Themes

Themes are loaded on demand; all you have to do is pass the string name:

1	editor.setTheme("ace/theme/twilight");

> See all themes

Setting the Programming Language Mode

By default, the editor supports plain text mode. All other language modes are available as separate modules, loaded on demand like this:

1	editor.session.setMode("ace/mode/javascript");

One Editor, Multiple Sessions

Ace keeps everything about the state of the editor (selection, scroll position, etc.) in ``

1	editor.session

. This means you can grab the session, store it in a var, and set the editor to another session (e.g. a tabbed editor).

You might accomplish this like so:

var EditSession = require("ace/edit_session").EditSession;

var js = new EditSession("some js code");

var css = new EditSession(["some", "css", "code here"]);

// and then to load document into editor, just call

editor.setSession(js);

Common Operations

Set and get content:

editor.setValue("the new text here");

editor.session.setValue("the new text here"); // set value and reset undo history

editor.getValue(); // or session.getValue

Get selected text:

1
2
3

editor.getSelectedText(); // or for a specific range

editor.session.getTextRange(editor.getSelectionRange());

Insert at cursor, emulating user input:

1	editor.insert("Something cool");

Replace text in range:

1	editor.session.replace(new ace.Range(0, 0, 1, 1), "new text");

Get the current cursor line and column:

1	editor.selection.getCursor();

Go to a line:

1	editor.gotoLine(lineNumber);

Get total number of lines:

1	editor.session.getLength();

Set the default tab size:

1	editor.session.setTabSize(4);

Use soft tabs:

1	editor.session.setUseSoftTabs(true);

Set the font size:

1	document.getElementById('editor').style.fontSize='12px';

Toggle word wrapping:

1	editor.session.setUseWrapMode(true);

Set line highlighting:

1	editor.setHighlightActiveLine(false);

Set the print margin visibility:

1	editor.setShowPrintMargin(false);

Set the editor to read-only:

1	editor.setReadOnly(true); // false to make it editable

Using undo manager

To group undo delta of the next edit with the previous one set mergeUndoDeltas to true

1
2
3

editor.session.mergeUndoDeltas = true; 

editor.session.insert({row: 0, column:0}, Date()+"");

To start new undo group use markUndoGroup method

editor.insertSnippet("a$0b"); 

editor.session.markUndoGroup(); 

editor.insertSnippet("x$0y");

To disable undo of a an edit in a collaborative editor

var rev = session.$undoManager.startNewGroup(); // start new undo group

... // apply the edit 

session.$undoManager.markIgnored(rev); // mark the new group as ignored

To implement undo/redo buttons see https://ace.c9.io/demo/toolbar.html

Searching

editor.find('needle',{

    backwards: false,

    wrap: false,

    caseSensitive: false,

    wholeWord: false,

    regExp: false

});

editor.findNext();

editor.findPrevious();

The following options are available to you for your search parameters:

needle: The string or regular expression you’re looking for
backwards: Whether to search backwards from where cursor currently is. Defaults to false.
wrap: Whether to wrap the search back to the beginning when it hits the end. Defaults to false.
caseSensitive: Whether the search ought to be case-sensitive. Defaults to false.
wholeWord: Whether the search matches only on whole words. Defaults to false.
range: The Range to search within. Set this to null for the whole document
regExp: Whether the search is a regular expression or not. Defaults to false.
start: The starting Range or cursor position to begin the search
skipCurrent: Whether or not to include the current line in the search. Default to false.
preventScroll: Whether or not to move the cursor to the next match. Default to false.

Here’s how you can perform a replace:

1
2
3

editor.find('foo');

editor.replace('bar');

And here’s a replace all:

1	editor.replaceAll('bar');

(editor.replaceAll uses the needle set earlier by editor.find('needle', ...)

Listening to Events

To listen for an onchange:

editor.session.on('change', function(delta) {

    // delta.start, delta.end, delta.lines, delta.action

});

To listen for an selection change:

1
2
3

editor.session.selection.on('changeSelection', function(e) {

});

To listen for a cursor change:

1
2
3

editor.session.selection.on('changeCursor', function(e) {

});

Adding New Commands and Keybindings

To assign key bindings to a custom function:

editor.commands.addCommand({

    name: 'myCommand',

    bindKey: {win: 'Ctrl-M',  mac: 'Command-M'},

    exec: function(editor) {

        //...

    },

    readOnly: true // false if this command should not apply in readOnly mode

});

Configure dynamic loading of modes and themes

By default ace detcts the url for dynamic loading by finding the script node for ace.js. This doesn’t work if ace.js is not loaded with a separate script tag, and in this case it is required to set url explicitely

1	ace.config.set("basePath", "https://url.to.a/folder/that/contains-ace-modes");

Path for one module alone can be configured with:

1	ace.config.setModuleUrl("ace/theme/textmate", "url for textmate.js");

When using ace with webpack, it is possible to configure paths for all submodules using

1	require("ace-builds/webpack-resolver");

which depends on file-loader

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 jaytp@qq.com