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

[ericel]

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.

[LeeHanYeong]

What is the API sending?
Please tell me the data you are sending.
django-quill-editor internally edits and sends the data of Quill.js. You can check this in django_quill/static/django_quill/django_quill.js

var data = {delta: delta, html: html};

The data object of Quill.js, Delta, and the expression html code are combined and transmitted.

---

How to send the contents of Quill.js to the API in a separate front end is not yet considered. Are you using DRF?

[ericel]

Yes I am using DRF.
I am trying to send data using Postman.
it sends a string.

QuillParseError at /api/blog/create
Failed to parse value(test job description)

[LeeHanYeong]

I haven't tested it yet, but if you use a form made with django-quill-editor, there is a way to do it.
If the field name is content, there is a hidden type input called quill-input-id_content.
When the value of the corresponding input is sent to the API, the same data as when using the submit function of the form is transmitted.

You can check this in the browser developer mode.

[ericel]

I am not using any WYSIWYG with the api. Just normal text input field. This means the data submitted will just be a normal string value.

However, quillfield in app model, is expecting a json string.
content = QuillField()
I can't really think of any better way to implement it at the moment.

I will think, the best way to go is not to force every input to be a json_string?.

Or how about, if exception(QuillParseError(json_string)) is caught, convert the content to Quill Json_string format?
var data = {delta: delta, html: html};

This class is where I think it should be worked on to handle the different cases..

class Quill:
    def __init__(self, json_string):
        try:
            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):
            raise QuillParseError(json_string)

[faaizajaz]

Any solution to this? I am trying to create an object with a Quill field on POST to a DRF endpoint.

POST data is in Quill's weird format which cannot be parsed in Django APIView. But if I try to create a Quill object in my APIView, I get the QuillParseError.

There should be a way to populate a QuillField using a string. It is not clear to me if even the base QuillJS library provides a way to post JSON?

[gokselcoban]

@ericel @faaizajaz @LeeHanYeong
You can use this kind of helper function for plain text inputs.

def get_quill(value):
    quill = Quill({
        'html': '<p>%s</p>' % value,
        'delta': {
            "ops": [
                {"insert": "%s\\n" % value}
            ]
        }
    })
    return quill

obj.quill_field = get_quill("hello")
obj.save()

[Mahmoud-Barry]

if you have "django_quill.quill.QuillParseError:" error you can try this :

    def get_quill(value):
        json_data = {
            "html": value,
            "delta": {
                "ops": [
                    {"insert": f"{value}\n"}
                ]
            }
        }
        json_string = json.dumps(json_data)  # Serialize dictionary to a JSON string
        quill = Quill(json_string)
        return quill

[Nayan-Bebale]

Resolving Django QuillParseError with Proper JSON Formatting.

Facing an ongoing issue for the past four hours, I encountered a QuillParseError while attempting to save data from a Quill editor in a Django application. The error message indicated a failure in parsing the JSON data sent from the client-side to the server.

document.getElementById('entry-form').onsubmit = function() { var htmlContent = quill.root.innerHTML; var jsonData = { "delta": "", // You might need to fill this with appropriate data if required "html": htmlContent }; document.getElementById('content-input').value = JSON.stringify(jsonData); };

This JavaScript code ensures that the Quill editor's content is properly formatted into a JSON object before being submitted with the form. By stringifying the JSON data, I was able to resolve the QuillParseError and successfully save the data in the Django database