Included Magic URL library for automatic link conversion.

README.md

@@ -56,11 +56,12 @@ python app/manage.py runserver
 Documentation for **django-quill-editor** is located at [https://django-quill-editor.readthedocs.io/](https://django-quill-editor.readthedocs.io/)
 
 
-## Change toolbar menus`
+
+## Change toolbar configs
 
 Add `QUILL_CONFIGS` to the **settings.py**
 
-```
+```python
 QUILL_CONFIGS = {
  'default':{
  'theme': 'snow',
@@ -80,11 +81,11 @@ QUILL_CONFIGS = {
  ]
  }
  }
-
 }
-
 ```
 
+
+
 ## Usage
 
 Add `QuillField` to the **Model class** you want to use
@@ -213,3 +214,34 @@ def model_form(request):
 As an open source project, we welcome contributions.
 The code lives on [GitHub](https://github.com/LeeHanYeong/django-quill-editor)
 
+
+
+## Distribution (for owners)
+
+### PyPI Release
+
+```shell
+poetry install # Install PyPI distribution packages
+python deploy.py
+```
+
+
+
+### Sphinx docs
+
+```shell
+brew install sphinx-doc # macOS
+```
+
+#### Local
+
+```
+cd docs
+make html
+# ...
+# The HTML pages are in _build/html.
+
+cd _build/html
+python -m http.server 3001
+```
+

django_quill/config.py

@@ -2,6 +2,7 @@
  'theme': 'snow',
  'modules': {
  'syntax': True,
+ 'magicUrl': True,
  'toolbar': [
  [
  {'font': []},

django_quill/fields.py

@@ -1,3 +1,5 @@
+import json
+
 from django.db import models
 
 from .forms import QuillFormField
@@ -14,7 +16,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):
@@ -31,7 +33,7 @@ def _require_quill(self):
 
  def _get_quill(self):
  self._require_quill()
- self._quill = Quill(self.json_string)
+ self._quill = Quill(json.loads(self.json_string))
  return self._quill
 
  def _set_quill(self, quill):
@@ -142,3 +144,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)

django_quill/forms.py

@@ -6,9 +6,12 @@
 )
 
 
-class QuillFormField(forms.fields.CharField):
+class QuillFormField(forms.fields.JSONField):
  def __init__(self, *args, **kwargs):
  kwargs.update({
  'widget': QuillWidget(),
  })
  super().__init__(*args, **kwargs)
+
+ def prepare_value(self, value):
+ return value.json_string

django_quill/quill.py

@@ -1,5 +1,4 @@
 import json
-from json import JSONDecodeError
 
 __all__ = (
  'QuillParseError',
@@ -18,9 +17,9 @@ def __str__(self):
 class Quill:
  def __init__(self, json_string):
  try:
- self.json_string = json_string
- json_data = json.loads(json_string)
+ self.json_string = json.dumps(json_string)
+ json_data = json_string
  self.delta = json_data['delta']
  self.html = json_data['html']
- except (JSONDecodeError, KeyError, TypeError):
+ except (json.JSONDecodeError, KeyError, TypeError):
  raise QuillParseError(json_string)

django_quill/templates/django_quill/media.html

@@ -5,8 +5,11 @@
 <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>
+
+<!-- Quill Magic Url -->
+<script src="https://unpkg.com/[email protected]/dist/index.js"></script>
 
 <!-- Custom -->
 <link rel="stylesheet" href="{% static 'django_quill/django_quill.css' %}">

django_quill/templates/django_quill/widget.html

@@ -4,13 +4,23 @@
  <input id="quill-input-{{ id }}" name="{{ name }}" type="hidden">
  <script>
  (function () {
+ Quill.register('modules/magicUrl', MagicUrl);
  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|safe }}')
+ }
  {% endif %}
  })();
  </script>
-</div>
+</div>

django_quill/widgets.py

@@ -31,15 +31,16 @@ 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',
+ 'https://unpkg.com/[email protected]/dist/index.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',
  )
  }
 

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
 ************

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'],
+ ]
+ }
+ }
+}
+```
+

docs/pages/using-as-form.md

@@ -1,5 +1,28 @@
 # Using as Form
 
+Add the CSS and JS to the `<head>` of the template or base template. 
+
+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>
+ ```
+
+
+
 Add `QuillFormField` to the **Form class** you want to use.
 
 ```python
@@ -25,7 +48,6 @@ def form_view(request):
 ```
 
 
-
 In the template, use the received **Form instance** variable. (in the above case, **'form'**) 
 
 ```html