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).
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
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.
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 %>
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.
Copyright © 2009 Provideal Systems GmbH, released under the MIT license
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent