ngx-summernote - GitLite

KO | EN

gitlite — search

#hacktoberfest #ai #typescript #go #android #machine-learning #rust #docker #nodejs #cli #kubernetes #vue #security #open-source

ngx-summernote

(★ 106)

Summernote editor for Angular :sunglasses:

파일 탐색기

최종 버전 다운로드 (.zip)

- - app.e2e-spec.ts
  - app.po.ts
- protractor.conf.js
- tsconfig.e2e.json
- - karma.conf.js
  - ng-package.json
  - ng-package.prod.json
  - package.json
  - tsconfig.lib.json
  - tsconfig.lib.prod.json
  - tsconfig.spec.json
  - tslint.json
- - app.component.css
  - app.component.html
  - app.component.spec.ts
  - app.component.ts
  - app.module.ts
- - .gitkeep
- - environment.prod.ts
  - environment.ts
- .browserslistrc
- favicon.ico
- index.html
- karma.conf.js
- main.ts
- polyfills.ts
- styles.css
- test.ts
- tsconfig.app.json
- tsconfig.spec.json
- tslint.json
.editorconfig
.gitignore
.prettierignore
.prettierrc
angular.json
LICENSE
package-lock.json
package.json
proxy.conf.json
README.md
tsconfig.json
tslint.json

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/lula/ngx-summernote

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd ngx-summernote

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm start

개발/실행 서버를 켭니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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
------- | --------------
\> 19   | 1.1.0
\> 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
<div [ngxSummernote]></div>
```

You may also configure Summernote with your own config:

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

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

```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
<div [ngxSummernote] (mediaDelete)="onDelete($event)"></div>
```

```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: '<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](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)