NgxSummernote

Summernote editor for Angular :sunglasses:

Installation

Install ngx-summernote and dependencies:

npm install --save ngx-summernote summernote jquery

Compatibility:

Angular	ngx-summernote
> 14	1.0.0 (Ivy support)
> 14	0.9.0
13	0.8.8
12	0.8.5
11	0.8.4
10	0.8.x
9	0.7.x
8	0.7.x
7	0.6.x
6	0.5.4

Editor

Add JQuery and Summernote scripts and styles to the angular.json file:

1"styles": [
2  ...
3  "node_modules/summernote/dist/summernote-lite.min.css"
4],
5"scripts": [
6  ...
7  "node_modules/jquery/dist/jquery.min.js",
8  "node_modules/summernote/dist/summernote-lite.min.js"
9]

Add NgxSummernoteModule to the app.module.ts file OR to the subcomponent module.ts file if using lazy loading:

...
import { NgxSummernoteModule } from 'ngx-summernote';
...
@NgModule({
...
  imports: [
    ...
    NgxSummernoteModule
    ...
  ]
})
export class AppModule { }

Use [ngxSummernote] directive on an element to init Summernote editor:

1<div [ngxSummernote]></div>

You may also configure Summernote with your own config:

1<div [ngxSummernote]="config"></div>

1export class AppComponent implements OnInit {
2  ...
3  config = {
4    placeholder: '',
5    tabsize: 2,
6    height: '200px',
7    uploadImagePath: '/api/upload',
8    toolbar: [
9        ['misc', ['codeview', 'undo', 'redo']],
10        ['style', ['bold', 'italic', 'underline', 'clear']],
11        ['font', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],
12        ['fontsize', ['fontname', 'fontsize', 'color']],
13        ['para', ['style', 'ul', 'ol', 'paragraph', 'height']],
14        ['insert', ['table', 'picture', 'link', 'video', 'hr']]
15    ],
16    fontNames: ['Helvetica', 'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Roboto', 'Times']
17  }
18  ...
19}

See Summernote available initialization options here.

Viewer

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

1<div [ngxSummernoteView]="content"></div>

Upload images to server

If you want to upload images to server and use remote paths in editor, you need to set uploadImagePath option in config:

1config = {
2  uploadImagePath: 'http://example.com/upload' // API URL to upload image
3};

API call response is expected to be like:

1{
2  path: 'the path of the image' // http://example.com/image-path.png
3}

If the reponse does not follow the above structure then the image is inserted as data URL.

To remove images from server when deleted from HTML, use (mediaDelete):

1<div [ngxSummernote] (mediaDelete)="onDelete($event)"></div>

1onDelete(file) {
2  deleteResource(file.url);
3}

Add custom button

In your component setup summernote config and code for the custom button, e.g.:

1function customButton(context) {
2  const ui = $.summernote.ui;
3  const button = ui.button({
4    contents: '<i class="note-icon-magic"></i> Hello',
5    tooltip: 'Custom button',
6    container: '.note-editor',
7    className: 'note-btn',
8    click: function() {
9      context.invoke('editor.insertText', 'Hello from test btn!!!');
10    }
11  });
12  return button.render();
13}
14
15export class AppComponent implements OnInit {
16  config: any = {
17    ...
18    buttons: {
19      'testBtn': customButton
20    }
21  };
22  ...
23}

See detailed info on custom buttons here.

Development

To use the test application, first build the lib:

ng build ngx-summernote

Then serve the test application and open it in your browser:

npm start

Contributors

• Ishan Mahajan
• NickShcherba
• Mathis Hofer
• James Manners
• Tim Börner
• Jason K.
• Elle