❤
npm
Sign UpSign In

ace_vimtura

0.1.4-rc2 • Public • Published

ace_vimtura

Ace-based javascript text editor with Vim keybindings and live preview, several markups supported.

If you don't know what Vim is, this package probably wouldn't suite your needs. I took same approach as Vi or Vim: minimum mouse usage for faster workflow.

Features

  • Variety of markup languages supported

    • html
    • haml
    • markdown

    and more coming

  • Live syntax highlighting inside an editor

  • Live rendering with renderer of you choise. Several renderers are already built in

Lo-o-ong running TODO

  • Autocompletion
  • Emmet\Zencoding plugin

Installation

Copy ace_vimtura folder to your javascripts folder.

Usage

Basics

Code

<script src="lib/require.js" type="text/javascript" charset="utf-8"></script>
<script src="build/javascripts/ace_vimtura/config.js" type="text/javascript" charset="utf-8"></script>
...
<body>
  ...
  <h1>Ace Vimtura Test page</h1>
    <div id="ace_vimtura" style="height: 500px"></div>
    <script>
      requirejs.config({baseUrl: 'build/javascripts'});
      require(['ace_vimtura/ace_vimtura'], function(av){
        av.init('ace_vimtura', { theme: 'xcode' });
        av.ready(function(){
          this.loadText('#loaded text');
        })
      })
    </script> 
  ...
</body>

Commands and getting help

There is no buttons in here. Just command line. Now you should be already familiar with concept of modes in Vim. Like in Vim, to enter command set normal mode and hit :. There will appear little console at the bottom. Type in commands here and hit enter. Try :help first.

:map

Go to normal mode and enter command :map and hit enter to see key bindings from Vim defaults. See Vim reference.

:help

:help command will display basic instructions and command list.

:set

Set is meant to set variables in Vim. In AceVimtura there are several settings you can tune:

  • theme
  • mode
  • renderer
  • filetype <=> renderer + mode

Example:

    :set filetype haml

Customize

Adding custom commands

You can add your own commands to call with : in normal mode:

AceVimtura.vimapi.defineEx(name, shortname, function(cm, params));

Passed parameters accessible via params.args.

Custom renderers

Renderer can be used as built-in renderers do if it:

  • is a class, i.e. can be instantiated with new
  • implements render(text) method with rendered html being returned
  • resides in ace_vimtura/renderers directory
  • class name is capitalized form of file name

Given all requirements are satisfied, you can just editor.setRenderer('your_renderer_name').

Readme

Keywords

Package Sidebar

Install

npm i ace_vimtura

Repository

github.com/d-theus/ace_vimtura

Homepage

github.com/d-theus/ace_vimtura#readme

Weekly Downloads

7

Version

0.1.4-rc2

License

none

Last publish

Collaborators

  • d-theus
Try on RunKit
Report malware