Customizing hallo.js editor in Wagtail—examples or best practices?

[Dan]

I'd like to customize hallo.js—the markdown example was pretty cool or even adding the HTML editor plugin—but I haven't found any docs or examples on the best way to extend hallo.js in Wagtail.

Updating hallo.js and its plugins in /wagtailadmin/ feels like a bad idea because those modifications would have to be reapplied with subsequent Wagtail updates, i.e. I'd like keep away from modifying the Wagtail core.

Any examples, docs, or recommendations would be greatly appreciated!

[Matthew Westcott]

Hi Dan,
You've touched on something that I'd really like to get into Wagtail, but haven't had chance as yet...

Currently we have a hooks system where any app can define a module wagtail_hooks.py to extend Wagtail admin behaviour, such as adding menu items:

from wagtail.wagtailadmin import hooks
from wagtail.wagtailadmin.menu import MenuItem

def add_comments_menu_item(request, menu_items):
menu_items.append(
MenuItem('Comments', reverse('comments_index'), classnames='icon icon-user', order=100)
)
hooks.register('construct_main_menu', add_comments_menu_item)

At the moment there aren't a huge number of hook types defined, and I'd like to take this a lot further. A hook for inserting hallo.js plugins would be a really neat one to add, not just for adding non-core extensions, but also tidying up the existing code. Ideally the 'bundled' apps - wagtailimages, wagtaildocs and so on - will make use of this mechanism too, to the point where wagtailadmin itself doesn't contain any hard-coded references to thse apps.

Will see if I can fit in implementing a hook for hallo.js in the next week or so!

- Matt

[Patrick Craston]

Hi Matt

Firstly, great work on Wagtail.

I've been looking through the commit logs and couldn't figure out whether you had a chance to implement that hallo.js hook?

Any pointers greatly appreciated.

Thanks
Patrick

[Matthew Westcott]

Hi Patrick,
Not yet I'm afraid - we're a bit closer now, as we have hooks in place for inserting custom JS / CSS into the page editor, but there's still a bit of 'glue' code to be written to integrate it with hallo.js.

- Matthew

> --
> You received this message because you are subscribed to the Google Groups "Wagtail" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to wagtail+u...@googlegroups.com.
> To post to this group, send email to wag...@googlegroups.com.
> Visit this group at http://groups.google.com/group/wagtail.
> To view this discussion on the web, visit https://groups.google.com/d/msgid/wagtail/500d54fc-ac8a-49b2-8eea-e8a7d524cbf8%40googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.

[Benjamin Margolis]

For those who didn't see it, it seems like this has been updated on the 10th: https://github.com/torchbox/wagtail/commit/1ecc215759142e6cafdacb185bbfd3f8e9cd3185

[Joss Ingram]

Does anyone have an example of adding custom buttons to the editor toolbar or any other hallo customizations through wagtail?

[Jeffrey Hearn]

Yep, I did a proof-of-concept example for adding a custom/new hallo.js plugin:

https://gist.github.com/jeffrey-hearn/502d0914fa4a930f08ac

I didn't feel like getting into JQuery UI stuff so all the custom plugin does it replicate the "bold" button through simplified command syntax. I haven't included the local copy of Font Awesome in the gist. It has to be local since anything sent into the hooks must be compress-able.

I also added documentation of the Wagtail hooks which load JS and CSS into the editor:

http://wagtail.readthedocs.org/en/latest/editing_api.html#edit-handler-api

[Joss Ingram]

Thanks, I've decided now to leave the editor as is, I think the fact wagtail just allows basic styling and not the insertion of tables etc, is a good idea!

[Joss Ingram]

Actually Im back at trying to customize the editor, trying to add a blockquote button. Ive added a bold, or italic button, strikethrough but can't work out how to get a blockquote tag around something.

Anyone done that or applied a SPAN with a class?

[José Miguel Vieira]

Hi,

This is the code I am currently using for a blockquote button:

(function() {
    (function($) {
        return $.widget('IKS.hallopageants', {
            options: {
                uuid: '',
                editable: null
            },
            populateToolbar: function(toolbar) {
                var button, widget;

                widget = this;

                button = $('<span></span>');
                button.hallobutton({
                    uuid: this.options.uuid,
                    editable: this.options.editable,
                    label: 'Blockquote',
                    icon: 'fa fa-quote-left',
                    command: null
                });

                toolbar.append(button);

                button.on('click', function(event) {
                    return widget.options.editable.execute('formatBlock',
                                                           'blockquote');
                });
            }
        });
    })(jQuery);
}).call(this);

Regards,
Miguel

[Joss Ingram]

Thanks

That's more concise than my code, but the <blockquote> gets stripped out all the same,

[Benjamin Margolis]

Hi Joss,

As far as I know, there isn't a good way to add a button for tags like <blockquote>. The field gets cleaned by a whitelisting function (i.e., see https://github.com/torchbox/wagtail/pull/283#issuecomment-45615433). I eventually plan on working on a hook system to add tags to the whitelist, but you have to modify the core for now.

Best Regards,

Benjamin Margolis

--
You received this message because you are subscribed to a topic in the Google Groups "Wagtail" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/wagtail/bdlUNeFl_xI/unsubscribe.
To unsubscribe from this group and all its topics, send an email to wagtail+u...@googlegroups.com.

To post to this group, send email to wag...@googlegroups.com.
Visit this group at http://groups.google.com/group/wagtail.

To view this discussion on the web, visit https://groups.google.com/d/msgid/wagtail/ac063ee9-8aae-4752-af15-343d8e6b384c%40googlegroups.com.

[Joss Ingram]

