Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

django-vditor

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

django-vditor

A WYSIWYG editor plugin made by vditor for django

1.1.1
PyPI

Maintainers: 1

django-vditor

django-vditor is Markdown Editor plugin application for django base on vditor.
django-vditor was inspired by great django-mdeditor.

Features

Almost Vditor features
- Support three editing modes: what you see is what you get (wysiwyg), instant rendering (ir), split screen preview (sv)
- Support outline, mathematical formulas, brain maps, charts, flowcharts, Gantt charts, timing charts, staff, multimedia, voice reading, title anchors, code highlighting and copying, graphviz rendering
- Built-in security filtering, export, task list, multi-platform preview, multi-theme switching, copy to WeChat official account/Zhuhu function
- Implement CommonMark and GFM specifications, format Markdown and view syntax tree, and support 10+ configurations
- The toolbar contains 36+ operations. In addition to supporting extensions, you can customize the shortcut keys, prompts, prompt locations, icons, click events, class names, and sub-toolbars in each item.
- You can use drag and drop, clipboard to paste upload, display real-time upload progress, and support CORS cross-domain upload
- Pasted HTML is automatically converted to Markdown. If the pasted includes external link pictures, it can be uploaded to the server through the designated interface
- Support main window size drag and drop, character count
- Multi-theme support, built-in three sets of black and white themes
- Multi-language support, built-in Chinese, English, and Korean text localization
- Support mainstream browsers, friendly to mobile
The VditorTextField field is provided for the model and can be displayed directly in the django admin.
The VditorTextFormField is provided for the Form and ModelForm.
The VditorWidget is provided for the Admin custom widget.

Quick start

Installation.

    # pip
    pip install django-vditor
    # pipenv
    pipenv install django-vditor
    # poetry
    poetry add django-vditor
    # pdm
    pdm add django-vditor

Add vditor to your INSTALLED_APPS setting like this:

    INSTALLED_APPS = [
        ...
        'vditor',
    ]

add frame settings for django3.0+ like this：

X_FRAME_OPTIONS = 'SAMEORIGIN'

Add 'media' url to your settings like this:

MEDIA_ROOT = os.path.join(BASE_DIR, 'uploads')
MEDIA_URL = '/media/'

Add url to your urls like this:

from django.conf.urls import url, include
from django.conf.urls.static import static
from django.conf import settings
...

urlpatterns = [
    ...
    path('vditor/', include('vditor.urls'))
]

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Write your models like this:

from django.db import models
from vditor.fields import VditorTextField

class ExampleModel(models.Model):
    name = models.CharField(max_length=10)
    content = VditorTextField()

Register your model in admin.py
Run python manage.py makemigrations and python manage.py migrate to create your models.
Login Admin ,you can see a markdown editor text field like this:

django-vditor

Usage

Edit fields in the model using Markdown

Using Markdown to edit the fields in the model, we simply replace the TextField of the model with VditorTextField.

from django.db import models
from vditor.fields import VditorTextField

class ExampleModel(models.Model):
    name = models.CharField(max_length = 10)
    content = VditorTextField()

Admin in the background, will automatically display markdown edit rich text.

Used in front-end template, you can use like this:

{% load static %}
<! DOCTYPE html>
<html lang = "en">
    <head>
        <meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
    </head>
    <body>
        <form method = "post" action = "./">
            {% csrf_token %}
            {{ form.media }}
            <ul style="display: flex">
                {{ form.as_p }}
            </ul>
            <p> <input type = "submit" value = "post"> </p>
        </form>
    </body>
</html>

Edit fields in the Form using markdown

Use markdown to edit fields in the Form, use VditorTextFormField instead of forms.CharField, as follows:

from vditor.fields import VditorTextFormField

class VditorForm(forms.Form):
    name = forms.CharField()
    content = VditorTextFormField()

ModelForm can automatically convert the corresponding model field to the form field, which can be used normally:

class VditorModleForm(forms.ModelForm):

    class Meta:
        model = ExampleModel
        fields = '__all__'

Use the markdown widget in admin like as :

from django.contrib import admin
from django.db import models

# Register your models here.
from. import models as demo_models
from vditor.widgets import VditorWidget


class ExampleModelAdmin(admin.ModelAdmin):
    formfield_overrides = {
        models.TextField: {'widget': VditorWidget}
    }


admin.site.register(demo_models.ExampleModel, ExampleModelAdmin)

Add the following configuration to settings:

VDITOR_CONFIGS = { # remember to write "' '"
  'default':{
      "width": "%90", # use numbers or percentages
      "height": 360, # use numbers
      "preview_theme": "light", # can fill in dark, light, wechat
      "typewriterMode": "True", # whether to enable typewriter mode
      "mode": "ir", # optional modes: sv, ir, wysiwyg
      "debugger": "false", # whether to show log
      "value": "", # editor initialization value
      "theme": "classic", # can fill in classic, dark
      "icon": "ant", # canfill in ant, material
      "outline": "false", # show outline
  }
}

Reference

django-mdeditor

Keywords

FAQs

What is django-vditor?

Is django-vditor well maintained?

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install