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
demo | edit on stackblitz | documentation | migrating from other editors
Install via Package managers such as npm or yarn
npm install ngx-editor --save
# or
yarn add ngx-editor
Note: By default the editor comes with minimal features. Refer the demo and documentation for more details and examples.
Import ngx-editor
module
import { NgxEditorModule } from 'ngx-editor';
@NgModule({
imports: [NgxEditorModule],
})
export class AppModule {}
Component
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
<div class="NgxEditor__Wrapper">
<ngx-editor-menu [editor]="editor"> </ngx-editor-menu>
<ngx-editor [editor]="editor" [ngModel]="html" [disabled]="false" [placeholder]="'Type here...'"></ngx-editor>
</div>
Note: Input can be a HTML string or a jsonDoc
If using reactive forms, enabling and disabling of the component should be accomplished by enabling or disabling the parent form control rather than through the html attribute. For example:
if(this.canEdit) this.formControl.enable();
else this.formControl.disable();
Where
<div class="NgxEditor__Wrapper" [ngClass]="{'hide-style': hideStyle(canEdit)}">
<ngx-editor-menu [editor]="editor" [toolbar]='getToolbar()' *ngIf='canEdit'> </ngx-editor-menu>
<ngx-editor
[editor]="editor"
[formControl]='formControl'
[placeholder]='placeholder'
></ngx-editor>
</div>
If the Input to the component is HTML, output will be HTML. To manually convert json output from the editor to html
import { toHTML } from 'ngx-editor';
const html = toHTML(jsonDoc, schema); // schema is optional
Or to convert HTML to json. Optional, as Editor will accept HTML input
import { toDoc } from 'ngx-editor';
const jsonDoc = toDoc(html);
this.editor.commands.textColor('red').insertText('Hello world!').focus().scrollIntoView().exec();
Run exec
to apply the changes to the editor.
You can specify locals to be used in the editor
NgxEditorModule.forRoot({
locals: {
bold: 'Bold',
italic: 'Italic',
code: 'Code',
underline: 'Underline',
// ...
},
});
Mostly works on all Evergreen-Browsers like
- Google Chrome
- Microsoft Edge
- Mozilla Firefox
- Safari
- Opera
Angular 14+.
See https://sibiraj-s.github.io/ngx-editor/#/collab
Icons are from https://fonts.google.com/icons
All contributions are welcome. See CONTRIBUTING.md to get started.