Wagtail Draftail Anchors

Adds the ability to add and edit anchors in the Draftail rich text editor, as well as automatically adding (slug-form) anchor ids to all headings with possibility to changes heading ids. Inspired by wagtail_draftail_anchors with some improvements like possibility to edit previous anchor id and headings' ids.

Instalation

Add 'wagtailset.draftail_anchors' to INSTALLED_APPS below wagtail.admin.

Add 'anchor-identifier' to the features of any rich text field where you have overridden the default feature list. Note: 'anchor-identifier' must be added before any heading('h1',...,'h6') feature and also before 'link' feature:

body = RichTextField(features=['anchor-identifier', 'h2', 'h3', 'bold', 'italic', 'link'])

Rendered representation of anchors

By default, anchor-identifier rich text entities will be rendered as HTML anchor elements, e.g.:

<a href="#my-element" id="my-element" data-id="my-element">My element</a>

Configuration

This package provides an alternative renderer that renders anchor-identifier entities as HTML span elements, e.g.:

<span id="my-element">My element</span>

The desired renderer can be specified using the DRAFTAIL_ANCHORS_RENDERER setting. To use the span renderer, configure your application as follows:

DRAFTAIL_ANCHORS_RENDERER = "wagtailset.draftail_anchors.rich_text.render_span"

It is possible to define your own renderer. It should be a callable that takes a dict of attributes, and returns a string containing the opening tag of the HTML element that represents the anchor target. The dict passed to the renderer, for an anchor with an identifier of "my-anchor", would look like the following:

{"data-id": "my-anchor", "href": "#my-anchor", "id": "my-anchor", "linktype": "my-anchor"}

If you define your own renderer, you should set the value of DRAFTAIL_ANCHORS_RENDERER to your custom renderer's import path.

See render_span and render_a in wagtailset.draftail_anchors.rich_text for examples.

<a hash="header-1" id="3" linktype="page">bla</a>

<a href="/page3/#header-1">bla</a>