leehanyeong / django-quill-editor

django-quill-editor makes Quill.js easy to use on Django Forms and admin sites

django-quill-editor

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

Live Demo

https://quill.lhy.kr/

• Form | https://quill.lhy.kr/posts/create/normal/
• ModelForm | https://quill.lhy.kr/posts/create/
• Form (Initial HTML) | https://quill.lhy.kr/posts/create/normal/html/
• Form (Initial Text) | https://quill.lhy.kr/posts/create/normal/text/
• Admin | https://quill.lhy.kr/admin/login/

Documentation

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.

QuickStart

Setup

• Install django-quill-editor to your Python environment

  Requires Python 3.7 or higher and Django 3.1 or higher.

  pip install django-quill-editor

• Add django_quill to INSTALLED_APPS in settings.py

  # settings.py
  INSTALLED_APPS = [
      'django.contrib.admin',
      ...
      'django_quill',
  ]

Making Model

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.

# models.py
from django.db import models
from django_quill.fields import QuillField

class QuillPost(models.Model):
    content = QuillField()

Using in admin

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

Running the Live Demo project in local

The live demo is a deployment of the "playground" package, which is a django application within this library.
After cloning or downloading the repository, you can try running the live demo locally.

A Python virtual environment is required to run the project.

# [Optional] We recommend that you start after creating a folder for your project.
mkdir ~/projects
cd projects

# Clone repository
git clone [email protected]:LeeHanYeong/django-quill-editor.git

# Go to the project directory and apply the virtual environment
cd django-quill-editor
# [apply venv]

# Go to the playground package
cd playground

# Install requirements
pip install -r requirements.txt

# Run migrate and runserver
python manage.py migrate
python manage.py runserver

After the above operation, the live demo site works at localhost:8000.

Contributing

As an open source project, we welcome contributions. The code lives on GitHub

Distribution tips (for owners)

Installation

# black
brew install black

# pre-commit
brew install pre-commit
pre-commit install

PyPI Release

poetry install  # Install PyPI distribution packages
python deploy.py

Sphinx docs

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

docker-compose up

# local
docker-compose --env-file .deploy/.env.local up --build --force-recreate --remove-orphans
# production
docker-compose --env-file .deploy/.env.production up --build --force-recreate --remove-orphans

django-quill-editor's Issues

'str' object has no attribute '_committed'

Hi, I am getting below error while using a quill editor with Django.

if quill and not quill._committed:
'str' object has no attribute '_committed'

Is there any specific Django version to use or is there any other hack?

I am using
Django==2.1.7
python 3.7.5
django-quill-editor==0.1.12

How do I adjust height and width?

How do I adjust height and width?

Import CSS and JS automatically

way to create quill field manually

hi since i want to test my code however, it seems i cannot just directly give strings to it when i create object with that field.

self.post_001 = Post.objects.create(
            title="Hello world",
            content="hello world from site",
            category=self.category_programming,
            author=self.user_trump
        )

this is code that i wrote. content is the thing that i implemented with quill field and requires json strings i believe.

Select config on QuillField

I couldn't find a way to specify the config_name directly on the field. I figure I can do it through specifying a custom form, though I didn't try it because I don't have enough time at this very moment. I think it would be great to be able to pass a config_name directly on QuillField.

Thank you!!

Quill Image Resize not working in QuillForm QUILL_CONFIGS

Hey, so I need to be able to adjust the size of images in the quill editor. I can successfully achieve this by having the following code in a script tag in my HTML and then calling it...

`<script>
var quill = new Quill('#editor', {
modules: {
imageResize: {
},
toolbar: [
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
['bold', 'italic', 'underline', 'strike'],
[{ 'color': [] }, { 'background': [] }],
[{ 'align': [] }],
['image'],

   ]
}

});
</script>`

However, I'm using the QuillForm and QuillFieldForm so I can save them to a database which means in order to customize my toolbar I need to write the following code in my settings.py under the title QUILL_CONFIGS...

QUILL_CONFIGS = { 'default': { 'theme': 'snow', 'modules': { 'syntax': True, 'imageResize': { }, 'toolbar': [ [ {'font': []}, {'header': []}, {'align': []}, 'bold', 'italic', 'underline', 'strike', 'blockquote', {'color': []}, {'background': []}, ], ['code-block', 'link'], ['clean'], ['link', 'image'], ], } } }

The problem is that the resizing no longer works in the QUILL_CONFIGS.

