ckeditor
CKeditor 5 does not detect keypress when used in a iframe
📝 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.
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.
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).