LeeHanYeong · maxwilkinsontech · Jul 14, 2020 · Aug 4, 2020 · Aug 4, 2020 · Aug 4, 2020
diff --git a/.coveragerc b/.coveragerc
@@ -1,3 +1,12 @@
 [run]
-source = django_quill
-omit = */test*
+source =
+    django_quill
+    playground
+omit =
+    */test*
+    */migrations/*
+    */__init__.py
+    playground/config/asgi.py
+    playground/config/wsgi.py
+    playground/posts/apps.py
+    playground/manage.py
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # django-quill-editor
 
-[![PyPI version](https://badge.fury.io/py/django-quill-editor.svg)](https://badge.fury.io/py/django-quill-editor) [![Documentation Status](https://readthedocs.org/projects/django-quill-editor/badge/?version=latest)](https://django-quill-editor.readthedocs.io/en/latest/?badge=latest)
+![PyPI](https://img.shields.io/pypi/v/django-quill-editor)
 
 **django-quill-editor** makes [Quill.js](https://quilljs.com/) easy to use on Django Forms and admin sites
 
@@ -10,10 +10,24 @@
 
 ![django-quill-editor](https://raw.githubusercontent.com/LeeHanYeong/django-quill-editor/master/_assets/django-quill-editor-sample.png)
 
-## Setup
+
+
+## Documentation
+
+The full document is in [https://django-quill-editor.readthedocs.io/](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.
+
+
+
+## QuickStart
+
+### Setup
 
 - Install `django-quill-editor` to your Python environment
 
+  > Requires Python 3.7 or higher and Django 3.1 or higher.
+
   ```shell
   pip install django-quill-editor
   ```
@@ -29,65 +43,12 @@
   ]
   ```
 
+### Making Model
 
+Add `QuillField` to the **Model class** you want to use.
 
-## Run Sample project
-
-Repo: [django-quill-editor-sample](https://github.com/LeeHanYeong/django-quill-editor-sample)
-
-```shell
-# Clone repo
-git clone https://github.com/LeeHanYeong/django-quill-editor-sample
-cd django-quill-editor-sample
-
-# Create virtualenv (I used pyenv, but you can use other methods)
-pyenv virtualenv 3.7.5 django-quill
-pyenv local django-quill
-
-# Install Python packages
-pip install -r requirements.txt
-python app/manage.py runserver
-```
-
-
-
-## Documentation
-
-Documentation for **django-quill-editor** is located at [https://django-quill-editor.readthedocs.io/](https://django-quill-editor.readthedocs.io/)
-
-
-## Change toolbar menus`
-
-Add `QUILL_CONFIGS` to the **settings.py**
-
-```
-QUILL_CONFIGS = {
-    'default':{
-        'theme': 'snow',
-        'modules': {
-            'syntax': True,
-            'toolbar': [
-                [
-                    {'font': []},
-                    {'header': []},
-                    {'align': []},
-                    'bold', 'italic', 'underline', 'strike', 'blockquote',
-                    {'color': []},
-                    {'background': []},
-                ],
-                ['code-block', 'link'],
-                ['clean'],
-            ]
-        }
-    }
-
-}
-
-```
-
-## Usage
-
-Add `QuillField` to the **Model class** you want to use
+> 1. App containing models.py must be added to INSTALLED_APPS
+> 2. After adding the app, you need to run makemigrations and migrate to create the DB table.
 
 ```python
 # models.py
@@ -98,9 +59,7 @@ class QuillPost(models.Model):
     content = QuillField()
 ```
 
-
-
-### 1. Django admin
+### Using in admin
 
 Just register the Model in **admin.py** of the app.
 
@@ -117,99 +76,40 @@ class QuillPostAdmin(admin.ModelAdmin):
 
 
 
-### 2. Form
-
-- Add `QuillFormField` to the **Form class** you want to use
-
-- There are two ways to add CSS and JS files to a template.
-
-  - If there is a **Form** with QuillField added, add `{{ form.media }}` to the `<head>` tag.  
-
-    ```django
-    <head>
-        {{ form.media }}
-    </head>
-    ```
-
-  - Or, import CSS and JS files directly using `{% include %}` template tags.
-
-    ```django
-    <head>
-        <!-- django-quill-editor Media -->
-        {% include 'django_quill/media.html' %}
-    </head>
-    ```
+## Contributing
 
-
+As an open source project, we welcome contributions.
+The code lives on [GitHub](https://github.com/LeeHanYeong/django-quill-editor)
 
-```python
-# forms.py
-from django import forms
-from django_quill.forms import QuillFormField
 
-class QuillFieldForm(forms.Form):
-    content = QuillFormField()
-```
 
-```python
-# views.py
-from django.shortcuts import render
-from .forms import QuillFieldForm
+## Distribution (for owners)
 
-def form(request):
-    return render(request, 'form.html', {'form': QuillFieldForm()})
-```
+### PyPI Release
 
-```django
-<!-- Template -->
-<form action="" method="POST">{% csrf_token %}
-    {{ form.content }}
-</form>
+```shell
+poetry install  # Install PyPI distribution packages
+python deploy.py
 ```
 
 
 
-### 3. ModelForm
+### Sphinx docs
 
-Just define and use **ModelForm** of Model class
-
-```python
-# forms.py
-from django import forms
-from .models import QuillPost
-
-class QuillPostForm(forms.ModelForm):
-    class Meta:
-        model = QuillPost
-        fields = (
-            'content',
-        )
+```shell
+brew install sphinx-doc  # macOS
 ```
 
-```python
-# views.py
-from django.shortcuts import render
-from .forms import QuillPostForm
+#### Local
 
-def model_form(request):
-    return render(request, 'model_form.html', {'form': QuillPostForm()})
 ```
+cd docs
+make html
+# ...
+# The HTML pages are in _build/html.
 
-```django
-<!-- Template -->
-<form action="" method="POST">{% csrf_token %}
-    {{ form.content }}
-</form>
+cd _build/html
+python -m http.server 3001
 ```
 
-**Form, ModelForm's Output:**
-
-![form-sample](https://raw.githubusercontent.com/LeeHanYeong/django-quill-editor/master/_assets/form-sample.png)
-
-
-
-## Contributing
-
-As an open source project, we welcome contributions.
-The code lives on [GitHub](https://github.com/LeeHanYeong/django-quill-editor)
-
+
diff --git a/django_quill/fields.py b/django_quill/fields.py
@@ -14,7 +14,7 @@ class FieldQuill:
     def __init__(self, instance, field, json_string):
         self.instance = instance
         self.field = field
-        self.json_string = json_string
+        self.json_string = json_string or '{"delta":"","html":""}'
         self._committed = True
 
     def __eq__(self, other):
@@ -111,12 +111,6 @@ def __init__(self, *args, **kwargs):
     def _get_form_class():
         return QuillFormField
 
-    def pre_save(self, model_instance, add):
-        quill = super().pre_save(model_instance, add)
-        if quill and not quill._committed:
-            quill.save(quill.json_string, save=False)
-        return quill
-
     def from_db_value(self, value, expression, connection):
         return self.to_python(value)
 
@@ -142,3 +136,7 @@ def get_prep_value(self, value):
         if isinstance(value, Quill):
             return value.json_string
         return value
+
+    def value_to_string(self, obj):
+        value = self.value_from_object(obj)
+        return self.get_prep_value(value)
diff --git a/django_quill/quill.py b/django_quill/quill.py
@@ -1,5 +1,4 @@
 import json
-from json import JSONDecodeError
 
 __all__ = (
     'QuillParseError',
@@ -21,6 +20,6 @@ def __init__(self, json_string):
             self.json_string = json_string
             json_data = json.loads(json_string)
             self.delta = json_data['delta']
-            self.html = json_data['html']
-        except (JSONDecodeError, KeyError, TypeError):
+            self.html = json_data.get('html', '')
+        except (json.JSONDecodeError, KeyError, TypeError):
             raise QuillParseError(json_string)
diff --git a/django_quill/templates/django_quill/media.html b/django_quill/templates/django_quill/media.html
@@ -5,8 +5,8 @@
 <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/highlight.min.js"></script>
 
 <!-- Quill.js -->
-<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
-<script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>
+<link href="//cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet">
+<script src="//cdn.quilljs.com/1.3.7/quill.min.js"></script>
 
 <!-- Custom -->
 <link rel="stylesheet" href="{% static 'django_quill/django_quill.css' %}">

diff --git a/django_quill/templates/django_quill/widget.html b/django_quill/templates/django_quill/widget.html
@@ -6,10 +6,19 @@
         (function () {
             var wrapper = new QuillWrapper('quill-{{ id }}', 'quill-input-{{ id }}', JSON.parse('{{ config|safe }}'));
             {% if quill and quill.delta %}
+                // try django_quill/quill.py/Quill instance
                 var contents = JSON.parse('{{ quill.delta|safe|escapejs }}');
                 wrapper.quill.setContents(contents);
             {% elif value %}
-                wrapper.quill.clipboard.dangerouslyPasteHTML(0, '{{ value|safe }}')
+                // try Parsing value as JSON
+                try {
+                    var value = JSON.parse('{{ value|safe|escapejs }}');
+                    wrapper.quill.setContents(JSON.parse(value['delta']));
+                }
+                // When a parsing error occurs, the contents are regarded as HTML and the contents of the editor are filled.
+                catch (e) {
+                    wrapper.quill.clipboard.dangerouslyPasteHTML(0, '{{ value|escape|safe }}')
+                }
             {% endif %}
         })();
     </script>

diff --git a/django_quill/widgets.py b/django_quill/widgets.py
@@ -31,15 +31,15 @@ def default(self, obj):
 class QuillWidget(forms.Textarea):
     class Media:
         js = (
-            'django_quill/highlight.pack.js',
+            'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/highlight.min.js',
             'django_quill/django_quill.js',
-            'django_quill/quill.js',
+            'https://cdn.quilljs.com/1.3.7/quill.min.js',
         )
         css = {
             'all': (
-                'django_quill/highlight.darcula.min.css',
+                'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/styles/darcula.min.css',
                 'django_quill/django_quill.css',
-                'django_quill/quill.snow.css',
+                'https://cdn.quilljs.com/1.3.7/quill.snow.css',
             )
         }
 

diff --git a/docs/index.rst b/docs/index.rst
@@ -18,6 +18,7 @@ django-quill-editor makes `Quill.js` easy to use on Django Forms and admin sites
    pages/using-in-admin
    pages/using-as-form
    pages/using-as-modelform
+   pages/change-toolbar-configs
 
 Installation
 ************

diff --git a/docs/pages/change-toolbar-configs.md b/docs/pages/change-toolbar-configs.md
@@ -0,0 +1,30 @@
+# Change toolbar config
+
+> More settings can be found on the official site  
+> https://quilljs.com/docs/modules/toolbar/
+
+Add `QUILL_CONFIGS` to the **settings.py**
+
+```python
+QUILL_CONFIGS = {
+    'default':{
+        'theme': 'snow',
+        'modules': {
+            'syntax': True,
+            'toolbar': [
+                [
+                    {'font': []},
+                    {'header': []},
+                    {'align': []},
+                    'bold', 'italic', 'underline', 'strike', 'blockquote',
+                    {'color': []},
+                    {'background': []},
+                ],
+                ['code-block', 'link'],
+                ['clean'],
+            ]
+        }
+    }
+}
+```
+