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