Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pi-dal/django-vditor
A WYSIWYG editor plugin made by vditor for django
https://github.com/pi-dal/django-vditor
django django-application editor wysiwyg
Last synced: about 2 months ago
JSON representation
A WYSIWYG editor plugin made by vditor for django
- Host: GitHub
- URL: https://github.com/pi-dal/django-vditor
- Owner: pi-dal
- License: mit
- Archived: true
- Created: 2021-02-08T11:13:26.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-08-30T05:36:20.000Z (about 2 years ago)
- Last Synced: 2024-09-19T11:42:32.431Z (about 2 months ago)
- Topics: django, django-application, editor, wysiwyg
- Language: Python
- Homepage: https://django-vditor.pi-dal.com/
- Size: 4.95 MB
- Stars: 15
- Watchers: 1
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
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.
```bash
# 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:
```python
INSTALLED_APPS = [
...
'vditor',
]
```
- add frame settings for django3.0+ like this：
```python
X_FRAME_OPTIONS = 'SAMEORIGIN'
```
- Add 'media' url to your settings like this:
```python
MEDIA_ROOT = os.path.join(BASE_DIR, 'uploads')
MEDIA_URL = '/media/'
```
- Add url to your urls like this:
```python
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:
```python
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:
## 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`.
```python
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:
```html
{% load static %}
{% csrf_token %}
{{ form.media }}
{{ form.as_p }}
```
### Edit fields in the Form using markdown
Use markdown to edit fields in the Form, use `VditorTextFormField` instead of` forms.CharField`, as follows:
```python
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:
```python
class VditorModleForm(forms.ModelForm):
class Meta:
model = ExampleModel
fields = '__all__'
```
### Use the markdown widget in admin
Use the markdown widget in admin like as :
```python
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)
```
### Customize the toolbar
Add the following configuration to `settings`:
```python
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](https://github.com/pylixm/django-mdeditor)