Skip to content

Instantly share code, notes, and snippets.

@rileytg
Last active Mar 29, 2017
Embed
What would you like to do?
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())
$element.after($p)
$element.hide()
$p.hallo({
plugins: {
'halloformat': {},
'halloheadings': {},
'halloreundo': {},
'hallolists': {},
'hallojustify': {}
}
})
$p.on('hallomodified', function(event, data){
$element.val(data.content)
})
});
}
});
}).call(this);
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