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
orhtml
] - 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
Extensions
Refer: https://www.tiptap.dev/api/extensions
Floating Menu
This will make a contextual menu appear near a selection of text.
The markup and styling are totally up to you.
<tiptap-editor [editor]="editor"></tiptap-editor>
<tiptap-floating-menu [editor]="editor">
<!-- Anything that should be rendered inside floating menu -->
</tiptap-floating-menu>
Refer: https://www.tiptap.dev/api/extensions/floating-menu
Bubble Menu
This will make a contextual menu appear near a selection of text. Use it to let users apply marks to their text selection.
The markup and styling are totally up to you.
<tiptap-editor [editor]="editor"></tiptap-editor>
<tiptap-bubble-menu [editor]="editor">
<!-- Anything that should be rendered inside bubble menu -->
</tiptap-bubble-menu>
Refer: https://www.tiptap.dev/api/extensions/bubble-menu
AngularNodeViewRenderer
This enables rendering Angular Components as NodeViews.
Create a Node Extension
import { Injector } from '@angular/core';
import { Node, mergeAttributes } from '@tiptap/core';
import { AngularNodeViewRenderer } from 'ngx-tiptap';
import { NodeviewCounterComponent } from './nodeview-counter/nodeview-counter.component';
const AngularExtension = (injector: Injector): Node => {
return Node.create({
// ...configuration
addNodeView() {
return AngularNodeViewRenderer(NodeviewCounterComponent, { injector });
},
});
};
export default AngularExtension;
Create a Component
import { Component } from '@angular/core';
import { AngularNodeViewComponent } from 'ngx-tiptap';
@Component({
selector: 'app-nodeview-counter',
})
export class NodeviewCounterComponent extends AngularNodeViewComponent {
increment(): void {
this.props.updateAttributes({
count: this.props.node.attrs.count + 1,
});
}
}
Use the extension
import { Component, Injector, OnInit, ViewEncapsulation } from '@angular/core';
import { Editor } from '@tiptap/core';
import { defaultExtensions } from '@tiptap/starter-kit';
import AngularExtension from './AngularExtension';
export class AppComponent implements OnInit {
editorA: Editor;
constructor(private injector: Injector) {}
ngOnInit(): void {
this.editorA = new Editor({
content: `
<p>This is still the text editor you’re used to, but enriched with node views.</p>
<angular-component-counter count="0"></angular-component-counter>
`,
extensions: [...defaultExtensions(), AngularExtension(this.injector)],
editorProps: {
attributes: {
class: 'p-2 border-black focus:border-blue-700 border-2 rounded-md outline-none',
},
},
});
}
}
Access/Update Attributes
You will recieve attribues
and updateAttributes
via Input. You can access it directly like this.
this.props.node.attrs;
To update the attributes
this.props.updateAttributes({
count: this.props.node.attrs.count + 1,
});
Contributing
All types of contributions are welcome. See [CONTRIBUTING.md][./.github/contributing.md] to get started.