Hopiu/wagtail
1
0
Fork 0
mirror of https://github.com/Hopiu/wagtail.git synced 2026-03-30 04:40:40 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Document plain JS & CSS extension points for Draftail

Browse source
This commit is contained in:
Thibaud Colas 2018-02-09 17:58:41 +02:00 committed by Matt Westcott
parent 469f1ddd86
commit 4104b3922b
1 changed files with 9 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
docs/advanced_topics/customisation/extending_draftail.rst
View file

@ -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 <https://github.com/springload/draftail>`_ documentation), but these are not detailed here since :ref:`StreamField <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-``.