diff --git a/README.md b/README.md index 9a34ced..86c90ac 100644 --- a/README.md +++ b/README.md @@ -87,6 +87,27 @@ class Post(models.Model): - `Attaches` - (`dict`) configuration for tool `AttachesTool`. (_For more info see official documentation for tool_). - `Table` - (`dict`) configuration for tool `Table`. (_For more info see official documentation for tool_). +## Using Custom Block Tools + +You can now add custom block tools by serving a js file named "custom-editorjs-tools.js" in the static folder, this can contain any custom block tool, let's imagine it contains a *SimpleImage* block tool. You can now use this block by setting something like this in the configuration. **Warning: The class content should not ever depend on user input or any nontrusted input, as it could lead to xss** + +```python +class Post(models.Model): + title = models.TextField() + body = EditorJsField( + editorjs_config={ + "tools": { + "Custom": { + "Customimage": { + "class": "SimpleImage" + } + } + } + } + ) + +``` + # API - `EditorJsField` diff --git a/django_editorjs/static/django-editorjs.js b/django_editorjs/static/django-editorjs.js index fe21be8..f0c55e7 100644 --- a/django_editorjs/static/django-editorjs.js +++ b/django_editorjs/static/django-editorjs.js @@ -28,6 +28,20 @@ ); } + /** + * @param {Object} config + */ + function getCustomTools(config){ + if (config && config.tools && config.tools["Custom"]){ + var tools = {}; + for (const [key, value] of Object.entries(config.tools["Custom"])) { + tools[key] = value; + tools[key].class = eval(tools[key].class); + } + return tools; + } + } + /** * @param {HTMLDivElement} field_wrapper */ @@ -109,6 +123,10 @@ inlineToolbar: true, }); } + tools = { + ...tools, + ...getCustomTools(config) + }; const editor = new EditorJS({ holder: holder_el, diff --git a/django_editorjs/widgets.py b/django_editorjs/widgets.py index 047e293..d97decc 100644 --- a/django_editorjs/widgets.py +++ b/django_editorjs/widgets.py @@ -14,6 +14,7 @@ def media(self): css={"all": ["django-editorjs.css"]}, js=( "https://cdn.jsdelivr.net/combine/npm/@editorjs/editorjs@2.18.0,npm/@editorjs/paragraph@2.7.0,npm/@editorjs/image@2.4.2,npm/@editorjs/header@2.5.0,npm/@editorjs/list@1.5.0,npm/@editorjs/checklist@1.1.0,npm/@editorjs/quote@2.3.0,npm/@editorjs/raw@2.1.2,npm/@editorjs/embed@2.3.1,npm/@editorjs/delimiter@1.1.0,npm/@editorjs/warning@1.1.1,npm/@editorjs/link@2.2.1,npm/@editorjs/marker@1.2.2,npm/@editorjs/attaches@1.0.1,npm/@editorjs/table@1.2.2", + "custom-editorjs-tools.js", "django-editorjs.js", ), )