Integrating GrapesJS with CKEditor 5 keyboard problem

Question

I am trying to replace the GrapesJS RTE with CKEditor 5. I can get the CK editor to display, but the content of the editor is always locked. No matter what key is pressed no input is entered. I can style text in the box, just not type with the keyboard. Below is the code that I use.

I don't know if this is a problem with CKEditor or GrapesJS.

  
//The variable called "editor" is the grapesJS instance.

editor.setCustomRte({


                   enable: async function(el, rte) {
                       el.contentEditable = true;

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

                           rte = await rte;
                           rte.ui.view.toolbar.element.style.display = 'flex';
                           this.focus(el, rte);
                           return rte;
                       }

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


                       // Init CkEditors
                       rte = await InlineEditor
                           .create(el, {
                               language: 'en-au',
                               isReadOnly: false,
                               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) {

                           editor.RichTextEditor.getToolbarEl().appendChild(rte.ui.view.toolbar.element);

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

                       return rte;
                   },


                   disable: function(el, rte) {
                      el.contentEditable = false;
                   },


                   focus: function (el, rte) {
                       el.contentEditable = true;
                       rte && rte.editing.view.focus();
                       rte && rte.disableReadOnlyMode( el.id );
                   },
               });

I tried ensuring CKEditor readOnly was off, and it was not in restricted editing mode.

Integrating GrapesJS with CKEditor 5 keyboard problem

0 Answers0