javascriptjquerybootstrap-modaleditorckeditor5

CKEditor 5 inside Bootstrap modal: Editor is initialized but not editable

I'm trying to integrate CKEditor 5 inside a Bootstrap modal, but even though the editor initializes without any errors, I'm unable to type in the text field. The editor is rendered, but it behaves as if it is in a "read-only" mode.

I show you screenshots and run my code directly in the console because I think it will be more comfortable for you to see it.

First, open the modal, which already comes with a textarea that is fully editable.

$("#modal_editar_html").modal();

modal without anything written

Then I run ClassicEditor.create to replace the textarea with the CKeditor 5 editor

ClassicEditor.create($("#texto_contenido")[0], {
    licenseKey: 'eyJhbGciOiJFUzI1NiJ9.eyJleHAiOjE3NDA1Mjc5OTksImp0aSI6ImNiNjk1OTZhLTM4YzUtNDc2YS1iM2UxLTFmOWU1OTNlMDQ0MCIsInVzYWdlRW5kcG9pbnQiOiJodHRwczovL3Byb3h5LWV2ZW50LmNrZWRpdG9yLmNvbSIsImRpc3RyaWJ1dGlvbkNoYW5uZWwiOlsiY2xvdWQiLCJkcnVwYWwiLCJzaCJdLCJ3aGl0ZUxhYmVsIjp0cnVlLCJsaWNlbnNlVHlwZSI6InRyaWFsIiwiZmVhdHVyZXMiOlsiKiJdLCJ2YyI6IjA4Y2QwYjJiIn0.283faOBt808tzYbU44p9td1uQgmOyNFeVsV_tYEGywdfUZqNXFgzQuKKXm12u9RJoz7WOuEKHoxi_O0zxew0hA',
    toolbar: { items: ["bold", "italic", "|", "alignment", "|", "undo", "redo"] },
    plugins: [Alignment, Bold, Italic, Paragraph, Undo],
    language: "es"
})
.then(editor => { window.editorInstance = editor; })
.catch(error => { console.error(error); });

Replacing textarea with CKEditor 5 editor

And it is impossible to write in the editor, if the text area is edited beforehand, it does take the text, but it is still impossible to edit anything at all. I show an example screenshot

Example with text

Any ideas on what might be causing this issue or how to solve it?

Solution

  • Missing Plug-In

    I was able to reproduce the problem, which is caused by a missing CKEditor plugin.

    The Essentials plugin "enables clipboard, Enter, select all, ShiftEnter, typing and undo support."

    Demo The code uses an evaluation license key which stops working after 14 days.

    const KEY = "eyJhbGciOiJFUzI1NiJ9.eyJleHAiOjE3NDA1Mjc5OTksImp0aSI6ImNiNjk1OTZhLTM4YzUtNDc2YS1iM2UxLTFmOWU1OTNlMDQ0MCIsInVzYWdlRW5kcG9pbnQiOiJodHRwczovL3Byb3h5LWV2ZW50LmNrZWRpdG9yLmNvbSIsImRpc3RyaWJ1dGlvbkNoYW5uZWwiOlsiY2xvdWQiLCJkcnVwYWwiLCJzaCJdLCJ3aGl0ZUxhYmVsIjp0cnVlLCJsaWNlbnNlVHlwZSI6InRyaWFsIiwiZmVhdHVyZXMiOlsiKiJdLCJ2YyI6IjA4Y2QwYjJiIn0.283faOBt808tzYbU44p9td1uQgmOyNFeVsV_tYEGywdfUZqNXFgzQuKKXm12u9RJoz7WOuEKHoxi_O0zxew0hA"

const { Essentials, ClassicEditor, Alignment, Undo, Bold, Italic, Font, Paragraph } = CKEDITOR

ClassicEditor.create(document.getElementById("texto_contenido"), {
    licenseKey: KEY,
    toolbar: { items: ["bold", "italic", "|", "alignment", "|", "undo", "redo"] },
    plugins: [Essentials, Alignment, Bold, Italic, Paragraph, Undo],
    language: "es"
})
.then(editor => { window.editorInstance = editor; })
.catch(error => { console.error(error); });
    <!-- Button trigger modal -->
<button
  type="button"
  class="btn btn-primary"
  data-bs-toggle="modal"
  data-bs-target="#staticBackdrop"
>
  Open Modal
</button>

<!-- Modal -->
<div
  class="modal fade"
  id="staticBackdrop"
  data-bs-backdrop="static"
  data-bs-keyboard="false"
  tabindex="-1"
  aria-labelledby="staticBackdropLabel"
  aria-hidden="true"
>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="">
        <h1 class="modal-title fs-5" id="staticBackdropLabel">
        Editor</h1>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body">
        <!-- ckeditor -->
        <div class="main-container">
          <div id="texto_contenido">
            <p>Hello from CKEditor 5!</p>
          </div>
        </div>
      </div>
      <div class="modal-footer">
      </div>
    </div>
  </div>
</div>

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<!-- BOOTSTRAP 5 -->
<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
  rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<!-- CKEDITOR -->
<link
  rel="stylesheet"
  href="https://cdn.ckeditor.com/ckeditor5/44.2.1/ckeditor5.css"
/>
<script src="https://cdn.ckeditor.com/ckeditor5/44.2.1/ckeditor5.umd.js"></script>