I need help seeing if there is a way I can still use QuillForm and QuillFieldForm AND have the ability to resize images. Is this even the best way? Any help is much apreciated.

import django_quill.forms could not resolve

I added django_quill to my system.py but when i importing in my form it say's "import django_quill.forms could not resolve"

Doesn't work after last update

Hey, after last update, I can't add new data in admin panel. In some cases, I can't see the quill field, and in another cases, text from form doesn't save and assert alert.

I tried to downgrade to 0.1.22 and always have been okay.

AttributeError 'NoneType' object has no attribute 'json_string'

Initialized a new project this evening and installed django-quill-editor as per usual. When I open the associated CreateView template, I get...

Funny thing is, the quill editor loads correctly in the UpdateView template. The following text is strangely already in the editor...

I've double and triple checked that the model, view, and template are set-up correctly.

EDIT

Realized it might help to add that I am also using django-crispy-forms.

How can I override default settings?

I would like to avoid my user to upload Images while using editor.
How can I override these settings in config.py?

TemplateDoesNotExist exception on a new project

Hi, I tried to install django-quill-editor via pip in a new project but I keep seeing this in admin when I try to add a new QuillPost

I get QuillParseError while migrating from models.TextField

Hey. I recently switched to this module, but it gives me QuillParseError because my texts are not within HTML tags. I don't think it should raise an exception in this situation but instead parse it as plain text. Could you implement such thing?
Thanks in advance.

Coverage process and badge

Migrating HTML

When I change an existing field type to QuillField it fails because it is expecting its value to be in the delta/html format {"delta": "...", "html": "..."}, but my current data is just raw HTML. Does anyone have any tips on how to migrate this data?

Changed to save files in storage instead of DB using FileField instead of CharField

Quill.js has a default setting to save the image as a base64 encoded string.
Storing the image-encoded string in the DB is not a good approach, so only the text of the Quill object should be stored in TextField or CharField, and the base64 encoded string should be stored in a separate FileField.

Eror 404 when trying to download static files in admin interface

I've followed the documentation to set-up the QuillField and display it in the admin interface. The problem is that some static files aren't downloaded because they have been remove from the static folder but still called in widget.py (class Media):

class QuillWidget(forms.Textarea):
    class Media:
        js = (
            'django_quill/highlight.pack.js',
            'django_quill/django_quill.js',
            'django_quill/quill.js',
        )
        css = {
            'all': (
                'django_quill/highlight.darcula.min.css',
                'django_quill/django_quill.css',
                'django_quill/quill.snow.css',
            )
        }

Here is what I see in my command line :

[11/Aug/2020 20:18:52] "GET /admin/blog/post/add/ HTTP/1.1" 200 7687
[11/Aug/2020 20:18:52] "GET /admin/jsi18n/ HTTP/1.1" 200 7403
[11/Aug/2020 20:18:52] "GET /static/django_quill/highlight.darcula.min.css HTTP/1.1" 404 1841
[11/Aug/2020 20:18:52] "GET /static/django_quill/highlight.pack.js HTTP/1.1" 404 1817
[11/Aug/2020 20:18:52] "GET /static/django_quill/quill.js HTTP/1.1" 404 1790
[11/Aug/2020 20:18:52] "GET /static/django_quill/quill.snow.css HTTP/1.1" 404 1808
[11/Aug/2020 20:18:52] "GET /static/django_quill/django_quill.js HTTP/1.1" 304 0
[11/Aug/2020 20:18:52] "GET /static/django_quill/django_quill.css HTTP/1.1" 304 0
[11/Aug/2020 20:18:52] "GET /static/django_quill/highlight.darcula.min.css HTTP/1.1" 404 1841
[11/Aug/2020 20:18:52] "GET /static/django_quill/highlight.pack.js HTTP/1.1" 404 1817
[11/Aug/2020 20:18:52] "GET /static/django_quill/quill.js HTTP/1.1" 404 1790

QuillField not showing in django admin

I know this has been asked before #51, but the owner closed the issue without providing any feedback.

Quill editor v0.1.40 works fine on my local computer, but when in production, QuillFileds are invisible on admin panel – only labels appear:

When inspecting the admin page on Chrome, I see such errors on the console:

GET https://mysite.com/static/django_quill/django_quill.css net::ERR_ABORTED 404 (Not Found)

GET https://mysite.com/static/django_quill/django_quill.js net::ERR_ABORTED 404 (Not Found)

