Bespin on Rails¶ ↑

Bespin on Rails is a simple Ruby on Rails plugin that allows you to embed the Mozilla Bespin code editor component in your Rails views using simple helper tags.

Bespin is a Mozilla Labs experiment on how to build an extensible Web code editor using HTML 5 technology.

To learn more about Mozilla Bespin check out their home page: labs.mozilla.com/projects/bespin and their Wiki: wiki.mozilla.org/Labs/Bespin

This plugin comes bundled with Bespin 0.2.1 “Cheeky Cirrus”.

To report issues related to the plugin please use the issue tracker on GitHub at github.com/provideal/bespin-on-rails/issues.

If you have any comments on the plugin please contact me (René) by email (info AT provideal DOT net) or on Twitter (@renspr).

Requirements¶ ↑

You need at least Rails 2.3 for this plugin.

To make the bundled resources available in your applications public folder the plugin will create a symlink from your applications public folder to the plugins public folder. This is done using the ‘ln’ unix command. As a result the plugin won’t work on Windows. To work around this you can manually copy all files from vendor/plugins/bespin-on-rails/public to public/_plugins/bespin-on-rails.

You need a browser that is able to work with Mozilla Bespin. Check out their Wiki if your browser is supported: wiki.mozilla.org/Labs/Bespin/UserGuide#Requisites

Installation¶ ↑

Download the plugin from github.com/provideal/bespin-on-rails and install it in vendor/plugins/bespin-on-rails.

We will provide a gem based installation in the next release.

Usage¶ ↑

In your application layout (typically somewhere below <%= javascript_include_tag(:defaults) %>)

...
<head>
  ...
  <%= bespin_include_tag %>
</head>
...

In your views (examples)

<% form_tag ... do %>
  ...
  <%= bespin_editor_tag 'snippet', '<div>some html snippet</div>' %>
  ...
<% end %>

<% form_for @code_snippet do |f| %>
  ...
  <%= bespin_editor_tag 'code_snippet[snippet]', '<div>some html snippet</div>' %>
  ...
<% end %>

Configuration¶ ↑

You may pass an optional hash of options as a third parameter to bespin_editor_tag as follows:

:editor_style - CSS style attributes as a string for styling the editor. The editor is just a <div>.

Example:

<% form_for @code_snippet do |f| %>
  ...
  <%= bespin_editor_tag 'code_snippet[snippet]', '<div>some html snippet</div>', :editor_style => 'height: 600px' %>
  ...
<% end %>

This will set the height of the editor to 600px.

:language - A string tells Bespin which syntax highlighter to use. This defaults to ‘html’.

Example:

<% form_for @code_snippet do |f| %>
  ...
  <%= bespin_editor_tag 'code_snippet[snippet]', 'var foo = 42;', :language => 'js' %>
  ...
<% end %>

This will set the syntax highlighter for JavaScript. Available highlighters are ‘css’, ‘html’, ‘js’, ‘php’.

:settings - A hash of Bespin settings.

Example:

<% form_for @code_snippet do |f| %>
  ...
  <%= bespin_editor_tag 'code_snippet[snippet]', '<div>some html snippet</div>', :settings => {:highlightline => 'on'} %>
  ...
<% end %>

This will highlight the line where the cursor is. Check out wiki.mozilla.org/Labs/Bespin/UserGuide#Settings for more options (may be out of date).

Please note: Setting a theme (e.g :theme => ‘white’) is currently broken in this plugin.

jordanfowler/bespin-on-rails

Bespin on Rails¶ ↑

Requirements¶ ↑

Installation¶ ↑

Usage¶ ↑

Configuration¶ ↑