wagtail-editorjs 1.6.1rc3

EditorJS as a widget for Wagtail, with Page- and Image chooser support

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

1. Add 'wagtail_editorjs' to your INSTALLED_APPS setting like this:

   INSTALLED_APPS = [
   ...,
   'wagtail_editorjs',
   ]
   

2. 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" %}
   

3. 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:

1. start the python shell

   py ./manage.py shell
   

2. 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.