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 callback*create/< 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.