Adapters

Creating a custom adapter is relatively simple.
We highly recommend you to inherit from BaseFieldFuncAdapter or BaseBlockFuncAdapter.
These adapters are basically pre-setup to callback to a javascript function on successful form submission.
This will save you the most amount of work.

We will create an adapter to change the color of a text field.

Our adapter will be called colorizer.

1. Our model is defined as follows:

    1from wagtail.models import Page
    2from wagtail.admin.panels import FieldPanel
    3from django.db import models
    4
    5class MyPage(Page):
    6    COLOR_CHOICES = [
    7        ("#000000", "Black"),
    8        ("#FFFFFF", "White"),
    9        ("#FF0000", "Red"),
   10        ("#00FF00", "Green"),
   11        ("#0000FF", "Blue"),
   12    ]
   13
   14    color = models.CharField(max_length=7, default="#000000", choices=COLOR_CHOICES)
   15
   16    content_panels = Page.content_panels + [
   17        FieldPanel("color"),
   18    ]
   

2. We have the following HTML template:

   ...
   
   {% load fedit %}
   {% fedit colorizer page.color target=".my-colorized-div" %}
   <div class="my-colorized-div" style="color: {{ page.color }}">
       <h1>Colorized Text!</h1>
   </div>
   ...
   

View the custom Python adapter in the Adapters Python page.

View the custom Javascript adapter in the Adapters Javascript page.