Uncaught ReferenceError: QuillWrapper is not defined
    at (index):261:27
    at (index):263:11

django_quill.css and django_quill.js fail to load. I can't figure out why it works on my local project which has the same setup, except that on local I use python 3.9/Django 4.0.1 while in production, it's v3.8/4.0.2.

Another difference is that, in production, django_quill folder is under myenv/lib/python3.8/site-packages/ directory.

On my computer, there is no django_quill folder under myenv/lib/python3.9/site-packages/. In fact, there is no such folder anywhere on my drive, nor the related django_quill.css or django_quill.js files.

I have no problem while migrating from old TextField's, or viewing the content on the templates.

Any suggestion or feedback will be welcomed and greatly appreciated.

Thank you.

Static Files VS CDN

Hello!

First of all, thanks for your django plugin, nice work! 👍

So, now is my question, I'm trying to optimise files/request for my django app (minifying, tracking unused static code etc...) and I noticed your plugin is using CDNs for darcula, highlight & quill but not for django_quill (which is under "Custom").

Since the minified files are in the plugin's folder, why would you use CDN? Any reason for this?

Thanks for reading, keep up the good work :)

Should support inital value

Have you considered adding an initial value placeholder?

With what you have now, I doubt it will work with editing pages where there's suppose to be some initial value that is to be displayed on the editor.

The display of the form does not actually match the display in the documentation.

The display of the form does not actually match the display in the documentation. Is that how it should be?
I have:

• Python 3.9.1
• Django 3.1.4

Docs didn't say to include the tag in the form.

I was looking at the docs but I thing it's missed to be told that {% include 'django_quill/media.html' %} is to be included. I wasted lot of time on this.

Raises QuillParseError(json_string) when using api for model with quill

The editor raises a QuillParseError, when posting from an api.
Understandable as api is sending a string not a quill json object.

What will be the way to implement this on django site to convert string to quill json object.

Writing test code

Django admin validation error causes content damage

If validation error occurs after filling quills and submitting in admin panel, then happens what can be seen below:

QuillField parse error if null

If QuillField is not populated, it causes JSONParse error. It can be field by overriding FieldQuill.__init__ with:

def __init__(self, instance, field, json_string):
    json_string = json_string or '{"delta":"","html":""}'
    super().__init__(instance, field, json_string)

After that, QuillField blank and null arguments can be set to True.

Mention Django version support in README & Docs

