Introduction
Getting Started
demo | edit on stackblitz | documentation | migrating from other editors
Installation
Install via Package managers such as npm or pnpm or yarn
npm install ngx-editor
pnpm install ngx-editor
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
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
Working with HTML
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);
Commands
this.editor.commands .textColor('red') .insertText('Hello world!') .focus() .scrollIntoView() .exec();
Run exec
to apply the changes to the editor.
Optional Configuration
You can specify locals and icons to be used in the editor
NgxEditorModule.forRoot({ locals: { bold: 'Bold', italic: 'Italic', code: 'Code', underline: 'Underline', // ... }, icons: { bold: '<img src="https://example.com/icon.png" width="15" height="15" alt="">', },});
Browser Compatibility
Mostly works on all Evergreen-Browsers like
- Google Chrome
- Microsoft Edge
- Mozilla Firefox
- Opera
- Safari