How will I add css with Django Ckeditor?

Question

I used django-ckeditor, It's working perfectly. But problem is, I couldn't add CSS. Even it ruined the template design. Even jQuery also not working in template. I actually would like to responsive the field so that in the mobile works perfectly. Now how can I do it?

forms.py:

from django import forms
from .models import Products
from django.forms import ModelForm
from ckeditor.fields import RichTextField

class add_product_info(forms.ModelForm):
    product_desc = RichTextField()

    class Meta:
        model = Products
        fields = ('product_desc')

        labels = {
            'product_desc':'Description',
        }

        widgets = {
            'product_desc':forms.Textarea(attrs={'class':'form-control', 'style':'font-size:13px;'}),
        }

templates:

    <form action="" method="POST" class="needs-validation" style="font-size: 13px;" novalidate="" autocomplete="off" enctype="multipart/form-data">
    {% csrf_token %}
    {{form.media}}
    {{ form.as_p }}
    <div class="d-flex align-items-center">
        <button type="submit" class="btn btn-outline-dark ms-auto" style="font-size:13px;">Add</button>
    </div>
    
    </form>

details template:

    <p class="item_desc_container text-center text-md-center text-lg-start descriptions poppins_font" style="font-size: 15px;">
{{ quick_view.product_desc|safe }}
    </p>

kimnluna · Accepted Answer · 2022-08-02 06:14:18Z

1

This should solve your concern. Allowed Content defines which HTML elements, attributes, styles, and classes are allowed. To get allowedContent to work, disable stylesheetparser plugin.

You can place this within your settings.py file.

   CKEDITOR_CONFIGS = {'default': {
'removePlugins': 'stylesheetparser',
'allowedContent': True,},}

To learn more, you can find the documentation here.

answered Aug 2, 2022 at 6:14

kimnluna

391 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mossaddak Over a year ago

I actually would like to responsive the field so that in the mobile works perfectly

kimnluna Over a year ago

You would need CSS to make your field responsive. By allowing the configuration above, CKeditor will allow you to add styles/classes. Does that answer your question?

Mossaddak Over a year ago

how can I allow the configuration so that I can use CSS for responsiveness?

kimnluna Over a year ago

With the settings above, it's already allowed. All you have to do is add the classes in the editor itself; click on "Source" in the editor to ad d classes.

Collectives™ on Stack Overflow

How will I add css with Django Ckeditor?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related