From 3121baba6afbbeb916c676606732866f601136d5 Mon Sep 17 00:00:00 2001 From: Nigel van Keulen Date: Sat, 20 Apr 2024 22:05:25 +0200 Subject: [PATCH] add explanation for CSS and JS templatetags, add explanation for adapter needing to register it's js with the hook --- README.md | 32 +++++++++++++++++++++++++++++++- 1 file changed, 31 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index b160f2c..5782422 100644 --- a/README.md +++ b/README.md @@ -61,7 +61,8 @@ Getting Started Document - + {# Load all registered CSS required for the adapters. Only included inside edit view! #} + {% fedit_scripts "css" %} {# Adress the model.field or model.my.related.field you wish to edit. #} @@ -76,6 +77,8 @@ Getting Started {% wagtailuserbar %} + {# Load all registered Javascript required for the adapters. Only included inside edit view! #} + {% fedit_scripts "js" %} @@ -242,11 +245,15 @@ class MyPage(Page): 2. We have the following HTML template: ```django-html +... + {% load fedit %} {% fedit colorizer page.color target=".my-colorized-div" %}

Colorized Text!

+ +... ``` ### Adapters Python @@ -339,11 +346,34 @@ We now need to create the javascript function to actually apply the color to the This function will be called `myColorizerJavascriptFunction`, as defined in the adapter's `__init__` method. ```javascript +// myapp/static/myapp/js/custom.js function myColorizerJavascriptFunction(element, response) { element.style.color = response.color; } ``` +We must then register this javascript file to be included in the frontend editing interface. + +This should be done in a `wagtail_hooks.py` file. + +```python +# myapp/wagtail_hooks.py + +from django.utils.html import format_html +from django.templatetags.static import static +from wagtail_fedit.hooks import REGISTER_JS +from wagtail import hooks + +@hooks.register(REGISTER_JS) +def register_js(request): + return [ + format_html( + '', + static('myapp/js/custom.js') + ), + ] +``` + ## Hooks ### wagtail_fedit.construct_adapter_toolbar