Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
A wysiwyg text editor for use in the Rails 3 asset pipeline
Ruby
Pull request Compare This branch is 29 commits ahead, 1 commit behind NARKOZ:master.

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
lib
vendor/assets
.gitignore
Gemfile
LICENSE.txt
README.md
Rakefile
wysihtml5-rails.gemspec

README.md

wysihtml5 for rails

A wysiwyg text editor for use in the Rails 3 asset pipeline.

Installation

Add to your Gemfile:

gem 'wysihtml5-rails'

and run:

bundle install

Usage

Require it in your JS manifest's file:

//= require wysihtml5

Additionally include advanced or simple parser rule:

//= require parser_rules/simple

Add to your template before closing body html tag:

<script>
  var editor = new wysihtml5.Editor("wysihtml5-textarea", { // id of textarea element
    toolbar:      "wysihtml5-toolbar", // id of toolbar element
    stylesheets:  "<%= stylesheet_path('wysiwyg') %>", // optional, css to style the editor's content
    parserRules:  wysihtml5ParserRules // defined in parser rules set
  });
</script>

Usage example

Add to application.js

//= require wysihtml5
//= require parser_rules/advanced

Create form with wysihtml5 textarea:

<div id="wysihtml5-toolbar" style="display: none;">
  <a data-wysihtml5-command="bold">bold</a>
  <a data-wysihtml5-command="italic">italic</a>
  <a data-wysihtml5-command="underline">underline</a>

  <a data-wysihtml5-command="insertOrderedList">insert ordered list</a>
  <a data-wysihtml5-command="insertUnorderedList">insert unordered list</a>

  <a data-wysihtml5-command="foreColor" data-wysihtml5-command-value="red">red</a>
  <a data-wysihtml5-command="foreColor" data-wysihtml5-command-value="green">green</a>
  <a data-wysihtml5-command="foreColor" data-wysihtml5-command-value="blue">blue</a>

  <a data-wysihtml5-command="createLink">insert link</a>
  <div data-wysihtml5-dialog="createLink" style="display: none;">
    <label>
      Link: <input data-wysihtml5-dialog-field="href" value="http://" class="text">
    </label>
    <a data-wysihtml5-dialog-action="save">OK</a>
    <a data-wysihtml5-dialog-action="cancel">Cancel</a>
  </div>
</div>

<%= form_for @post do |f| %>
  <p><%= f.text_area :content, :id => 'wysihtml5-textarea' %></p>
  <p><%= f.submit %></p>
<% end %>

<script>
  var editor = new wysihtml5.Editor("wysihtml5-textarea", {
    toolbar:      "wysihtml5-toolbar",
    stylesheets:  "<%= stylesheet_path('wysiwyg') %>",
    parserRules:  wysihtml5ParserRules
  });
</script>

For more information, check out wysihtml5 wiki.

License

wysihtml5 is distributed under the MIT License.
wysihtml5-rails is licensed under new BSD License.

Something went wrong with that request. Please try again.