EditorJS as a widget for Wagtail, with Page- and Image chooser support
Project description
wagtail_editorjs
Check out Awesome Wagtail for more awesome packages and resources from the Wagtail community.
A Wagtail EditorJS widget with page/image chooser support, document support and more!
Add features:
- Add an EditorJS feature
- Add an EditorJS tune (Already exists in
wagtail_editorjs
, just an example.)
Quick start
-
Add 'wagtail_editorjs' to your INSTALLED_APPS setting like this:
INSTALLED_APPS = [ ..., 'wagtail_editorjs', ]
-
Add the HTML to your template:
<link rel="stylesheet" href="{% static 'wagtail_editorjs/css/frontend.css' %}"> {% load editorjs %} {# CSS files for features #} {% editorjs_static "css" %} {% editorjs self.editor_field %} {# JS files for features #} {% editorjs_static "js" %}
-
Add the field to your model:
... from wagtail_editorjs.fields import EditorJSField from wagtail_editorjs.blocks import EditorJSBlock class HomePage(Page): content_panels = [ FieldPanel("editor_field"), FieldPanel("content"), ] editor_field = EditorJSField( # All supported features features=[ 'attaches', 'checklist', 'code', 'delimiter', 'header', 'inline-code', 'marker', 'nested-list', 'paragraph', 'quote', 'raw', 'table', 'underline', 'warning', 'link-autocomplete', 'button', 'tooltip', 'link', 'image', 'images', 'document', 'text-alignment-tune', 'text-variant-tune', 'background-color-tune', 'text-color-tune', 'undo-redo', 'drag-drop' ], blank=True, null=True, ) # Or as a block content = fields.StreamField([ ('editorjs', EditorJSBlock(features=[ # ... same as before ])), ], blank=True, use_json_field=True)
List features
This readme might not fully reflect which features are available.
To find this out - you can:
-
start the python shell
py ./manage.py shell
-
Print all the available features:
from wagtail_editorjs.registry import EDITOR_JS_FEATURES print(EDITOR_JS_FEATURES.keys()) dict_keys([... all registered features ...])
Settings
EDITORJS_CLEAN_HTML
Default: True
Clean the HTML output on rendering.
This happens every time the field is rendered.
It might be smart to set up some sort of caching mechanism.
Optionally; cleaning can be FORCED by passing clean=True
or False
to the render_editorjs_html
function.
EDITORJS_ADD_BLOCK_ID
Default: true
Add a block ID to each editorJS block when rendering.
This is useful for targeting the block with JavaScript,
or possibly creating some link from frontend to admin area.
EDITORJS_BLOCK_ID_ATTR
Default: data-editorjs-block-id
The attribute name to use for the block ID.
This is only used if ADD_BLOCK_ID
is True.
EDITORJS_USE_FULL_URLS
Default: False
Use full urls if the request is available in the EditorJS rendering context.
Project details
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Hashes for wagtail_editorjs-1.6.1rc3.tar.gz
Algorithm | Hash digest | |
---|---|---|
SHA256 | 59b5fb11b8240c51780028aaf815b5acf43bc46ca1806a0020827f6dcc87c3ed |
|
MD5 | 6afe67d2fec9a81a30e167cb59045dee |
|
BLAKE2b-256 | 28f7f4d14551e298abf4d99f35a7011c1da91723fe4602dc9b55fa58ff9cc3d4 |