CKeditor 5 does not detect keypress when used in a iframe

[futureandahope7]

📝 Provide detailed reproduction steps (if any)

GrapesJs is a visual HTML template generator. There are built-in functions that allow the replacement of the default (very basic editor) with any other editor. I was attempting to integrate CKEditor 5 with GrapesJs. Technically GrapesJS uses an iframe to display its editor. So CKeditor had to be embedded in the iframe. The problem is that for some reason key presses are not being converted to characters in the editor. All other styling features are working, but key presses are not. Below is the code that I am using with GrapesJs.

` / Initialise the grapesJS editor. Which creates an iframe based editor. Insert the ckeditor script inside the iframe so it has access to all prebuilt CSS and Javascript. /

    editor = grapesjs.init({
    container : '#gjs',
    components: '<div class="txt-red">Hello world!</div>',
    style: '.txt-red{color: red}',
        canvas: {
            scripts: ['<?php echo base_url() . "public/ckeditor/ckeditor.js"; ?>']
        },
    plugins: [
    'gjs-blocks-basic', vpaGrapesJsSlider,
    ],
    pluginsOpts: {
    'gjs-blocks-basic': {flexGrid: true}
    },
    assetManager: {
    assets:[],
    upload: '<?php echo base_url() . 'GrapesJS/uploadAsset'; ?>',

    uploadName: 'files',

    }
    });

    /* NOw add the editor to the iframe when ever a text block is selected. */

           editor.setCustomRte({

                isActive: false,
               enable: async function(el, rte) {

                    //just get this instance in-case it is needed within functions.
                    var thisSetCustomerRte = this;

                    //set the area that contains our HTML to editable true
                   el.contentEditable = true;

                   // If the aditor already exists just focus
                   if (rte) {
                       //hide the grapesJS toolbar
                       var rteToolbar = editor.RichTextEditor.getToolbarEl();
                       [].forEach.call(rteToolbar.children, function(child) {
                           child.style.display = 'none';
                       });

                       //get the editor instance
                       rte = await rte;
                       //set our active variable to true, depicting the editor is now active
                       thisSetCustomerRte.isActive = true;
                       //display the ckeditor toolbar
                       rte.ui.view.toolbar.element.style.display = 'flex';
                       //focus the editor
                       this.focus(el, rte);
                       //return once done
                       return rte;
                   }

                   //if this is the first time initialising editor

                   //hide grapesJS toolbar
                   var rteToolbar = editor.RichTextEditor.getToolbarEl();
                   [].forEach.call(rteToolbar.children, function(child) {
                       child.style.display = 'none';
                   });

                    //becasue the editor is in the iframe select the inner instance of ckeditor
                    var InlineEdit = jQuery('.gjs-frame').get(0).contentWindow.InlineEditor;

                    //create the editor, without the title plugin, but with the Essentials plugin
                   rte = await InlineEdit
                       .create(el, {
                           removePlugins: ['Title'],
                           placeholder: '',
                           language: 'en-au',
                           isReadOnly: false,
                           plugins: InlineEdit.builtinPlugins.concat(['Essentials']),
                           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' },
                                   { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
                                   { model: 'heading5', view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5' }
                               ]
                           }
                          }
                       ).catch(console.error);

                   if (rte) {
                       //set the variable that tells the code our editor is active
                       thisSetCustomerRte.isActive = true;
                       //move the toolbar out of the iframe to the top of the editor
                       editor.RichTextEditor.getToolbarEl().appendChild(rte.ui.view.toolbar.element);

                       //stop the toolbar from causing focus to be lost
                       jQuery(rte.ui.view.toolbar.element).on('mousedown', function(e) {

                            e.stopPropagation();
                            return true;

                       });

                        //now focus the editor
                       this.focus(el, rte);
                   } else {
                       console.error('Editor async was not initialized');
                   }

                   return rte;
               },

               disable: function(el, rte) {
                    //when the editor is no longer shown set to inactive, and make editable false.
                  this.isActive = false;
                  el.contentEditable = false;
               },

               focus: function (el, rte) {
                    //set to editable true and focus the ckeditor
                   el.contentEditable = true;
                   rte && rte.editing.view.focus();
               },
           });`

✔️ Expected result

The expected result is that keys should generate characters.

❌ Actual result

The actual result is no characters are generated.

📃 Other details

• Browser: Chrome
• OS: WIndows 10
• First affected CKEditor version: ?
• Installed CKEditor plugins: All most all opensource plugins, but excluding RestrictedEditingModeEditing

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[CKEditorBot]

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

[CKEditorBot]

We've closed your issue due to inactivity. We understand that the issue may still be relevant. If so, feel free to open a new one (and link this issue to it).