CODEWITHSUNDEEP
pythondjangockeditorckeditor4.x
Andrej Vilenskij
Andrej Vilenskij

Reputation: 517

CKEditor configuration in django admin

I need to add richtextfield to my admin panel in Django, so I choose CKEditor, but I've got some problems with configuration:

When I try to move a row in django administration panel (with Enter key) editor for some reason add p tag to my text, that I don't need (i mean in admin editor, not in template). Can I somehow deactivate it? Or replace with br tag?

enter image description here

I use default configuration of CKEditor.

settings.py

CKEDITOR_CONFIGS = {
    'awesome_ckeditor': {
        'toolbar': 'Basic',
    },
}

models.py

class Section_1(models.Model):
    order = models.IntegerField(blank=True, default=0)
    picture = models.ImageField(blank=True)
    text = RichTextField(max_length=200, blank=True)
    ytlink = models.URLField(blank=True)

        def __str__(self):
        return self.text

    class Meta:
        verbose_name = 'Секция 1'
        verbose_name_plural = 'Секция 1'

integration in template:

<div class="main-screen__middle-title">
{% for sec_1 in sec_1 %}
{% if sec_1.order == 1 %}
<h4 class="main-screen__middle-title_active" data-mScreen="mscreen{{ 
sec_1.order }}">{{ sec_1.text }}</h4>
{% else %}
<h4 data-mScreen="mscreen{{ sec_1.order }}">{{ sec_1.text }}</h4>
{% endif %}
{% endfor %}

</div>

So when I open template without {{ sec_1.text| safe }} I see this:

enter image description here

if I use it, CKEditor just ignore h4 tag:

enter image description here

Questions are:

1) How to remove auto adding 'p' in admin panel?

2) How, if I use |safe to my variable, to make it not ignore external html-tags?

Upvotes: 3

Views: 3156

Answers (2)

Andrej Vilenskij
Andrej Vilenskij

Reputation: 517

Find an answer for django:

settings.py

CKEDITOR_CONFIGS = {
    'default': {
        'toolbar': 'Basic',
        **'enterMode': 2,** 
    },
    'awesome_ckeditor':{
        'toolbar': 'Custom',
        'toolbar_Custom': [
            [ 'Bold','Italic','Underline','Strike','- 
','Link','Unlink','Anchor','-', 'Styles','Format','Font','FontSize','-', 
'Image' ]
        ]
    },
}

Upvotes: 0

Astik Anand
Astik Anand

Reputation: 13057

If you prefer to not wrap the text in anything, you can choose to insert a line break tag because by default it takes p tag for wrapping.

config.enterMode = CKEDITOR.ENTER_P;

You need to add below line in config.js file for CKEditor:

CKEDITOR.editorConfig = function (config)
{
   config.enterMode = CKEDITOR.ENTER_BR;

   ...
};

or else if you want to wrap in div tag then,

config.enterMode = CKEDITOR.ENTER_DIV;

Upvotes: 1

Related Questions