Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lula/ngx-summernote
Summernote editor for Angular :sunglasses:
https://github.com/lula/ngx-summernote
angular angular6 angular7 angular8 angular9 ngx-summernote summernote summernote-editor wysiwyg-editor
Last synced: 3 months ago
JSON representation
Summernote editor for Angular :sunglasses:
- Host: GitHub
- URL: https://github.com/lula/ngx-summernote
- Owner: lula
- License: mit
- Created: 2018-06-12T07:50:45.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-01-10T18:43:13.000Z (about 1 year ago)
- Last Synced: 2024-10-01T10:19:31.842Z (4 months ago)
- Topics: angular, angular6, angular7, angular8, angular9, ngx-summernote, summernote, summernote-editor, wysiwyg-editor
- Language: TypeScript
- Homepage:
- Size: 957 KB
- Stars: 102
- Watchers: 4
- Forks: 42
- Open Issues: 54
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-wysiwyg - ngx-summernote - Summernote wysiwyg editor for Angular. (For Angular)
- awesome-wysiwyg-editors - ngx-summernote - Summernote wysiwyg 编辑器基于 Angular。  (基于 Angular)
README
# NgxSummernote
[Summernote](https://github.com/summernote/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:
```json
"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:
```html
```
You may also configure Summernote with your own config:
```html
```
```typescript
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](https://summernote.org/deep-dive/#initialization-options).
## Viewer
Use `[ngxSummernoteView]` directive on an element to set innerHTML of an element:
```html
```
## 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:
```javascipt
config = {
uploadImagePath: 'http://example.com/upload' // API URL to upload image
};
```
API call response is expected to be like:
```javascript
{
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)`:
```html
```
```typescript
onDelete(file) {
deleteResource(file.url);
}
```
## Add custom button
In your component setup summernote `config` and code for the custom button, e.g.:
```typescript
function customButton(context) {
const ui = $.summernote.ui;
const button = ui.button({
contents: ' 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](https://summernote.org/deep-dive/#custom-button).
## 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](https://github.com/ishan123456789)
- [NickShcherba](https://github.com/shcherbanikolay)
- [Mathis Hofer](https://github.com/hupf)
- [James Manners](https://github.com/jmannau)
- [Tim Börner](https://github.com/tim-boerner)
- [Jason K.](https://github.com/lonerzzz)
- [Elle](https://github.com/LuigiElleBalotta)