wagtail - hallo.js "edit html" button

hallo-edit-html.js

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

                var getEnclosing = function(tag) {
                    var node;

                    node = widget.options.editable.getSelection().commonAncestorContainer;
                    return $(node).parents(tag).get(0);
                };

                widget = this;

                button = $('<span></span>');
                button.hallobutton({
                    uuid: this.options.uuid,
                    editable: this.options.editable,
                    label: 'Edit HTML',
                    icon: 'fa fa-file-code-o',
                    command: null
                });

                toolbar.append(button);

                button.on('click', function(event) {
                    $('body > .modal').remove();
                    var container = $('<div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">\n    <div class="modal-dialog">\n        <div class="modal-content"\
>\n            <button type="button" class="close icon text-replace icon-cross" data-dismiss="modal" aria-hidden="true">&times;</button>\n            <div class="modal-body"><hea\
der class="nice-padding   hasform"><div class="row"><div class="left"><div class="col"><h1><i class="fa fa-file-code-o"></i>Edit HTML Code</h1></div></header><div class="modal-bo\
dy-body"></div></div>\n        </div><!-- /.modal-content -->\n    </div><!-- /.modal-dialog -->\n</div>');

                    // add container to body and hide it, so content can be added to it before display                                                                             
                    $('body').append(container);
                    container.modal('hide');
                    var modalBody = container.find('.modal-body-body');
                    modalBody.html('<textarea style="height: 400px; border: 1px solid black" id="wagtail-edit-html-content">'+widget.options.editable.element.html()+'</textarea><button i\
d="wagtail-edit-html-save" type="button">Save</button>');
                    $("#wagtail-edit-html-save").on("click", function() {
                        widget.options.editable.setContents($("#wagtail-edit-html-content").val());
                        widget.options.editable.setModified();
                        container.modal('hide');
                    });
                    container.modal('show');
                });
            }
        });
    })(jQuery);
}).call(this);

wagtail_hooks.py

from wagtail.wagtailcore.whitelist import attribute_rule, check_url, allow_without_attributes
from wagtail.wagtailcore import hooks

def allow_all_attributes(tag):
    pass

def whitelister_element_rules():
      tags=["a","abbr","acronym","address","area","b","base","bdo","big","blockquote","body","br","button","caption","cite","code","col","colgroup","dd","del","dfn","div","dl","D\
OCTYPE","dt","em","fieldset","form","h1","h2","h3","h4","h5","h6","head","html","hr","i","img","input","ins","kbd","label","legend","li","link","map","meta","noscript","object","\
ol","optgroup","option","p","param","pre","q","samp","script","select","small","span","strong","style","sub","sup","table","tbody","td","textarea","tfoot","th","thead","title","t\
r","tt","ul","var"]
      return dict((tag, allow_all_attributes) for tag in tags)
hooks.register('construct_whitelister_element_rules', whitelister_element_rules)

Note that this code, as it is, will break if the HTML under edit has a <textarea> within it. To solve this, escape the data from widget.options.editable.element.html() before slotting it between the textarea tags, or let jQuery do it for you.

Something like this:

          var editor = $('<textarea id="wagtail-edit-html-content"></textarea>');
          editor.text(widget.options.editable.element.html());
          var save_button = '<button id="wagtail-edit-html-save" type="button">Save</button>';
          // Stick the editor and save button into the modal body, then show the container.
          modalBody.append(editor).append(save_button);