djangocms-text-ckeditor how to stop it removing HTML tags and attributes

Question

(1) Using the docker image of django cms obtained from

django cms install docker image

(2) The version of CKEditor being used (taken from requirement.txt) is:

djangocms-text-ckeditor==5.1.1

(3) The directory structure is

(4) cms_plugin.py has

from cms.plugin_base import CMSPluginBase
from cms.plugin_pool import plugin_pool
from cms.models.pluginmodel import CMSPlugin
from django.utils.translation import gettext_lazy as _
from .models import AvilonLayout3Column

@plugin_pool.register_plugin
class AvilonLayout3ColumnPlugin(CMSPluginBase):
   model = AvilonLayout3Column
   render_template = "AvilonLayout3Column.html"
   cache = False

(5) models.py

from cms.models.pluginmodel import CMSPlugin
from django.db import models
from djangocms_text_ckeditor.fields import HTMLField

class AvilonLayout3Column(CMSPlugin):
   title = models.CharField(max_length=50, default='Pricing')

   column_1_featureColumn=models.BooleanField (default=False)
   column_1_heading=models.CharField(max_length=50, default='Free')

   #----------- HTMLField defined -----------------
   column_1_content=HTMLField(blank=True)
   #-----------------------------------------------
    column_1_button_show=models.BooleanField (default=True)
    column_1_button_text=models.CharField(max_length=20, default='Get Started')

(7) CKEditior is removing attributes from HTML tags for example

If this is input:

<ul>
   <li>
     <i class='bi bi-check-circle'>
     </i> 
     Quam adipiscing vitae proin
   </li>
   <li>
     <i class='bi bi-check-circle'></i> 
    Nec feugiat nisl pretium
   </li>
   <li>
     <i class='bi bi-check-circle'></i> 
     Nulla at volutpat diam uteera
   </li>
 </ul>

It is converted to:

<ul>
   <li>Quam adipiscing vitae proin</li>
   <li>Nec feugiat nisl pretium</li>
   <li>Nulla at volutpat diam uteera</li>
</ul>

namely, the i tags and class attributes are removed.

(8) I know that this is due to CKEditor and when the above behavior is reported elsewhere people are often saying that the config.allowedContent should be set to true and then there is reference in other articles about extraAllowedContent needing to be set

(9) Then elsewhere it is stated that amending your settings.py file could address the situation adding

CKEDITOR_SETTINGS_AvilonLayout3ColumnPricing={
'toolbar_HTMLField':[
    [
        'Undo',
        'Redo',
    ]
],
'basicEntities': False,
'entities': False,
'TEXT_HTML_SANITIZE': False,
 }

but, does this mean i add the above in the backend/settings.py file or somewhere else? If the former then this doesn't work

(10) the CKEditior plugin directory from the docker images looks like this:

(11) So am trying to get the plugin field's CKEditor to over ride it's default behaviour - this plugin field:

Any ideas how I over-ride the default behavior so the i tag and it's attribute of class stay put and are not removed by CKEditor

Useful resource: https://github.com/django-cms/djangocms-text-ckeditor

Just can't get the advice in the above resource to work.

Answer 1

The setting should be added to your settings.py file.

The specific settings can be found here: https://docs-old.ckeditor.com/ckeditor_api/symbols/CKEDITOR.config.html

I can see that the setting you have doesn't match the model, your setting: CKEDITOR_SETTINGS_AvilonLayout3ColumnPricing, I think should be: CKEDITOR_SETTINGS_AvilonLayout3Column

May also be worth adding the htmlEncodeOutput setting: https://docs-old.ckeditor.com/ckeditor_api/symbols/CKEDITOR.config.html#.htmlEncodeOutput

The HTML field does have some limitations for plugins, but I think the configuration should work ok.