Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Extending hallo.js using Wagtail hooks
((jQuery) ->
jQuery.widget "IKS.mirrorstageeditor",
boldElement: null
uuid: ''
editable: null
_create: ->
# Add any actions you want to run on plugin initialization
# here
populateToolbar: (toolbar) ->
# Create an element for holding the button
@boldElement = jQuery '<span></span>'
# Use Hallo Button
uuid: @options.uuid
editable: @options.editable
label: 'Bold'
# Icons come from Font Awesome
icon: 'fa fa-space-shuttle'
# Commands are used for execCommand and queryCommandState
command: 'bold'
# Append the button to toolbar
toolbar.append @boldElement
from django.utils.html import format_html, format_html_join
from django.conf import settings
from wagtail.wagtailadmin import hooks
def editor_js():
js_files = [
js_includes = format_html_join('\n', '<script src="{0}{1}"></script>',
((settings.STATIC_URL, filename) for filename in js_files)
return js_includes + format_html(
console.log('Mirrorstage Editor JS Loaded!');
hooks.register('insert_editor_js', editor_js)
def editor_css():
return format_html('<link rel="stylesheet" href="'+ settings.STATIC_URL + 'mirrorstage/css/vendor/font-awesome/css/font-awesome.min.css">')
hooks.register('insert_editor_css', editor_css)
Copy link

jossingram commented Jun 16, 2014


Tried your example but I'm getting

Uncaught TypeError: undefined is not a function hallo.js:47
jQuery.widget._create hallo.js:47
(anonymous function) jquery-ui-1.10.3.js:401
$.Widget._createWidget jquery-ui-1.10.3.js:560
$.(anonymous function).(anonymous function) jquery-ui-1.10.3.js:362
(anonymous function) jquery-ui-1.10.3.js:507
x.extend.each jquery-1.10.3.js:4
x.fn.x.each jquery-1.10.3.js:4
$.fn.(anonymous function) jquery-ui-1.10.3.js:502
makeRichTextEditable page-editor.js:31
(anonymous function) (index):983
(anonymous function)

it gets to Mirrorstage Editor JS Loaded! in the console

Copy link

jossingram commented Jun 16, 2014

sorry, ignore that comment, cut and paste error, it works now :(

Copy link

jossingram commented Jun 16, 2014

Any ideas on how to make it do a blockquote tag, instead of bold. I can get it to do italic, strikethrough, everything but blockquote?


Copy link

GabLeRoux commented Jul 26, 2014

@jossingram as I can see, you wrote this post and does the job, thanks. I wish we could use hallo.js with markdown in wagtail like in this markdown demo.

Copy link

SalahAdDin commented May 25, 2015

Hi guys, i have a other question.
I want put a group of custom buttons, but, i don't know how do this, can anyone help me?

Copy link

jhovanic commented Aug 2, 2016

Hi guys,

Is there a way to extend a plugin ? Let's say to add more formats to the halloformat plugin. I'd like to add the superscript and subscript buttons to that button set.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment