ngx-editor
    TypeScript icon, indicating that this package has built-in type declarations

    12.0.0 • Public • Published

    NgxEditor

    ngxEditor

    Rich Text Editor for angular using ProseMirror

    Tests npm version npm npm licence Open in Visual Studio Code

    Getting Started

    demo | edit on stackblitz | documentation | migrating from v4 | migrating from other editors

    Installation

    Install via Package managers such as npm or yarn

    npm install ngx-editor --save
    # 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

    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 to be used in the editor

    NgxEditorModule.forRoot({
      locals: {
        bold: 'Bold',
        italic: 'Italic',
        code: 'Code',
        underline: 'Underline',
        // ...
      },
    });

    Browser Compatibility

    Mostly works on all Evergreen-Browsers like

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

    Angular Compatibility

    Angular 12+.

    Collaborative Editing

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

    Icons

    Icons are from https://material.io/resources/icons/

    Contributing

    All contributions are welcome. See CONTRIBUTING.md to get started.

    Install

    npm i ngx-editor

    DownloadsWeekly Downloads

    12,037

    Version

    12.0.0

    License

    MIT

    Unpacked Size

    1.25 MB

    Total Files

    211

    Last publish

    Collaborators

    • sibiraj-s