django-quill-editor @LeeHanYeong/django-quill-editor
quill-image-resize-module @kensnyder/quill-image-resize-module
This repo forked from LeeHanYeong/django-quill-editor, add quill-image-resize-module。
By modify the demo proj(playground),achieved django-quill-editor resize image.
[email protected]/image-resize.min.js was introduced in the modification by the way of cdn https://cdn.jsdelivr.net/npm/[email protected]/image-resize.min.js.
django-quill-editor/playground/templates/base.html line12 add
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- django-quill-editor Media -->
{% include 'django_quill/media.html' %}
<!-- Quill resize-image.js -->
<!-- image-resize.min.js must import after Quill.js. like this -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/image-resize.min.js"></script>
<!-- Custom CSS -->
<link rel="stylesheet" href="{% static 'bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'style.css' %}">
<title>django-quill-editor</title>
</head>django-quill-editor/playground/config/settings.py line101 add
# Quill config
QUILL_CONFIGS = {
"default": {
'theme': 'snow',
'modules': {
'syntax': True,
'toolbar': [
[
{'font': []},
{'header': []},
{'align': []},
'bold', 'italic', 'underline', 'strike', 'blockquote',
{'color': []},
{'background': []},
],
['code-block', 'link', 'image', 'video'],
['clean'],
],
'imageResize': { # open imageResize
'displaySize': True
}
}
}
}
django-quill-editor makes Quill.js easy to use on Django Forms and admin sites
- No configuration required for static files!
- The entire code for inserting WYSIWYG editor is less than 30 lines
- It can be used in both admin and Django views
The full document is in https://django-quill-editor.readthedocs.io/, including everything about how to use the Form or ModelForm, and where you can add custom settings.
Please refer to the QuickStart section below for simple usage.
-
Install
django-quill-editorto your Python environmentRequires Python 3.7 or higher and Django 3.1 or higher.
pip install django-quill-editor
-
Add
django_quilltoINSTALLED_APPSinsettings.py# settings.py INSTALLED_APPS = [ 'django.contrib.admin', ... 'django_quill', ]
Add QuillField to the Model class you want to use.
- App containing models.py must be added to INSTALLED_APPS
- After adding the app, you need to run makemigrations and migrate to create the DB table.
# models.py
from django.db import models
from django_quill.fields import QuillField
class QuillPost(models.Model):
content = QuillField()Just register the Model in admin.py of the app.
from django.contrib import admin
from .models import QuillPost
@admin.register(QuillPost)
class QuillPostAdmin(admin.ModelAdmin):
pass
As an open source project, we welcome contributions. The code lives on GitHub
poetry install # Install PyPI distribution packages
python deploy.pybrew install sphinx-doc # macOScd docs
make html
# ...
# The HTML pages are in _build/html.
cd _build/html
python -m http.server 3001