From 4104b3922bb07e4eb63a7b87a19c4e5fba0cdcdc Mon Sep 17 00:00:00 2001 From: Thibaud Colas Date: Fri, 9 Feb 2018 17:58:41 +0200 Subject: [PATCH] Document plain JS & CSS extension points for Draftail --- .../advanced_topics/customisation/extending_draftail.rst | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/docs/advanced_topics/customisation/extending_draftail.rst b/docs/advanced_topics/customisation/extending_draftail.rst index bc0d97747..2f7dcaa49 100644 --- a/docs/advanced_topics/customisation/extending_draftail.rst +++ b/docs/advanced_topics/customisation/extending_draftail.rst @@ -334,3 +334,12 @@ To fully complete the demo, we can add a bit of JavaScript to the front-end in o ---- Custom block entities can also be created (have a look at the separate `Draftail `_ documentation), but these are not detailed here since :ref:`StreamField ` is the go-to way to create block-level rich text in Wagtail. + +Integration of the Draftail widgets +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + +To further customise how the Draftail widgets are integrated into the UI, there are additional extension points for CSS and JS: + +* In JavaScript, use the ``[data-draftail-input]`` attribute selector to target the input which contains the data, and ``[data-draftail-editor-wrapper]`` for the element which wraps the editor. +* The editor instance is bound on the input field for imperative access. Use ``document.querySelector('[data-draftail-input]').draftailEditor``. +* In CSS, use the classes prefixed with ``Draftail-``.