Hi!
Thank you for your effort for managing this package. I came across this yesterday and I found django-quill0editor is not working in Django 3.2 (to be specific, in template files, {{ obj.content.html|safe }} doesn't work, it throws some parsing error.) and I didn't even notice that support for Django 3.2 is not mentioned anywhere.

Is it possible to upgrade the package or at-least mention django supported version in the readme & docs?
Thanks.

Field not saved on Inlines

It seems like the editor works on inlines, but the value doesn't get saved the first time I try. When trying to save, the page reloads displaying required field errors (my QuillFields are required in this case), and the content is lost. If I fill in the fields once more, and save again it does get saved properly.

Thank you!!

How do you suppose displaying the content on an html template

The editor works well, but displaying Quill content is kinda....
for and instance object.content will display something of this sort:
<django_quill.fields.FieldQuill object at 0x7ff51c405190>
What are the suggestions here?

Parse HTML to Delta

How can I convert an HTML string to delta?

I'm using Quill together with Django Import-Export. The CSV input file contains an HTML string, that I want to save as my QuillField attribute of a model.

I'm using a custom function to get te Quill object, but I'm missing how to get the delta without having to implement the whole parser by myself.

def get_quill_field(string):
    delta = parse_html_to_delta(string) # HOW TO DO THIS?
    return Quill(
        '{"delta":"' + delta + '","html":"' + string + '"}')

How to import custom css style for the html's file of quill?

i wanna reject custom css file for the render quill html content.
How to do fix it ? thx

When using textfield, adjust image's maximum size and quality

Unpacking the form fields?

Instead of using

<form action="" method="POST">{% csrf_token %}
    {{ form.content }}
</form>

What's the recommended method of creating custom inputs? Example below.

<form action="" method="POST">
    {% csrf_token %}
   <input type="text" name="{% form.title %}">
</form>

Not Showing Quill In Templates

I followed the steps provided, but nothing showed up on my template HTML. Wondering what was wrong?

QuillParseError: Failed to parse value(random string). Django Admin

Hello,

I am trying to integrate the QuillField() into the Django admin. However, when I change the model from textField to QuillField(), I get a QuillParseError whenever I try to edit existing objects in the Django admin.

How would you resolve this error?

Not working for Django 4.0

I've just tested it and it's not working for Django 4.0

Embedded Images should be stored separately as files not ony embedded in the DB

Is this something that is planned to support?

Is there a way to integrate word counter?

Hi,
I was reading this post about building custom modules with QuillJS and I was wondering about how I would integrate a word counter in django-quill-editor.

Thank you!

QuillField not showing in django admin

I'm working with Django 3.1.8
models.py

class UUIDModel(models.Model):
    class Meta:
        abstract = True

    id = UUIDPrimaryKeyField()
    
class Setup(UUIDModel):
    name = models.CharField(max_length = 255, verbose_name = "Nome")
    content = QuillField()

admin.py

@admin.register(Setup)
class SetupAdmin(admin.ModelAdmin):
    pass

I made the migrations , migrate, all the proccess.
The label content appear in the admin but has no field to write....

POSTing form data breaks html inline styles

POSTing Quill form data to DRF APIView breaks the html by adding \ characters such that the html does not work.

For example:

<p><span class=\"ql-font-monospace\">Seeing if this helps.</span></p>

This can be seen in the console as well:

Quill Editor is not working when using VueJS

It shows the editor but the value didn't get or change when submitting. Here is the error that shown by the VueJS on console

Develop a CI pipeline for this project

Hello @LeeHanYeong. I was looking at your library and I trully liked it! Wouldn't be nice if you have a CI pipeline to it? If you want, I can develop one using the free "github actions", so we would be able to test and validate PRs with more ease. Thoughts?

Thank you for this awesome library!

[feature] make QuillField inherit JSONField

since QuillField stores text in the database directly as json-encoded text, it would be better to store it as a JSONField. every major db backend supports the JSONField, so switching will not only be more idiomatic, but will also inform the db backend to apply any optimizations to speed up queries

i think the change would be pretty simple after several hours of trying, i have realized it is absolutely not simple. i thought i could implement this on my own, but that is clearly not the case haha

arguements in Quillfield

Can you please help me adding arguments such as min_length, max_length, required extra in QuillField.

Newly genereted QuillField forms are saved as blank.

It can be reproduced like that:

class A(models.Model):
    bs = models.ManyToMany('B')

class B(models.Model):
   quill = QuillField()

After that in A admin page newly generated quill editors added to DOM doesn't have all events attached that are required to populate input value attribute underneath. It is probably caused because some addEventListener's are set in a wrong way, so new DOM elements are not listening for these events. It is hard for me to fix that, so if anyone know how to deal with it, please add PR or respond in this issue please.

Dumpdata causes bad fixture format

Fixture created by python manage.py dumpdata causes error, because QuillField is badly serialized. It can be solved by adding:

def value_to_string(self, obj):
    value = self.value_from_object(obj)
    return self.get_prep_value(value)

to QuillField.

CI using GitHub Action

How to manually create objects in the code

Sorry, my English is not very good,
But I really like this package and actually used it in the project.

I defined a model.

class News(SoftDeletableModel):
    title = models.CharField(max_length=255, null=False)
    content = QuillField(null=True)
    news_category = models.ForeignKey(NewsCategory, on_delete=models.PROTECT, null=False)
    status = models.BooleanField(null=False, default=False)
    order = models.PositiveSmallIntegerField(null=False, default=0)
    display_date = models.DateField(null=False, default=timezone.now)
    create_datetime = models.DateTimeField(auto_now_add=True)
    modify_datetime = models.DateTimeField(auto_now=True)

    class Meta:
        verbose_name = 'news'
        verbose_name_plural = 'news'
        db_table = 'news'

    def __str__(self):
        return self.title

I want to create it manually in the code, like this.

News.objects.create(title='title', content='content', display_date=timezone.now().date())

The result of the operation shows an error,
How can I set the correct value in content?

Thank you.

Django-quill serializer

I am using django-quill-editor on the admin panel to populate a content field that I have as a TextField before, which was serialized by default, but QuillField would not be serialized, so I was wondering I was trying to create a serializer for it, but honestly don't know where to start from, any suggestions please?

uncaught (in promise) typeerror: cannot read properties of undefined (reading 'includes')

django-quill-editor version 0.1.33
django version 3.2.8
python 3.7

this error happens when I try to insert a image.
it fixs when I go back to 0.1.10

Make Quill field do YAML syntax highlighting