erreur-t

[SBonneau1985]

Good morning,
I am using the latest version of the module and I have a error-t . How do I resolve it?

CKEditorError: t is null
Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-t is null
_removeDomSelection renderer.js:804
_updateSelection renderer.js:675
render renderer.js:232
_render view.js:542
na view.js:122
fire emittermixin.js:146
change view.js:423
_setupRootLabels accessibilityhelp.js:92
fire emittermixin.js:146
init classiceditorui.js:75
create classiceditor.js:192
promise callbackcreate/< classiceditor.js:192
create classiceditor.js:189
lP app.js:92
lP app.js:48
app.js:152
EventListener.handleEvent app.js:152
app.js:178
app.js:178
app.js:110:12
lP app.js:110
(Asynchronous: promise callback)
lP app.js:108
lP app.js:48
app.js:152
(Asynchronous: EventListener.handleEvent)
app.js:152
app.js:178
app.js:178

[goapunk]

@SBonneau1985 I think we'll need some more information (e.g. a way to reproduce it in the example project in this repo) or some sample code as I haven't run into this error yet

[SBonneau1985]

The error seems to only appear in Firefox (Vivaldi does not show any errors). Here is the configuration in my settings file:

python
Copy code
CK_EDITOR_5_UPLOAD_FILE_VIEW_NAME = "custom_upload_file"
customColorPalette = [
{"color": "hsl(4, 90%, 58%)", "label": "Red"},
{"color": "hsl(340, 82%, 52%)", "label": "Pink"},
{"color": "hsl(291, 64%, 42%)", "label": "Purple"},
{"color": "hsl(262, 52%, 47%)", "label": "Deep Purple"},
{"color": "hsl(231, 48%, 48%)", "label": "Indigo"},
{"color": "hsl(207, 90%, 54%)", "label": "Blue"},
]

CKEDITOR_5_CONFIGS = {
"default": {
'height': 50,
'width': 'auto',
"toolbar": [
"heading",
"|",
"bold",
"italic",
"link",
"bulletedList",
"numberedList",
"blockQuote",
"imageUpload"
],
},
"comment": {
'height': 50,
'width': 'auto',
"language": {"ui": "fr", "content": "fr"},
"toolbar": [
"heading",
"|",
"bold",
"italic",
"link",
"bulletedList",
"numberedList",
"blockQuote",
],
},
"extends": {
"language": "fr",
'height': 50,
'width': 'auto',
"blockToolbar": [
"paragraph",
"heading1",
"heading2",
"heading3",
"|",
"bulletedList",
"numberedList",
"|",
"blockQuote",
],
"toolbar": [
"heading",
"codeBlock",
"|",
"outdent",
"indent",
"|",
"bold",
"italic",
"link",
"underline",
"strikethrough",
"code",
"subscript",
"superscript",
"highlight",
"|",
"bulletedList",
"numberedList",
"todoList",
"|",
"blockQuote",
"insertImage",
"|",
"fontSize",
"fontFamily",
"fontColor",
"fontBackgroundColor",
"mediaEmbed",
"removeFormat",
"insertTable",
"sourceEditing",
],
"image": {
"toolbar": [
"imageTextAlternative",
"|",
"imageStyle:alignLeft",
"imageStyle:alignRight",
"imageStyle:alignCenter",
"imageStyle:side",
"|",
"toggleImageCaption",
"|"
],
"styles": [
"full",
"side",
"alignLeft",
"alignRight",
"alignCenter",
],
},
"table": {
"contentToolbar": [
"tableColumn",
"tableRow",
"mergeTableCells",
"tableProperties",
"tableCellProperties",
],
"tableProperties": {
"borderColors": customColorPalette,
"backgroundColors": customColorPalette,
},
"tableCellProperties": {
"borderColors": customColorPalette,
"backgroundColors": customColorPalette,
},
},
"heading": {
"options": [
{
"model": "paragraph",
"title": "Paragraph",
"class": "ck-heading_paragraph",
},
{
"model": "heading1",
"view": "h1",
"title": "Heading 1",
"class": "ck-heading_heading1",
},
{
"model": "heading2",
"view": "h2",
"title": "Heading 2",
"class": "ck-heading_heading2",
},
{
"model": "heading3",
"view": "h3",
"title": "Heading 3",
"class": "ck-heading_heading3",
},
]
},
"list": {
"properties": {
"styles": True,
"startIndex": True,
"reversed": True,
}
},
"htmlSupport": {
"allow": [
{"name": "/.*/", "attributes": True, "classes": True, "styles": True}
]
},
},
}

The configuration in the form:

