## [Espresso Lungo](https://github.com/espresso/espresso-lungo) / Ace

### Ace editor for [Espresso](https://github.com/espresso/espresso) applications

## Install

```bash
$ gem install el-ace
```
or add `gem 'el-ace'` to your `Gemfile`

## Load

Ignore this if `el-ace` added to `Gemfile` and `Bundler.require` used.

Otherwise you'll have to load `el-ace` gem explicitly.

Just add `require 'el-ace'` at the top of your app.

## Use

First of all include `EL::Ace` into controllers you need Ace editor.

Then use `ace` into your views:

```ruby
# --- base/controllers/articles/edit.rb ---

class Articles
  include EL::Ace

  def edit id
    @article = Article.first(id: id.to_i) || styled_halt(400, 'Article not found')
    render
  end
end

# --- base/views/articles/edit.slim ---

textarea#content name="content" = @article.content

== ace(:content)

input.saveButton type="button" value="Save"
```

`ace` requires first argument to be the id of the textarea holding content.

### Save Button

`el-ace` will update textarea content when save button hovered.
It could be done by listening onchange event, but this will duplicate content multiple times and could make the page huge and slow on bigger documents.

To mark some button as save button add `saveButton` class.
That's it, `saveButton` are used by default by `el-ace`. You can also use another CSS selector by passing it via `:save_button_selector` option:

```ruby
== ace(:content, save_button: '#save')
```

### Snippets

If you have a list of snippets you need to insert into edited content, pass them into editor via `:snippets` option:

```ruby
- snippets = ['{{ "top-menu" }}', '{{ "left-menu" }}']
== ace(:content, snippets: snippets)
```

You can also provide a proc for snippets. It will be called every time editor rendered:

```ruby
- snippets = lambda { Snippet.all.map(&:name) }
== ace(:content, snippets: snippets)
```

### Readonly

If you need to render a readonly editor, set `:readonly` option to true:

```ruby
== ace(:content, readonly: true)
```

### Default Mode

`el-ace` comes with a handy mode switcher, so the user may select appropriate mode.

However, you can set default mode automatically, so user should not care about.

Say if all edited pages are plain HTML, simply use `:mode` option to set default mode to HTML:

```ruby
== ace(:content, mode: 'html')
```

See the list of supported modes [here](https://github.com/ajaxorg/ace-builds/tree/master/src)
(the files starting with "mode-")

### Toolbar

When you need to prepend or append for HTML to rendered toolbar simply use `:toolbar_prepend` / `toolbar_append` options.

A `String` or `Proc` returning a `String` accepted.

Useful when you need to integrate various buttons into toolbar:

```ruby
- save_button = button_tag("Save", onclick: "fileCrudifier.save();")
== ace(:content, toolbar_append: save_button)
```

<hr>

**Issues/Bugs:** [github.com/espresso/espresso-lungo/issues](https://github.com/espresso/espresso-lungo/issues)

**Mailing List:** [groups.google.com/.../espresso-framework](https://groups.google.com/forum/?fromgroups#!forum/espresso-framework)

**IRC channel:** #espressorb on irc.freenode.net

**Author** - [Silviu Rusu](https://github.com/slivu)