Skip to content

Instantly share code, notes, and snippets.

Last active March 29, 2017 21:25
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save rileytg/6084840 to your computer and use it in GitHub Desktop.
How to add a simple rich text editor to an active admin field

You'll need to put hallo.js into /vendor/assets/javascripts

You will also need jQuery UI and Rangy JS

@import "jquery.ui.core";
@import "jquery.ui.theme";
@import "font-awesome";
.is-hallo-text {
margin-left: 20% !important;
width: 74.3% !important;
border: 1px dashed #8b8b8b !important;
padding: 20px !important;
//= require jquery.ui.all
//= require rangy-core
//= require hallo
(function() {
jQuery(function() {
var $richText = $('.js-rich-text')
if ($richText.length > 0){
$richText.each(function(index, element){
var $element = $(element)
var $p = $('<p class="is-hallo-text"></p>').html($element.val())
plugins: {
'halloformat': {},
'halloheadings': {},
'halloreundo': {},
'hallolists': {},
'hallojustify': {}
$p.on('hallomodified', function(event, data){
f.input :description, input_html: {class: 'js-rich-text'}
gem 'jquery-ui-rails'
gem 'font-awesome-rails'
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment