Package Exports

ngx-tiptap

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ngx-tiptap) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

NgxTiptap

Angular bindings for tiptap v2

demo on stackblitz | edit stackblitz

Installation

npm i ngx-tiptap

# or

yarn add ngx-tiptap

Note: This package just provides the bindings for angular. For configuring/customizing the editor, refer tiptap's official documentation.

For any issues with the editor. You may need to open the issue on tiptap's repository

Usage

Import the module

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { NgxTiptapModule } from 'ngx-tiptap';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule, NgxTiptapModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

Create an instance of the editor

import { Component } from '@angular/core';
import { Editor } from '@tiptap/core';
import { defaultExtensions } from '@tiptap/starter-kit';

@Component({
  selector: 'app-root',
  template: './app.component.html',
})
export class AppComponent {
  editor = new Editor({
    extensions: defaultExtensions(),
  });

  value = '<p>Hello, Tiptap!</p>'; // can be HTML or JSON, see https://www.tiptap.dev/api/editor#content
}

and in HTML

<tiptap [editor]="editor" [(ngModel)]="value"></tiptap>

Note: No styling is provided by default. You are in full control of how your editor looks. Refer tiptaps's styling guide for more information.

And, Since the editor is dynamically created you may need to set ViewEncapsulation to None apply the styles.

Options

outputFormat [json or html] - defaults to html.

You can get the json or html format from the editor directly as well.

Refer https://www.tiptap.dev/guide/output#export