Cannot read property 'html' of undefined

[clark-97]

package.json

    "@angular/core": "~10.1.2",
    "ngx-summernote": "^0.8.0",
    "jquery": "^2.2.4",
    "summernote": "^0.8.18",

html

<div [(summernoteModel)]="template" [ngxSummernote]="config"></div>

ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-email-templates',
  templateUrl: './email-templates.component.html',
  styleUrls: ['./email-templates.component.css']
})
export class EmailTemplatesComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
    console.log(this.template)
  }

  config = {
    placeholder: '',
    tabsize: 2,
    height: '200px',
    uploadImagePath: '/api/upload',
    toolbar: [
      ['misc', ['codeview', 'undo', 'redo']],
      ['style', ['bold', 'italic', 'underline', 'clear']],
      ['font', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],
      ['fontsize', ['fontname', 'fontsize', 'color']],
      ['para', ['style', 'ul', 'ol', 'paragraph', 'height']],
      ['insert', ['picture', 'link', 'hr']]
    ],
    fontNames: ['Helvetica', 'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Roboto', 'Times']
  }

  template: string = '<p>hello</p><br>';

}

I got error Cannot read property 'html' of undefined, it maybe relate #80

[clark-97]

it does not show error by downgrading ngx-summernote to 0.7.4

[abaza738]

I am having the same problem with ngx-summernote v0.7.4.
I found a solution by adding this line in node_modules/ngx-summernote/fesm5/ngx-summernote.js:

import * as $ from 'jquery';`

Is there any work being done on this package at all @lula ?

[alissonmelonascimento]

I am having the same problem

[yargomascarenhas]

I am having a similar problem with ngx-summernote v0.8.7.

Change the following function in node_modules/ngx-summernote/fesm2015/ngx-summernote.js works for me:

updateEditor(content) {
    if (JSON.stringify(this._oldModel) === JSON.stringify(content)) {
        return;
    }
    this._oldModel = content;
    // this._$element.html(content);
    if (this._editorInitialized) {
        this._$element.summernote('code', content);
    }
    else if (this._$element){
        this._$element.html(content);
    }
}

[kongshu612]

For everyone met with this issue. if we use [summernoteModel]=xxx , it will cause this issue. updateEditor() is called in the ngOnChanges hook, but at this point, the _$element is not constructed. Actually, it is constructed in ngOnInit() with setTimeout.

It should be a bug.

How to bypass this issue

• use ReactForm instead, e.g. <div [ngxSummernote]="options" formControlName="xxx">
• if we can't use ReactForm, maybe, we can use this way to bypass

<div [ngxSummernote]="options" [(summernoteModel)]="someValue"></div>

someValue:any;
ngOnInit(){
const originalInitValue = someValue;
someValue=null;
setTimeout(()=>someValue=originalInitValue ,60);// 50 is used by ngx-summernote
}