How to add summernote plugin in angular ng2admin theme

Question

I have added summernote plugin on my angular 2 project and I am using ng2admin theme not using angular CLI. so how I add the summernote editor on my project?

I tried to include the summernote css and js file on index.html file.

index.html file

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.js"></script>

editor.html file

<div id="summernote">Hello Summernote</div

editor.component.ts

ngOnInit(){
  $('#summernote').summernote();
}

Error: "$(...).summernote is not a function".

Answer 1

It's very easy to add SummerNote in Angular. Follow the few steps bellow:

1. run the follwoing command in Angullar CLI or use it with npm

yarn add  ngx-summernote summernote

2. Add add JQuery and Summernote scripts and styles in angular.json file:

"styles": [  ... "node_modules/summernote/dist/summernote-lite.css" ],
"scripts": [ ... "node_modules/jquery/dist/jquery.min.js", 
                 "node_modules/summernote/dist/summernote-lite.js" ]

3. Summernote is initialized with the following default config and you can add it in your TS file

config ={ placeholder: '', tabsize: 2, height: 100, uploadImagePath: '', toolbar: 
  [ // [groupName, [list of button]] ['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', ['table', 'picture', 'link', 'video', 
  'hr']] ], fontNames: ['Helvetica', 'Arial', 'Arial Black', 'Comic Sans MS', 
  'Courier New', 'Roboto', 'Times'] }

4. Use the [ngxSummernoteView] directive on an element to set innerHTML of an element:

<div [ngxSummernote]="config" style="display: none;"  name="HtmlEditorInput"  
     [(summernoteModel)]="*.*"></div>

Answer 2

You should use the ngAfterViewInit hook. Inside ngOnInit the HTML elements of the component do not exist yet:

ngAfterViewInit() {
  $('#summernote').summernote();
}