Skip to content

Instantly share code, notes, and snippets.

@jeffrey-hearn
Created June 9, 2014 16:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save jeffrey-hearn/502d0914fa4a930f08ac to your computer and use it in GitHub Desktop.
Save jeffrey-hearn/502d0914fa4a930f08ac to your computer and use it in GitHub Desktop.
Extending hallo.js using Wagtail hooks
((jQuery) ->
jQuery.widget "IKS.mirrorstageeditor",
boldElement: null
options:
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
@boldElement.hallobutton
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
)(jQuery)
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 = [
'mirrorstage/js/hallo-plugins/hallo-mirrorstage.js',
]
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(
"""
<script>
console.log('Mirrorstage Editor JS Loaded!');
registerHalloPlugin('mirrorstageeditor');
</script>
"""
)
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)
@jossingram
Copy link

Hi,

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

@jossingram
Copy link

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

@jossingram
Copy link

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?

Thanks
Joss

@GabLeRoux
Copy link

@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.

@SalahAdDin
Copy link

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?

@jhovanic
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