Summernote editor for Angular π
Install ngx-summernote and dependencies:
npm install --save ngx-summernote summernote jquery
Compatibility:
| Angular | ngx-summernote |
|---|---|
| 16 | 0.15.1 |
| 15 | 0.12.0 |
| 14 | 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 |
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.
Use [ngxSummernoteView] directive on an element to set innerHTML of an element:
<div [ngxSummernoteView]="content"></div>
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); }
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.
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
- Change version:
- projects/ngx-summernote/package.json
- package.json
- Add new version to compatibility table in README.md
- Build package. Run command
npm run build:lib. - Publish package. Run command
npm publishfromdist/ngx-summernotedirectory. - Make git commit.