Add hooks to insert custom CSS/JS into the editor interface

runtests.py

@@ -85,6 +85,7 @@ if not settings.configured:
         PASSWORD_HASHERS=(
             'django.contrib.auth.hashers.MD5PasswordHasher',  # don't use the intentionally slow default password hasher
         ),
+        COMPRESS_ENABLED=False,  # disable compression so that we can run tests on the content of the compress tag
         WAGTAILSEARCH_BACKENDS=WAGTAILSEARCH_BACKENDS,
         WAGTAIL_SITE_NAME='Test Site'
     )

wagtail/tests/wagtail_hooks.py

@@ -0,0 +1,10 @@
+from wagtail.wagtailadmin import hooks
+
+def editor_css():
+    return """<link rel="stylesheet" href="/path/to/my/custom.css">"""
+hooks.register('insert_editor_css', editor_css)
+
+
+def editor_js():
+    return """<script src="/path/to/my/custom.js"></script>"""
+hooks.register('insert_editor_js', editor_js)

wagtail/wagtailadmin/templates/wagtailadmin/pages/_editor_css.html

@@ -1,4 +1,4 @@
-{% load compress %}
+{% load compress wagtailadmin_tags %}
 
 {% comment %}
     CSS declarations to be included on the 'create page' and 'edit page' views
@@ -16,6 +16,8 @@
     {# we'll want tag-it included, for the benefit of any modals that use it, like images. #}
     {# TODO: a method of injecting these sorts of things on demand when the modal is spawned #}
     <link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/scss/vendor/jquery.tagit.css">
+
+    {% hook_output 'insert_editor_css' %}
 {% endcompress %}
 
 {{ edit_handler.form.media.css }}

wagtail/wagtailadmin/templates/wagtailadmin/pages/_editor_js.html

@@ -1,5 +1,4 @@
-{% load compress %}
+{% load wagtailadmin_tags compress localize %}
-{% load localize %}
 
 {% comment %}
     Javascript declarations to be included on the 'create page' and 'edit page' views
@@ -22,15 +21,17 @@
 
     <script src="{{ STATIC_URL }}wagtailadmin/js/page-chooser.js"></script>
     {% comment %}
-        TODO: have a mechanism to specify image-chooser.js (and hallo-wagtailimage.js)
+        TODO: use the insert_editor_js hook to inject things like image-chooser.js and hallo-wagtailimage.js
-        within the wagtailimages app -
+        from their respective apps such as wagtailimages -
-        ideally wagtailadmin shouldn't have to know anything at all about wagtailimages
+        ideally wagtailadmin shouldn't have to know anything at all about wagtailimages.
         TODO: a method of injecting these sorts of things on demand when the modal is spawned.
     {% endcomment %}
     <script src="{{ STATIC_URL }}wagtailimages/js/image-chooser.js"></script>
     <script src="{{ STATIC_URL }}wagtaildocs/js/document-chooser.js"></script>
     <script src="{{ STATIC_URL }}wagtailsnippets/js/snippet-chooser.js"></script>
     <script src="{{ STATIC_URL }}admin/js/urlify.js"></script>
+
+    {% hook_output 'insert_editor_js' %}
 {% endcompress %}
 
 {% comment %}

wagtail/wagtailadmin/templatetags/wagtailadmin_tags.py

@@ -116,3 +116,15 @@ def page_permissions(context, page):
 
     # Now retrieve a PagePermissionTester from it, specific to the given page
     return context['user_page_permissions'].for_page(page)
+
+
+@register.simple_tag
+def hook_output(hook_name):
+    """
+    Example: {% hook_output 'insert_editor_css' %}
+    Whenever we have a hook whose functions take no parameters and return a string, this tag can be used
+    to output the concatenation of all of those return values onto the page.
+    Note that the output is not escaped - it is the hook function's responsibility to escape unsafe content.
+    """
+    snippets = [fn() for fn in hooks.get_hooks(hook_name)]
+    return u''.join(snippets)

wagtail/wagtailadmin/tests.py

@@ -308,3 +308,21 @@ class TestPageMove(TestCase):
     def test_page_set_page_position(self):
         response = self.client.get(reverse('wagtailadmin_pages_set_page_position', args=(self.test_page.id, )))
         self.assertEqual(response.status_code, 200)
+
+
+class TestEditorHooks(TestCase):
+    def setUp(self):
+        self.homepage = Page.objects.get(id=2)
+        login(self.client)
+
+    def test_editor_css_and_js_hooks_on_add(self):
+        response = self.client.get(reverse('wagtailadmin_pages_create', args=('tests', 'simplepage', self.homepage.id)))
+        self.assertEqual(response.status_code, 200)
+        self.assertContains(response, '<link rel="stylesheet" href="/path/to/my/custom.css">')
+        self.assertContains(response, '<script src="/path/to/my/custom.js"></script>')
+
+    def test_editor_css_and_js_hooks_on_edit(self):
+        response = self.client.get(reverse('wagtailadmin_pages_edit', args=(self.homepage.id, )))
+        self.assertEqual(response.status_code, 200)
+        self.assertContains(response, '<link rel="stylesheet" href="/path/to/my/custom.css">')
+        self.assertContains(response, '<script src="/path/to/my/custom.js"></script>')