Issue #1304πŸ’¬ AnsweredOpened Jul 23, 2018by sanskipk0 reactions
outdated

"CanvasView.frame.el.contentDocument is null" in angular4

Quick answerby artf

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,
Code SnippetTEXT
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";
  }
![image](https://user-images.githubusercontent.com/41565928/43061645-a446decc-8e73-11e8-9718-ab9c2ce5df47.png)

Thanks,
sandeep kumar.

Answers (2)

artfβ€’ Jul 26, 2018

There is a very similar issue #1288 please discuss it here. BTW I'd need a minimal live demo for such a case

lock[bot]β€’ Sep 17, 2019

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...

2 answersUpdated Sep 18, 2019

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...

3 answersUpdated Apr 15, 2020

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...

3 answersUpdated Oct 11, 2019

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...

3 answersUpdated Sep 17, 2019

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins β†’
Premium option

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.

All tutorials β†’

Tutorial

πŸš€ Introducing GrapesJS Email Blocky: The Ultimate Email Block Library for GrapesJS

Building professional, responsive, email-safe templates has always been one of the biggest challenges for developers and marketers.

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.

PresetsPluginsComponentsBlocksAssetsCommandsI18nLayersStylesStoragesRTENewslettersWeb pagesSite builders