Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sibiraj-s/ngx-editor

πŸ–‹οΈ Rich Text Editor for angular using ProseMirror
https://github.com/sibiraj-s/ngx-editor

angular ngx-editor prosemirror rich-text-editor wysiwyg-editor

Last synced: 17 days ago
JSON representation

πŸ–‹οΈ Rich Text Editor for angular using ProseMirror

Awesome Lists containing this project

README

        

# NgxEditor



ngxEditor


The Rich Text Editor for Angular, Built on ProseMirror




Tests


npm version


npm


npm




licence

> A simple rich text editor for angular applications built with ProseMirror. It is a drop in and easy-to-use editor
> and can be easily extended using prosemirror plugins to build any additional or missing features

## Getting Started

[demo] | [edit on stackblitz][stackblitz] | [documentation] | [migrating from other editors][migration]

### Installation

Install via Package managers such as [npm] or [pnpm] or [yarn]

```bash
npm install ngx-editor
# or
pnpm install ngx-editor
# or
yarn add ngx-editor
```

### Usage

**Note**: By default the editor comes with minimal features. Refer the [demo] and [documentation] for more details and examples.

Import `ngx-editor` module

```ts
import { NgxEditorModule } from 'ngx-editor';

@NgModule({
imports: [NgxEditorModule],
})
export class AppModule {}
```

Component

```ts
import { Editor } from 'ngx-editor';

export class EditorComponent implements OnInit, OnDestroy {
editor: Editor;
html = '';

ngOnInit(): void {
this.editor = new Editor();
}

// make sure to destory the editor
ngOnDestroy(): void {
this.editor.destroy();
}
}
```

Then in HTML

```html





```

Note: Input can be a HTML string or a jsonDoc

## Browser Compatibility

Mostly works on all Evergreen-Browsers like

- Google Chrome
- Microsoft Edge
- Mozilla Firefox
- Safari
- Opera

## Collaborative Editing

See https://sibiraj-s.github.io/ngx-editor/#/collab

## Icons

Icons are from https://fonts.google.com/icons

## Contributing

All contributions are welcome. See [CONTRIBUTING.md](./.github/CONTRIBUTING.md) to get started.

[npm]: https://www.npmjs.com/
[pnpm]: https://pnpm.io/
[yarn]: https://yarnpkg.com/lang/en/
[documentation]: https://sibiraj-s.github.io/ngx-editor
[demo]: https://ngx-editor.stackblitz.io/
[stackblitz]: https://stackblitz.com/edit/ngx-editor
[migration]: https://sibiraj-s.github.io/ngx-editor/#/migration