LeeHanYeong / django-quill-editor

django-quill-editor makes Quill.js easy to use on Django Forms and admin sites
https://django-quill-editor.readthedocs.io
MIT License
192 stars 45 forks source link

django_quill.js registers modules even if they are not configured. #90

Open almandin opened 2 years ago

almandin commented 2 years ago

Hi, I'm using quill_django_editor with a specifc configuration in my settings.py :

QUILL_CONFIGS = {
    'default': {
        "theme": "snow",
        "modules": {
            "syntax": True,
            "toolbar": [
                [
                    {"header": []},
                    {"align": []},
                    ...
                    {"background": []},
                ],
                ["code-block", "link", "image"],
                ["clean"],
            ],
            # quill-resize
            "resize": {
                "showSize": True,
                "locale": {},
                "toolbar": {
                    "alingTools": False
                }
            },
        },
    }
}

As you can see I don't use the compressor module and I dont want to use it as I use the generated html to generate PNG files from the embedded images (and the compressor compresses them in jpeg). Anyway, when the imageCompressor module is not loaded in the configuration, django_quill ends up failing to load because the static file is not served. However the static file django_quill.js tries to load the modules (resize AND imageCompressor) wether we want them or not. https://github.com/LeeHanYeong/django-quill-editor/blob/82566af53de07e14c42eb2df99e5c9deccd38213/django_quill/static/django_quill/django_quill.js#L1 In my case, I didnt served the necessary js files because I thought they would not be necessary, ending in the quill editor not loading. I suggest that the configuration must be checked to determine if these modules should be registered or not. My workaround is to serve the necessary js files to clients even if it is totaly useless :'( Thanks by advance !

almandin commented 2 years ago

Maybe something like this in static/django_quill/django_quill.js could prevent my behavior ?

class QuillWrapper {
    constructor(targetDivId, targetInputId, quillOptions) {
        if (! Quill.imports["modules/resize"] && quillOptions["modules"].resize){
        Quill.register("modules/resize", window.QuillResizeModule);
    }
    if (! Quill.imports["modules/imageCompressor"] && quillOptions["modules"].imageCompressor){
        Quill.register("modules/imageCompressor", imageCompressor);
    }
        this.targetDiv = document.getElementById(targetDivId);
        if (!this.targetDiv) throw 'Target div(' + targetDivId + ') id was invalid';

        this.targetInput = document.getElementById(targetInputId);
        if (!this.targetInput) throw 'Target Input id was invalid';

        this.quill = new Quill('#' + targetDivId, quillOptions);
        this.quill.on('text-change', () => {
            var delta = JSON.stringify(this.quill.getContents());
            var html = this.targetDiv.getElementsByClassName('ql-editor')[0].innerHTML;
            var data = { delta: delta, html: html };
            this.targetInput.value = JSON.stringify(data);
        });
    }
}

Tell me if you want a pull request with that content. It works localy 🤷