"CanvasView.frame.el.contentDocument is null" in angular4
There is a very similar issue #1288 please discuss it here. BTW I'd need a minimal live demo for such a case
Read full answer below ↓Question
Hi I integrated grapejs with angular4.I added custom button.After click on edit button throwing error:- TypeError columnNumber: 7 fileName: "http://localhost:4200/vendor.js" lineNumber: 78800 message: "CanvasView.frame.el.contentDocument is null" ngOnInit() { console.log('oninit')
this.editor = grapesjs.init({
allowScripts: 1,
showOffsets: 1,
autorender: 0,
noticeOnUnload: 0,
container : '#gjs',
height: '100%',
fromElement: true,
clearOnRender: 0,
storageManager: {autoload: 0},
});
}
// edit(){
// console.log('edit',this.editor)
// this.editor.runCommand('sw-visibility');
// this.nameModel='hello grapes edit !'
// this.editor.render();
// }
editBtn(){
console.log('editBtn',this.editor)
//this.editor.setComponents(this.editor.getHtml())
this.editor.runCommand('sw-visibility');
document.getElementById("preview").style.display = "block";
document.getElementById("edit").style.display = "none";
}

Thanks,
sandeep kumar.Answers (2)
There is a very similar issue #1288 please discuss it here. BTW I'd need a minimal live demo for such a case
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #919
[QUESTION] Reinit GrapesJS
Hi all, I'm writing an application that include grapesjs fron an ajax call in a specific div. Obviusly I'd use an external menu to navigate...
Issue #1959
[Question] Edit innerHTML in a custom button
Hi All, I am trying to change the text in a button component, but I am not able to edit it. I added this type: I included the editable: tru...
Issue #1288
Cannot read property 'body' of null - Angular
Hi, I have a list of email template (page 'templates') and there is a button that open the edit (page 'templates/edit/:templateId'. All wor...
Issue #1003
[Question/ bug]"Uncaught TypeError: t.get is not a function" on adding select-comp
on adding button "select" component { id : 'select', className : 'fa fa-mouse-pointer', command : 'select-comp', }, in button's panels gett...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Related tutorials
In-depth guides on the same topic.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.