Looking for an example with ACE editor working with Textarea in vim mode

Yongyan Wang

unread,

Jan 5, 2015, 11:04:53 AM1/5/15

to ace-d...@googlegroups.com

I have spent quite some time on setting up ACE Editor to work on an text area in vim mode. The VIM mode setting doen't work. I am looking for an example here.

Thanks

Harutyun Amirjanyan

unread,

Jan 5, 2015, 11:10:10 AM1/5/15

to ace-d...@googlegroups.com

you only need to call

editor.setKeyboardHandler("ace/keyboard/vim")
after creating the editor

and it will automatically load https://github.com/ajaxorg/ace-builds/blob/master/src/keybinding-vim.js

Yongyan Wang

unread,

Jan 5, 2015, 12:03:45 PM1/5/15

to ace-d...@googlegroups.com

I have tried this many times and it still doesn't work for me. Here is the code. please help

------ code start --------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Editor</title>
<style type="text/css" media="screen">
    body {
        overflow: hidden;
    }

    #editor {
        margin: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
</style>
</head>
<body>

<textarea NAME="comments" name="data-editor" data-editor="markdown" COLS=40 ROWS=6></textarea>

</body>

<script src="src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="src-min-noconflict/keybinding-vim.js"></script>

<script>
    // Hook up ACE editor to all textareas with data-editor attribute
    $(function () {
        $('textarea[data-editor]').each(function () {
            var textarea = $(this);

            var mode = textarea.data('editor');

            var editDiv = $('<div>', {
                position: 'absolute',
                width: textarea.width(),
                height: textarea.height(),
                'class': textarea.attr('class')
            }).insertBefore(textarea);

            textarea.css('visibility', 'hidden');

            var editor = ace.edit(editDiv[0]);
            editor.renderer.setShowGutter(false);
            editor.getSession().setValue(textarea.val());
            editor.getSession().setMode("ace/mode/" + mode);
            editor.setKeyboardHandler("ace/keyboard/vim");
          //   editor.setTheme("ace/theme/idle_fingers");
        editor.setTheme("ace/theme/twilight");

            // copy back to textarea on form submit...
            textarea.closest('form').submit(function () {
                textarea.val(editor.getSession().getValue());
            })

        });
    });
</script>

<script>
    // Hook up ACE editor to all textareas with data-editor attribute
    $(function () {
        $('textarea[data-editor]').each(function () {
            var textarea = $(this);

            var mode = textarea.data('editor');

            var editDiv = $('<div>', {
                position: 'absolute',
                width: textarea.width(),
                height: textarea.height(),
                'class': textarea.attr('class')
            }).insertBefore(textarea);

            textarea.css('visibility', 'hidden');

            var editor = ace.edit(editDiv[0]);
            editor.renderer.setShowGutter(false);
            editor.getSession().setValue(textarea.val());
            editor.getSession().setMode("ace/mode/" + mode);
        editor.setKeyboardHandler("ace/keyboard/vim");
            editor.setTheme("ace/theme/idle_fingers");

            // copy back to textarea on form submit...
            textarea.closest('form').submit(function () {
                textarea.val(editor.getSession().getValue());
            })

        });
    });
</script>

</html>

------ code finish -------

Harutyun Amirjanyan

unread,

Jan 5, 2015, 12:19:23 PM1/5/15

to ace-d...@googlegroups.com

maybe relative path for ace.js is wrong?

your code works fine in http://jsbin.com/bojedo/1/edit?html,output

Yongyan Wang

unread,

Jan 5, 2015, 9:46:38 PM1/5/15

to ace-d...@googlegroups.com

Everything works!

I compared your code with mine and find there is extra line in your code (see below). Also, I use file://.. in stead of http:// to call the *.html.

<script src="//code.jquery.com/jquery-git.js"></script>

Reply all

Reply to author

Forward