Created
June 9, 2014 16:14
-
-
Save wren-hearn/502d0914fa4a930f08ac to your computer and use it in GitHub Desktop.
Extending hallo.js using Wagtail hooks
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
((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) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) |
sorry, ignore that comment, cut and paste error, it works now :(
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
@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.
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?
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
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