widgets = {
    'StartDate': DateTimePickerInput(format='%Y-%m-%d %H:%M:%S'),
    'EndDate': DateTimePickerInput(format='%Y-%m-%d %H:%M:%S'),
    'Username': forms.TextInput(attrs={'readonly': 'readonly'}),
    'Equipe': forms.TextInput(attrs={'readonly': 'readonly'}),
    'Operateur': forms.CheckboxInput(),
    "Message": CKEditor5Widget(attrs={"class": "django_ckeditor_5"}, config_name="extends"),
}
In my models class:

python
Copy code
Message = CKEditor5Field('Text', config_name='extends', null=True, blank=True)

[SBonneau1985]

The bug appears when my update page is loaded in an iframe. This causes an error T, CKEditor seems to be disabled, and the content is empty. The bug occurs only in Firefox.

[SBonneau1985]

To recreate the bug, try creating an update page (

{% load static %}

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Update ****</title>
    <!-- Ajoutez jQuery -->
<!--    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>-->

    <script src="{% static 'js/commun/jquery-360min.js' %}"></script>
    <script src="{% static 'js/commun/bootstrap.min.js' %}"></script>

    <!-- Ajoutez les styles CSS -->


</head>
<body>

<form id="*****-form" method="post" action="{% url 'update_*****' instance_id=instance.id %}" enctype="multipart/form-data">
  {% csrf_token %}
  {{ form.media }} <!-- utile pour les formulaires bootstrap et dateInput -->
  <table class="table-enfant">
    <tr>
      <td class="Label">{{ form.****.label_tag }}</td>
      <td class="Input">{{ form.***** }}</td>
      <td class="Label">{{ form.*******.label_tag }}</td>
      <td class="Input">
        <select id="id_*****" name="*****">
          {% for option in *******%}
            <option value="{{ option }}">{{ option }}</option>
          {% endfor %}
        </select>
      </td>
      <td class="Label">{{ form.*****.label_tag }}</td>
      <td class="Input">{{ form.**** }}</td>
      <td class="Label">{{ form.****.label_tag }}</td>
      <td class="Input">{{ form.*** }}</td>
      <td class="Label">{{ form.***.label_tag }}</td>
      <td class="Input">{{ form.**** }}</td>
    </tr>
    <tr>
      <td class="Label">{{ form.*****.label_tag }}</td>
      <td class="Input">{{ form.**** }}</td>
      <td class="Label">{{ form.****.label_tag }}</td>
      <td class="Input">{{ form.*** }}</td>
      <td class="Label">{{ form.*****.label_tag }}</td>
      <td class="Input">{{ form.**** }}</td>
      <td class="Label">{{ form.*****.label_tag }}</td>
      <td class="Input">{{ form.**** }}</td>
      <td class="Label">{{ form.Status.label_tag }}</td>
      <td class="Input">{{ form.Status }}</td>
    </tr>
    <tr>
      <td class="Label">{{ form.StartDate.label_tag }}</td>
      <td class="Input">{{ form.StartDate }}</td>
      <td class="Label">{{ form.EndDate.label_tag }}</td>
      <td class="Input">{{ form.EndDate }}</td>
      <td class="Label">{{ form.****.label_tag }}</td>
      <td class="Input">{{ form.**** }}</td>
      <td class="Label"></td>
      <td></td>
      <td class="Label">{{ form.***** }}</td>
      <td class="Input">{{ form.***** }}</td>
    </tr>
    <tr>
      <td class="Label" id="dynamic-label"></td>
      <td class="Input" id="dynamic-field"></td>
      <td class="Label"><label>****</label></td>
      <td class="Input">{{ form.**** }}</td>
    </tr>
    <tr>
      <td class="Message" colspan="10">
        {{ form.Message }}
      </td>
    </tr>
    <tr>
      <td colspan="2">
        {% for file in *****.files.all %}
          <a href="{{ file.file.url }}">
          <img src="{% static 'img/piece-jointe.png' %}" alt="{{ file.file.name }}" style="width: 40px; height: 40px;"> </a>
        {% endfor %}
      </td>
    </tr>
      <tr>
        <td id="button-save"><button type="submit" class="btn btn-primary">Modifier</button></td>
        <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
          <td colspan="2">
              {{ form.files }}
          </td>
      </tr>
  </table>
</form>


</body>
</html>

and load it in an iframe in a ListView class for each item as follows:

<iframe
          width="100%"
          height="585"
          frameborder="0"
          allowfullscreen
          sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
          id="iframe_{{ item.id }}"
          title="Update-***"
          src="{% url 'update_****' instance_id=item.id %}">
        </iframe>

[goapunk]

@SBonneau1985 could you create a sample repo somewhere or a PR which recreates the issue in the example blog app of this repo? I can't reproduce it locally, using an iframe works fine with a simple html file which opens the article page of the example blog app.

[SBonneau1985]

Unfortunately, at the moment, I cannot share the current code (professional confidentiality). I will try to recreate a similar application, with anonymized data, when I return from vacation. Thank you. Best regards.