Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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
- Host: GitHub
- URL: https://github.com/sibiraj-s/ngx-editor
- Owner: sibiraj-s
- License: mit
- Created: 2017-09-22T12:22:09.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2024-05-15T10:07:45.000Z (6 months ago)
- Last Synced: 2024-05-18T10:31:04.751Z (6 months ago)
- Topics: angular, ngx-editor, prosemirror, rich-text-editor, wysiwyg-editor
- Language: TypeScript
- Homepage: https://sibiraj-s.github.io/ngx-editor/
- Size: 17.2 MB
- Stars: 423
- Watchers: 15
- Forks: 182
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-wysiwyg-editors - ngx-editor - δ½Ώη¨ ProseMirror η angular ε―ζζ¬ηΌθΎε¨) ![github star](https://img.shields.io/github/stars/sibiraj-s/ngx-editor.svg?style=social&label=Star) (εΊδΊ Angular)
- awesome-angular - ngx-editor - Rich Text Editor for Angular using ProseMirror. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-editor - Rich Text Editor for Angular using ProseMirror. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-editor - Rich Text Editor for Angular using ProseMirror. (Table of contents / Third Party Components)
README
# NgxEditor
The Rich Text Editor for Angular, Built on ProseMirror
> 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