Espresso Lungo / Ace

Ace editor for Espresso applications

Install

$ 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:

# --- 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:

== 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:

- 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:

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

Readonly

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

== 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:

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

See the list of supported modes here (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:

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

---

Issues/Bugs: github.com/espresso/espresso-lungo/issues

Mailing List: groups.google.com/.../espresso-framework

IRC channel: #espressorb on irc.freenode.net

Author - Silviu Rusu