Skip to main content

A Draftail extension to add anchor identifiers to rich text

Project description

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.

Installation

Install using pip:

pip install wagtail-draftail-anchors

Add 'wagtail_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. The feature must be added before any heading('h1',...,'h6') feature:

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

Configuration

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>

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 = "wagtail_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 wagtail_draftail_anchors.rich_text for examples.

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distributions

No source distribution files available for this release. See tutorial on generating distribution archives.

Built Distribution

Supported by

AWS AWS Cloud computing Datadog Datadog Monitoring Facebook / Instagram Facebook / Instagram PSF Sponsor Fastly Fastly CDN Google Google Object Storage and Download Analytics Huawei Huawei PSF Sponsor Microsoft Microsoft PSF Sponsor NVIDIA NVIDIA PSF Sponsor Pingdom Pingdom Monitoring Salesforce Salesforce PSF Sponsor Sentry Sentry Error logging StatusPage StatusPage Status page