Handled Custom Block Tools

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`

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,

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",
             ),
         )