Thanks. Yes, already new about that. Modifying the core sounds scary to me!

 I felt so pleased with myself adding a button, but then denied by the whitelist.py :(

[José Miguel Vieira]

Hi Joss,

I added a pull request to wagtail that adds a new hook to add new rules to the elements whitelist https://github.com/torchbox/wagtail/pull/337.

[Joss Ingram]

It would be good.

[Matthew Westcott]

Now merged, and documented here:
http://wagtail.readthedocs.org/en/latest/editing_api.html#construct-whitelister-element-rules

(the explanation gets a bit convoluted, but the example code tells you exactly what you need to know...)

- Matt

[Joss Ingram]

Awesome!

[g]

Is it possible to add hallo plugins and modify the whitelist on a per field basis?  I am trying to implement a custom plugin that will allow the user to insert a script tag that will be rendered as a django template before outputting the final html content to the page.  It would be nice not to enable this on all RichTextFields, but rather a specific one somehow

[g]

On Tuesday, June 17, 2014 8:43:20 AM UTC-4, Joss Ingram wrote:

Actually Im back at trying to customize the editor, trying to add a blockquote button. Ive added a bold, or italic button, strikethrough but can't work out how to get a blockquote tag around something.

Anyone done that or applied a SPAN with a class?

Here is a minimal example that I have put together trying to learn how this all works over the last hour or two showing adding a span with a custom class.  It seems to work for arbitrary attributes.  I tested data-* attrs and class in Chrome.  Not sure about other browsers yet.

(function($) {

return $.widget("IKS.pluginfoo", {

options: {

uuid: '',

editable: null

},

populateToolbar: function(toolbar) {

var widget = this,

button = $('<span class="pluginfoo-button"></span>');

button.hallobutton({

uuid: widget.options.uuid,

editable: widget.options.editable,

label: 'Foo',

icon: 'icon-pluginfoo',

command: null

});

button.on('click', function(event) {

// useful links:

// http://stackoverflow.com/questions/16529316/javascript-document-execcommand-own-tags#answer-16530063

// https://developer.mozilla.org/en-US/docs/Rich-Text_Editing_in_Mozilla

// https://developer.mozilla.org/en-US/docs/Web/API/document.execCommand

return widget.options.editable.execute("insertHTML", "<span class='own-class'>"+ document.getSelection() +"</span>");

});

return toolbar.append(button);

}

});

})(jQuery);

[Joss Ingram]

Thanks for that example.

On a separate note, if I create a new demo site based on the wagtaildemo vagrant will it pull in the latest version of the wagtail core with the new whitelist override hook?

Joss

On Monday, 10 March 2014 21:27:59 UTC, Dan wrote:

[Tom Dyson]

Hi Joss

Yes: Wagtaildemo pulls in the latest master of Wagtail from Github - see https://github.com/torchbox/wagtaildemo/blob/master/requirements/base.txt - which now includes the whitelist changes.

Tom

[Joss Ingram]

Here's an example of a blockquote and a blockquote button with a class parameter that I got working.

Adding  blockquote buttons to wagtail's editor

On Monday, 23 June 2014 10:37:01 UTC+1, Joss Ingram wrote:

[YusufSalahAdDin]

Can anyone helpme to correct and optimize my custom buttonset?

Occurs that put me a blockquote with pullout class by default in both cases, and put me it before or inside of other blockquote object.

My code is this:

https://gist.github.com/SalahAdDin/347e4fab78a64eaadd5c

Thank you.

[Ilya Yakunin]

Hi!
I'm just wondering if anyone has a working example of adding "Read more" button to hallo editor which would allow to collapse and expand long blocks of text. I've found a good  jQuery example of this feature here http://jedfoster.com/Readmore.js/ but can't figure out how to implement it with custom button in richtext editor.

Any help would be very appreciated!

[Matthew Westcott]

Hi Ilya,
Including this in a rich text field would be the wrong approach. A 'read more' link is a design feature of your site, not a piece of editorial content, so you should place that code on your template instead.

Cheers,
- Matt

[Brett Grace]

The way I've handled this (pre-StreamField) is to provide two fields, let's call them "excerpt" and "body". If the excerpt is filled out, I display that, followed by a "read more" button (which is in the template). If excerpt is not filled out, use the body content to automatically generate an excerpt in the template using, e.g., the truncatewords_html filter. If you want to get more sophisticated you can write a tag or filter that truncates more intelligently (for example, display up to 200 words, unless the total number of words is less than 300, in which case display the whole thing).

If you're using StreamField, I think you could probably create a StreamField block type that includes the excerpt/body fields right into the content type. Thinking about it for all of 30 seconds, I think this is probably the way I would go if I were implementing this feature again.

I think a good case can be made that tagging a part of a document as an "excerpt" is justifiable for semantic (and not just presentational) purposes, so I don't think it's out of place in a rich text editor in general—but it probably is in  Wagtail, given its assumptions and architecture.

[Eraldo Energy]

I really like wagtail.. and the stream-field is awesome!

Is there yet a working example of how to enable markdown for hello.js in wagtail?

The separation of content and presentation is a great choice in my opinion.. I would however not go thus far to create a "bold-block" for stream field.

Nor do I like the idea of having html saved into the database, since markdown would be my preferred format.. also thinking about exporting to text files etc.

Running a html to markdown just to export to text seems to be the conter-intuitive route to go in my opinion.

The hellojs.org website has a "Markdown demo" -- That is exactly what I would like to have instead of rich-text in my content fields.

Is there an example for this or can someone provide one? Please! :)

Greetings from Berlin,

Eraldo

[Eric]

I added a Markdown block just recently. I started with this https://github.com/torchbox/wagtail-markdown. I made a few fixes to it so it would work for my purposed and created a Pull Request. If the torchbox repo doesn't work for you, you could try my fork.

-eric