Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Live CKEditor in Hobo

Live CKEditor in Hobo

This in a quite ugly hack ... but its working ...

It is actually quite easy to enable inline editing in Hobo using Clickeditor, which is awesome. It is also possible to use Ckeditor in Hobo, which is awesome as well.

There is even some integration between the two, so clicking on a cktext-attribute unhides the already embedded CkEditor. But unfortunately, you can't save, there isn't even a save button.

I first thought config.extraPlugins = 'save'; in the CkEditor fixes this. Background info: The save plugin is disabled in current CkEditor gem for Rails, and this enables it. But this only helps on the edit view, where the save icon is displayed and active. It doesn't work in the show view. The reason is, that the plugin searches for an surrounding form which isn't available from Clickeditor, so it disables itself and it's grayed out.

So I use some JQuery magic to wait for focus loss on CkEditor and trigger the submission then. As the user can switch between editing and displaying several times, the registering of the event handler has to be done repeatedly. I have chosen to do this on any click (counting the ckeditor instances didn't work for me somehow...) which is way too much, but it does not cause much performance loss. Pull requsts improving that part are highly appreciated. Meanwhile have fun using "Live-Ck-Click-Editor" in Hobo.

<!-- I am in app/views/taglibs/admin/admin.dryml -->
<def tag="input" for="cktext" attribs="name, ckeditor">
editor_settings = attributes['ckeditor'] || HoboCkeditor.default_editor_settings
object_name, method_name = attributes['name'].to_object_name_and_method_name
<div class="cktextarea textarea">
<%= cktext_area object_name, method_name, :ckeditor => editor_settings, :class => "ckeditor" %>
<extend tag="show-page">
<old-show-page merge>
<field-list: tag="click-editor" />
// I am app/assets/javascripts/ckeditor.config.js
CKEDITOR.editorConfig = function( config ) {
config.toolbar = [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
{ name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'language' ] },
{ name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
{ name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] },
{ name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
{ name: 'colors', items: [ 'TextColor', 'BGColor' ] },
{ name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] },
config.language = 'de';
config.extraPlugins = 'save';
$(document).ready(function() {
$(document).on('click', function(){
$.each( CKEDITOR.instances, function(instance) {
CKEDITOR.instances[instance].on("blur", function() {
var $formlet = $(this.element.$.parentElement.parentElement);
var $span = $formlet.siblings('.in-place-edit')
var annotations = $'rapid')['click-editor'];
$formlet.hjq('hide', annotations.hide);
# I am app/models/content_element.rb
class ContentElement < ActiveRecord::Base
fields do
content_en :cktext
# ... some fields ...
# ... some more stuff ...
# I am in Gemfile
gem "ckeditor", :git => "git://"
gem "hobo_ckeditor" # CKEditor integration
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment