NgxSummernote

Summernote editor for Angular :sunglasses:

Installation

Install ngx-summernote and dependencies:

npm install --save ngx-summernote summernote jquery

Compatibility:

Angular | ngx-summernote ------- | -------------- 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:

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

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:

<div [ngxSummernote]></div>

You may also configure Summernote with your own config:

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

export class AppComponent implements OnInit {
  ...
  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', ['table', 'picture', 'link', 'video', 'hr']]
    ],
    fontNames: ['Helvetica', 'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Roboto', 'Times']
  }
  ...
}

See Summernote available initialization options here.

Viewer

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

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

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

API call response is expected to be like:

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

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):

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

onDelete(file) {
  deleteResource(file.url);
}

Add custom button

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

function customButton(context) {
  const ui = $.summernote.ui;
  const button = ui.button({
    contents: '<i class="note-icon-magic"></i> Hello',
    tooltip: 'Custom button',
    container: '.note-editor',
    className: 'note-btn',
    click: function() {
      context.invoke('editor.insertText', 'Hello from test btn!!!');
    }
  });
  return button.render();
}

export class AppComponent implements OnInit {
  config: any = {
    ...
    buttons: {
      'testBtn': customButton
    }
  };
  ...
}

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