Giter Site home page Giter Site logo

django-editorjs's Introduction

django-editorjs

GitHub version PyPi downloads

Plugin for using Editor.js in django admin.

Supported plugins/tools

  • @editorjs/paragraph - npm version
  • @editorjs/image - npm version
  • @editorjs/header - npm version
  • @editorjs/checklist - npm version
  • @editorjs/list - npm version
  • @editorjs/quote - npm version
  • @editorjs/raw - npm version
  • @editorjs/embed - npm version
  • @editorjs/delimiter - npm version
  • @editorjs/warning - npm version
  • @editorjs/link - npm version
  • @editorjs/marker - npm version
  • @editorjs/attaches - npm version
  • @editorjs/table - npm version

⚠️ Note (for plugin configuration)

Usually in examples for Editor.js you will see tool names starts with lowercase, but for bypass potential conflicts i use uppercase.

Installation

pip install django-editorjs

Simple example

# models.py
from django.db import models
from django_editorjs import EditorJsField

class Post(models.Model):
    title = models.CharField(max_length=255)
    body = EditorJsField()

    def __str__(self):
        return self.title

How to configure

You can provide field specific configuration options to EditorJsField by argument editorjs_config.

Example

class Post(models.Model):
    title = models.TextField()
    body = EditorJsField(
        editorjs_config={
            "tools": {
                "Table": {
                    "disabled": False,
                    "inlineToolbar": True,
                    "config": {"rows": 2, "cols": 3,},
                }
            }
        }
    )

Config schema

  • tools
    • Image - (dict) configuration for tool ImageTool. (For more info see official documentation for tool).
    • Header - (dict) configuration for tool Header. (For more info see official documentation for tool).
    • Checklist - (dict) configuration for tool Checklist. (For more info see official documentation for tool).
    • List - (dict) configuration for tool List. (For more info see official documentation for tool).
    • Quote - (dict) configuration for tool Quote. (For more info see official documentation for tool).
    • Raw - (dict) configuration for tool RawTool. (For more info see official documentation for tool).
    • Embed - (dict) configuration for tool Embed. (For more info see official documentation for tool).
    • Delimiter - (dict) configuration for tool Delimiter. (For more info see official documentation for tool).
    • Warning - (dict) configuration for tool Warning. (For more info see official documentation for tool).
    • Link - (dict) configuration for tool LinkTool. (For more info see official documentation for tool).
    • Marker - (dict) configuration for tool Marker. (For more info see official documentation for tool).
    • 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).

API

  • EditorJsField

    Extends TextField and use EditorJsWidget as widget + have additional argument in constructor: editorjs_config.

  • EditorJsWidget

    Widget that you can to use for using Editor.js in Django.

TODO

  • load tool on demand
  • more examples in README.md
  • view-function for file uploading
  • view-function for image uploading
  • view-function for link info crawler

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.