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 富文本编辑器)  (基于 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