NgxEditor

https://sibiraj-s.github.io/ngx-editor/
Admin
NgxEditor is a rich text editor for Angular built on ProseMirror, offering flexibility through...
Tokens:19,160
Snippets:73
Trust Score:8.3
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install NgxEditor with npm

Source: https://sibiraj-s.github.io/ngx-editor/quickstart

Installs the NgxEditor package using the npm package manager.

```Bash
npm install ngx-editor
```

--------------------------------

### Install NgxEditor with pnpm

Source: https://sibiraj-s.github.io/ngx-editor/quickstart

Installs the NgxEditor package using the pnpm package manager.

```Bash
pnpm install ngx-editor
```

--------------------------------

### Install NgxEditor with yarn

Source: https://sibiraj-s.github.io/ngx-editor/quickstart

Installs the NgxEditor package using the yarn package manager.

```Bash
yarn add ngx-editor
```

--------------------------------

### Basic NgxEditor Usage in Angular Component

Source: https://sibiraj-s.github.io/ngx-editor/quickstart

Demonstrates how to import and initialize NgxEditor in an Angular component, including lifecycle hooks for editor creation and destruction. Requires NgxEditorComponent to be imported.

```TypeScript
import { NgxEditorComponent, Editor } from'ngx-editor';


@Component({

selector: 'app-component',

templateUrl: 'app.component.html',

styleUrls: ['app.component.scss'],

standalone: true,

imports: [NgxEditorComponent],

})

exportclass AppComponentimplementsOnInit, OnDestroy {


html ='Hello world!';


editor:Editor;


ngOnInit():void {

this.editor=newEditor();

}


ngOnDestroy():void {

this.editor.destroy();

}

}
```

--------------------------------

### Example HTML for Migration

Source: https://sibiraj-s.github.io/ngx-editor/migrations/migration

This is an example of HTML content that might require migration to the NgxEditor's DOM schema. It features a `div` element with inline styling for background color, demonstrating a scenario where custom attribute handling is necessary.

```html
<divstyle="background: orange">

Example text with example custom container with inline style

</div>

```

--------------------------------

### Install NgxEditor with pnpm

Source: https://sibiraj-s.github.io/ngx-editor/introduction

Installs the NgxEditor library using the pnpm package manager.

```Bash
pnpm install ngx-editor
```

--------------------------------

### Setup WebSocket Server for Collaborative Editing (JavaScript)

Source: https://sibiraj-s.github.io/ngx-editor/examples/collab

This JavaScript snippet demonstrates a basic Node.js server setup for collaborative editing. It uses the 'ws' library for WebSocket connections and 'node-static' to serve static files. The `setupWSConnection` utility from 'y-websocket' is used to handle incoming connections and synchronize documents.

```javascript
const WebSocket = require('ws');
const http = require('http');
const StaticServer = require('node-static').Server;
const setupWSConnection = require('y-websocket/bin/utils.js').setupWSConnection;

const production = process.env.PRODUCTION != null;
const port = process.env.PORT || 8080;

const staticServer = new StaticServer('../', {
  cache: production ? 3600 : false,
  gzip: production,
});

const server = http.createServer((request, response) => {
  request
    .addListener('end', () => {
      staticServer.serve(request, response);
    })
    .resume();
});

const wss = new WebSocket.Server({ server });

wss.on('connection', (conn, req) =>
  setupWSConnection(conn, req, {
    gc: req.url.slice(1) !== 'prosemirror-versions',
  })
);

server.listen(port);

console.log(
  `Listening to http://localhost:${port}${production ? '(production)' : ''}`
);
```

--------------------------------

### Install NgxEditor with yarn

Source: https://sibiraj-s.github.io/ngx-editor/introduction

Installs the NgxEditor library using the yarn package manager.

```Bash
yarn add ngx-editor
```

--------------------------------

### Install NgxEditor with npm

Source: https://sibiraj-s.github.io/ngx-editor/introduction

Installs the NgxEditor library using the npm package manager.

```Bash
npm install ngx-editor
```

--------------------------------

### Bootstrap Application with NgxEditor

Source: https://sibiraj-s.github.io/ngx-editor/examples/full-featured-editor

Initializes the Angular application and configures routing and NgxEditor with custom localizations. This ensures the editor is ready with the specified language settings upon application startup.

```typescript
import { bootstrapApplication } from'@angular/platform-browser';



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



import { importProvidersFrom } from'@angular/core';



import { provideRouter } from'@angular/router';



import { routes } from'./app/app.routes';



import { NgxEditorModule } from'ngx-editor';



bootstrapApplication(AppComponent, {



providers: [



provideRouter(routes),



importProvidersFrom(



NgxEditorModule.forRoot({



locals: {

// menu



bold: 'Bold',



italic: 'Italic',



code: 'Code',



blockquote: 'Blockquote',



underline: 'Underline',



strike: 'Strike',



bullet_list: 'Bullet List',



ordered_list: 'Ordered List',



heading: 'Heading',



h1: 'Header 3',



h2: 'Header 2',



h3: 'Header 3',



h4: 'Header 4',



h5: 'Header 5',



h6: 'Header 6',



align_left: 'Left Align',



align_center: 'Center Align',



align_right: 'Right Align',



align_justify: 'Justify',



text_color: 'Text Color',



background_color: 'Background Color',



// popups, forms, others...



url: 'URL',



text: 'Text',



openInNewTab: 'Open in new tab',



insert: 'Insert',



altText: 'Alt Text',



title: 'Title',



remove: 'Remove',



enterValidUrl: 'Please enter a valid URL',



},



}),



),



],



}).catch((err)=> console.error(err));
```

--------------------------------

### NgxEditor Integration in Angular Template

Source: https://sibiraj-s.github.io/ngx-editor/quickstart

Shows how to use the NgxEditorComponent in an Angular template, binding the editor instance and using ngModel for data binding. Ensure FormsModule is imported for ngModel to work.

```HTML
<ngx-editor[editor]="editor"[ngModel]="html"></ngx-editor>
```

--------------------------------

### Configure NgxEditor Module

Source: https://sibiraj-s.github.io/ngx-editor/examples/full-featured-editor

Sets up the NgxEditor module with custom localizations for menu items and popups in the Angular application. This includes defining translations for various formatting options.

```typescript
import { NgModule } from'@angular/core';



import { FormsModule } from'@angular/forms';



import { NgxEditorModule, schema } from'ngx-editor';



import { schema } from'ngx-editor/schema';



@NgModule({



imports: [

FormsModule,



NgxEditorModule.forRoot({



locals: {

// menu



bold: 'Bold',



italic: 'Italic',



code: 'Code',



blockquote: 'Blockquote',



underline: 'Underline',



strike: 'Strike',



bullet_list: 'Bullet List',



ordered_list: 'Ordered List',



heading: 'Heading',



h1: 'Header 1',



h2: 'Header 2',



h3: 'Header 3',



h4: 'Header 4',



h5: 'Header 5',



h6: 'Header 6',



align_left: 'Left Align',



align_center: 'Center Align',



align_right: 'Right Align',



align_justify: 'Justify',



text_color: 'Text Color',



background_color: 'Background Color',



// popups, forms, others...



url: 'URL',



text: 'Text',



openInNewTab: 'Open in new tab',



insert: 'Insert',



altText: 'Alt Text',



title: 'Title',



remove: 'Remove',



enterValidUrl: 'Please enter a valid URL',



},



}),



],



})



exportclassAppModule {}
```

--------------------------------

### Create Schema for Mentions and Tags

Source: https://sibiraj-s.github.io/ngx-editor/examples/mentions

Defines a custom Prosemirror schema that includes nodes for mentions and tags by extending the base Ngx-Editor schema and integrating nodes from prosemirror-mentions.

```typescript
import { marks, schema as baseSchema } from'ngx-editor/schema';

import { Schema } from'prosemirror-model';

import { addMentionNodes, addTagNodes } from'prosemirror-mentions';

const schema = newSchema({

nodes: addTagNodes(addMentionNodes(baseSchema.spec.nodes)),

marks,

});

exportdefault schema;
```

--------------------------------

### Integrate CodeMirror in NgxEditor

Source: https://sibiraj-s.github.io/ngx-editor/examples/codemirror

This snippet shows how to integrate the CodeMirror editor into NgxEditor. It includes importing necessary modules from 'ngx-editor', 'prosemirror-codemirror-6', and '@codemirror/lang-javascript'. The example demonstrates creating a new CodeMirrorView with custom options, including JavaScript language support and minimal setup extensions.

```TypeScript
import { Editor } from'ngx-editor';



import { CodeMirrorView } from'prosemirror-codemirror-6';



import { minimalSetup } from'codemirror';



import { javascript } from'@codemirror/lang-javascript';



import schema from'./schema.ts';



newEditor({


schema,



nodeViews: {



code_mirror: (



// first define schema `code_mirror`. see schema section



node:ProseMirrorNode,



view:EditorView,



getPos:()=>number,



) => {



returnnewCodeMirrorView({



node,



view,



getPos,



cmOptions: {



extensions: [minimalSetup, javascript()],



},


});



},


},


});
```

--------------------------------

### HTML Template for NgxEditor Integration

Source: https://sibiraj-s.github.io/ngx-editor/examples/full-featured-editor

Provides the HTML structure for embedding the NgxEditor component within an Angular form. It includes the editor menu and the editor itself, bound to a form control.

```html
<form[formGroup]="form">



<divclass="NgxEditor__Wrapper">



<ngx-editor-menu[editor]="editor"[toolbar]="toolbar"></ngx-editor-menu>



<ngx-editor[editor]="editor"formControlName="editorContent"></ngx-editor>



</div>



</form>
```

--------------------------------

### Apply Styles for Mentions and Tags UI

Source: https://sibiraj-s.github.io/ngx-editor/examples/mentions

Provides CSS styles to visually represent mentions and tags within the editor and their suggestion dropdowns. This includes styling for the mention/tag nodes themselves and the suggestion list items.

```css
.prosemirror-mention-node {

color: blue!important;

text-decoration: underline!important;

}

.prosemirror-tag-node {

color: gray!important;

font-style: italic;

}

.suggestion-item-list {

background-color: #f9f9f9;

min-width: 160px;

box-shadow: 0px8px16px0pxrgba(0, 0, 0, 0.2);

z-index: 1;

}

.suggestion-item {

color: black;

padding: 12px16px;

text-decoration: none;

display: block;

}

.suggestion-item:hover {

background-color: #f1f1f1;

cursor: pointer;

}
```

--------------------------------

### Angular Component for NgxEditor

Source: https://sibiraj-s.github.io/ngx-editor/examples/full-featured-editor

Defines an Angular component that integrates NgxEditor, including its toolbar configuration and form control binding for reactive forms. It manages the editor's lifecycle and content.

```typescript
import { Component, OnInit, OnDestroy, ViewEncapsulation } from'@angular/core';



import { AbstractControl, FormControl, FormGroup } from'@angular/forms';



import {



Validators,



NgxEditorComponent,



NgxEditorMenuComponent,



Editor,



Toolbar,



} from'ngx-editor';



@Component({



selector: 'app-root',



templateUrl: 'app.component.html',



styleUrls: ['app.component.scss'],



encapsulation: ViewEncapsulation.None,



standalone: true,



imports: [NgxEditorComponent, NgxEditorMenuComponent],



})



exportclassAppComponentimplementsOnInit, OnDestroy {



editor:Editor;



toolbar:Toolbar= [



['bold', 'italic'],



['underline', 'strike'],



['code', 'blockquote'],



['ordered_list', 'bullet_list'],



[{ heading: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] }],



['link', 'image'],



['text_color', 'background_color'],



['align_left', 'align_center', 'align_right', 'align_justify'],



];



form =newFormGroup({



editorContent: newFormControl('', Validators.required()),



});



ngOnInit():void {



this.editor=newEditor();



}



ngOnDestroy():void {



this.editor.destroy();



}



}
```

--------------------------------

### Include Plugins for Mentions and Tags

Source: https://sibiraj-s.github.io/ngx-editor/examples/mentions

Integrates the `prosemirror-mentions` plugin into Ngx-Editor. It configures how suggestions are fetched (for mentions and tags) and how they are rendered in the UI, including handling user input and asynchronous data retrieval.

```typescript
import { Plugin } from'prosemirror-state';

import { getMentionsPlugin } from'prosemirror-mentions';

/**
* IMPORTANT: outer div's "suggestion-item-list" class is mandatory. The plugin uses this class for querying.
* IMPORTANT: inner div's "suggestion-item" class is mandatory too for the same reasons
*/

var getMentionSuggestionsHTML = (items) =>
'<div class="suggestion-item-list"' +
items
.map((i)=>'<div class="suggestion-item">'+ i.name+'</div>')
.join('') +
'</div>';

/**
* IMPORTANT: outer div's "suggestion-item-list" class is mandatory. The plugin uses this class for querying.
* IMPORTANT: inner div's "suggestion-item" class is mandatory too for the same reasons
*/

var getTagSuggestionsHTML = (items) =>
'<div class="suggestion-item-list"' +
items
.map((i)=>'<div class="suggestion-item">'+ i.tag+'</div>')
.join('') +
'</div>';

const users = [
{
name: 'John Doe',
id: '101',
email: 'joe@gmail.com',
},
{
name: 'Joe Lewis',
id: '102',
email: 'lewis@gmail.com',
},
];

var mentionPlugin = getMentionsPlugin({

getSuggestions: (type, text, done) => {

setTimeout(() => {

if (type === 'mention') {

// autocomplete : filter list from text and return 5 users

done(
users
.filter((x) => x.name.toLowerCase().includes(text.toLowerCase()))
.splice(0, 5),
);

} else {

// pass dummy tag suggestions

done([
{

tag: 'WikiLeaks',

},
{

tag: 'NetNeutrality',

},
]);

}

}, 0);

},

getSuggestionsHTML: (items, type) => {

if (type === 'mention') {

return getMentionSuggestionsHTML(items);

} else if (type === 'tag') {

return getTagSuggestionsHTML(items);

} else {

return null;

}

},

});

const getPlugins = ():Plugin[] => {

const plugins = [mentionPlugin];

return plugins;

};

exportdefaultgetPlugins();
```

--------------------------------

### Image plugin included by default

Source: https://sibiraj-s.github.io/ngx-editor/migrations/migration-7-8

This code example demonstrates how the image plugin is now included by default in NgxEditor, and it should be removed from the plugins array during initialization.

```typescript
import { image } from'ngx-editor';



newEditor({



plugins: [



image(), // remove



],



});
```

--------------------------------

### NgxEditor Validators

Source: https://sibiraj-s.github.io/ngx-editor/examples/reactive-forms

This code demonstrates how to use NgxEditor's built-in validators. It shows examples for required fields, maximum length, and minimum length, including how to pass a custom schema if needed.

```javascript
import { Validators } from'ngx-editor';



Validators.required(schema); // pass schema if you are using a custom schema else leave it empty



Validators.maxLength(maxLength, schema);



Validators.minLength(minLength, schema);
```

--------------------------------

### NgxEditor Component Setup

Source: https://sibiraj-s.github.io/ngx-editor/examples/reactive-forms

This TypeScript code demonstrates how to set up an Angular component for use with NgxEditor and Reactive Forms. It includes initializing the editor instance and defining a FormGroup with a FormControl for the editor content, applying the Validators.required validator.

```typescript
import {
  Component,
  OnInit,
  OnDestroy
} from'@angular/core';



import {
  FormGroup,
  FormControl
} from'@angular/forms';



import {
  Validators
} from'ngx-editor';



@Component({



selector: 'app-root',



templateUrl: 'app.component.html',



styleUrls: ['app.component.scss'],



})



exportclassAppComponentimplementsOnInit, OnDestroy {



form =newFormGroup({



editorContent: newFormControl(null, [Validators.required()]),



});



ngOnInit():void {



this.editor=newEditor();



}



ngOnDestroy():void {



this.editor.destroy();



}



}
```

--------------------------------

### Include Floating Menu with Custom Content in Template

Source: https://sibiraj-s.github.io/ngx-editor/examples/floating-menu

This example demonstrates how to include the NgxEditor floating menu with custom menu items. It wraps the editor and floating menu within a div and includes a custom ngx-editor-menu.

```html
<divclass="editor">


<ngx-editor[editor]="editor"></ngx-editor>


<ngx-editor-floating-menu[editor]="editor">


<ngx-editor-menu[editor]="editor"></ngx-editor-menu>


</ngx-editor-floating-menu>


</div>
```

--------------------------------

### Convert HTML Content to NgxEditor Document

Source: https://sibiraj-s.github.io/ngx-editor/migrations/migration

This snippet shows how to convert raw HTML content into an NgxEditor document using a custom schema. The `toDoc` function parses the HTML string and applies the provided schema for accurate representation within the editor. This is a crucial step when migrating content or initializing the editor with existing HTML.

```typescript
import { toHTML, toDoc } from'ngx-editor';

const doc = toDoc(content, schema); // schema is your custom schema.

```

--------------------------------

### ngx-editor Floating Menu Integration

Source: https://sibiraj-s.github.io/ngx-editor/menu

Examples demonstrating how to integrate the ngx-editor floating menu component into an Angular application. The floating menu can be placed directly within the ngx-editor component or as a sibling element.

```html
<ngx-editor [editor]="editor">
  <ngx-editor-floating-menu [editor]="editor"></ngx-editor-floating-menu>
</ngx-editor>
```

```html
<div class="editor">
  <ngx-editor [editor]="editor"></ngx-editor>
  <ngx-editor-floating-menu [editor]="editor"></ngx-editor-floating-menu>
</div>
```

--------------------------------

### Extend NgxEditor Schema with Custom Nodes

Source: https://sibiraj-s.github.io/ngx-editor/migrations/migration

This code demonstrates how to extend the default NgxEditor schema by adding a custom node specification, such as the `paragraph` node defined previously. It merges the custom nodes with the basic nodes and marks provided by the library to create a new schema that includes both default and custom parsing and rendering capabilities.

```typescript
import { nodes as basicNodes, marks } from'ngx-editor';

const nodes = Object.assign({}, basicNodes, {
paragraph,
});

const schema = newSchema({
nodes,
marks,
});

```

--------------------------------

### Convert NgxEditor Document to HTML

Source: https://sibiraj-s.github.io/ngx-editor/migrations/migration

This code illustrates how to convert an NgxEditor document back into an HTML string using a specified schema. The `toHTML` function serializes the editor's internal document representation into HTML, preserving the structure and attributes defined in the schema. This is useful for saving or displaying the editor's content.

```typescript
const html = toHTML(doc, schema); // custom schema

```

--------------------------------

### Custom Menu Item Template for NgxEditor

Source: https://sibiraj-s.github.io/ngx-editor/menu

Defines the HTML structure for a custom menu item within the NgxEditor. This example shows a 'CodeMirror' menu item with styling and click event handling, including active and disabled states.

```html
<div class="NgxEditor__Seperator"></div>
<div
  class="NgxEditor__MenuItem NgxEditor__MenuItem--Text"
  (mousedown)="onClick($event)"
  [ngClass]="{'NgxEditor__MenuItem--Active': isActive, 'NgxEditor--Disabled': isDisabled}">
  CodeMirror
</div>
```

--------------------------------

### Create Custom Code Block Schema for NgxEditor

Source: https://sibiraj-s.github.io/ngx-editor/schema

Provides a detailed example of creating a custom node specification for a code block in NgxEditor using ProseMirror. It defines the node's content, marks, DOM representation, and how to integrate it into the editor's schema.

```TypeScript
import { nodes as basicNodes, marks } from'ngx-editor';



import { Schema, NodeSpec } from'prosemirror-model';



const codeMirror:NodeSpec = {


content: 'text*', 


marks: '', 


group: 'block',


code: true,


defining: true,


isolating: true,


parseDOM: [


{


tag: 'pre',


preserveWhitespace: 'full',


},


],


toDOM():DOMOutputSpec {


return ['pre', ['code', 0]];


},


};



const nodes = Object.assign({}, basicNodes, {


code_mirror: codeMirror,


});



const schema = newSchema({


nodes,


marks,


});



exportdefault schema;
```

--------------------------------

### Convert HTML Div to Paragraph with Background Attribute

Source: https://sibiraj-s.github.io/ngx-editor/migrations/migration

This snippet demonstrates how to define a custom paragraph node specification for NgxEditor. It includes parsing `div` elements, extracting `background` and `align` attributes from inline styles or HTML attributes, and converting them back to `p` tags with appropriate styles. This is useful for migrating content with custom styling.

```typescript
const paragraph:NodeSpec = {
content: 'inline*', 
group: 'block',
attrs: {
align: {
default: null,
},
background: {
default: null,
},
},
parseDOM: [
{
tag: 'p',
getAttrs(dom:HTMLElement):Record<string, any> {
const { textAlign } = dom.style;
constalign = dom.getAttribute('align') || textAlign || null;
return {
align,
};
},
},
{
tag: 'div', // this will parse div to the editor required format
getAttrs(dom:HTMLElement):Record<string, any> {
const { textAlign, background } = dom.style; // you can add required properties here.
constalign = dom.getAttribute('align') || textAlign || null;
return {
align,
background,
};
},
},
],
toDOM(node):DOMOutputSpec {
const { align, background } = node.attrs; // get and apply required attributes
conststyles:Partial<CSSStyleDeclaration> = {
textAlign: align !== 'left' ? align : null,
background,
};
conststyle = toStyleString(styles) || null;
return ['p', { style }, 0];
},
};

```

--------------------------------

### Apply Text Color and Insert Text

Source: https://sibiraj-s.github.io/ngx-editor/commands

Demonstrates how to chain commands to change text color to red, insert 'Hello world!', focus the editor, and scroll it into view. The `exec()` method must be called at the end to apply all changes.

```typescript
this.editor.commands
.textColor('red')
.insertText('Hello world!')
.focus()
.scrollIntoView()
.exec();
```

--------------------------------

### Initialize NgxEditor

Source: https://sibiraj-s.github.io/ngx-editor/configuration

Initializes the NgxEditor with specified content, plugins, schema, and other configuration options like history, keyboard shortcuts, and input rules.

```typescript
import { Editor } from'ngx-editor';



editor =newEditor({



content: '',



plugins: [],



schema,



nodeViews: {},



history: true,



keyboardShortcuts: true,



inputRules: true,



});
```

--------------------------------

### Initialize NgxEditor Component in Angular

Source: https://sibiraj-s.github.io/ngx-editor/introduction

Demonstrates how to import and initialize the NgxEditorComponent and NgxEditorMenuComponent in an Angular component. It includes setting up the editor instance and handling its lifecycle methods.

```TypeScript
import { NgxEditorComponent, NgxEditorMenuComponent, Editor } from'ngx-editor';


@Component({

selector: 'editor-component',

templateUrl: 'editor.component.html',

styleUrls: ['editor.component.scss'],

standalone: true,

imports: [NgxEditorComponent, NgxEditorMenuComponent],

})

exportclassNgxEditorComponentimplementsOnInit, OnDestroy {

editor:Editor;

html:'';

ngOnInit():void {

this.editor=newEditor();

}

// make sure to destory the editor

ngOnDestroy():void {

this.editor.destroy();

}

}
```

--------------------------------

### Execute Editor Commands with NgxEditor

Source: https://sibiraj-s.github.io/ngx-editor/introduction

Illustrates how to chain and execute various commands on the NgxEditor instance, such as changing text color, inserting text, focusing the editor, and scrolling into view.

```TypeScript
this.editor.commands

.textColor('red')

.insertText('Hello world!')

.focus()

.scrollIntoView()

.exec();
```

--------------------------------

### Create NgxEditor Instance

Source: https://sibiraj-s.github.io/ngx-editor/editor

Demonstrates how to create a new instance of the NgxEditor with various configuration options. It imports necessary components from 'ngx-editor' and 'ngx-editor/schema'.

```TypeScript
import { Editor } from'ngx-editor';
import { schema } from'ngx-editor/schema';

const editor = newEditor({

content: '',

history: true,

keyboardShortcuts: true,

inputRules: true,

plugins: [], //https://prosemirror.net/docs/guide/#state

schema, //https://prosemirror.net/examples/schema/

nodeViews: {}, //https://prosemirror.net/docs/guide/#state,

attributes: {}, // https://prosemirror.net/docs/ref/#view.EditorProps.attributes

linkValidationPattern: '',

parseOptions: {}, // https://prosemirror.net/docs/ref/#model.ParseOptions

});
```

--------------------------------

### Configure NgxEditorModule with Locals and Icons

Source: https://sibiraj-s.github.io/ngx-editor/introduction

Shows how to configure the `NgxEditorModule` with custom locals for toolbar items and custom icons using image sources.

```TypeScript
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="">',

},

});
```

--------------------------------

### Initialize NgxEditor with Schema

Source: https://sibiraj-s.github.io/ngx-editor/schema

Demonstrates how to initialize the NgxEditor component by providing a schema configuration. This is a fundamental step for customizing the editor's behavior and structure.

```TypeScript
import { Editor } from'ngx-editor';



newEditor({


schema,


});
```

--------------------------------

### Alternative Floating Menu Integration

Source: https://sibiraj-s.github.io/ngx-editor/examples/floating-menu

An alternative way to structure the template for NgxEditor and its floating menu, placing them within a container div.

```html
<divclass="editor">


<ngx-editor[editor]="editor"></ngx-editor>


<ngx-editor-floating-menu[editor]="editor"></ngx-editor-floating-menu>


</div>
```

--------------------------------

### Enable Keyboard Shortcuts in NgxEditor

Source: https://sibiraj-s.github.io/ngx-editor/examples/shortcuts

Demonstrates how to enable default keyboard shortcuts in NgxEditor by setting the `keyboardShortcuts` option to `true` during editor initialization. This configuration allows users to utilize predefined key combinations for various text formatting actions.

```TypeScript
import { Editor } from'ngx-editor';



newEditor({



keyboardShortcuts: true,



});
```

--------------------------------

### NgxEditor HTML Template Integration

Source: https://sibiraj-s.github.io/ngx-editor/introduction

Shows how to integrate the NgxEditorComponent and NgxEditorMenuComponent into an Angular component's HTML template, binding the editor instance and ngModel.

```HTML
<divclass="NgxEditor__Wrapper">

<ngx-editor-menu[editor]="editor"></ngx-editor-menu>

<ngx-editor

[editor]="editor"

[ngModel]="html"

[disabled]="false"

[placeholder]="'Type here...'"

></ngx-editor>

</div>
```

--------------------------------

### NgxEditor Menu Configuration in TypeScript

Source: https://sibiraj-s.github.io/ngx-editor/menu

Configures the toolbar for the NgxEditor component, defining available formatting options such as bold, italic, headings, lists, and more. It also sets up color presets for the color picker.

```typescript
export class AppComponent implements OnInit, OnDestroy {
  editor: Editor;
  toolbar: Toolbar = [
    ['bold', 'italic'],
    ['underline', 'strike'],
    ['code', 'blockquote'],
    ['ordered_list', 'bullet_list'],
    [{ heading: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] }],
    ['link', 'image'],
    ['text_color', 'background_color'],
    ['align_left', 'align_center', 'align_right', 'align_justify'],
    ['horizontal_rule', 'format_clear', 'indent', 'outdent'],
    ['superscript', 'subscript'],
    ['undo', 'redo']
  ];
  colorPresets = ['red', '#FF0000', 'rgb(255, 0, 0)'];

  ngOnInit(): void {
    this.editor = new Editor();
  }

  ngOnDestroy(): void {
    this.editor.destroy();
  }
}
```

--------------------------------

### Configure NgxEditor Menu (v5 to v6)

Source: https://sibiraj-s.github.io/ngx-editor/migrations/migration-5-6

Demonstrates how to configure the menu in NgxEditor when migrating from v5 to v6. In v6, the menu is a separate component that needs to be included manually.

```TypeScript
import { NgxEditorModule } from'ngx-editor';



NgxEditorModule.forRoot({



menu: {



toolbar: [],



colorPresets: [],



},



});
```

```TypeScript
exportclass AppComponentimplementsOnInit, OnDestroy {





isProdMode = environment.production;





editor:Editor;





toolbar:Toolbar= [['bold', 'italic']];





colorPresets = ['red', 'blue', 'green'];





ngOnInit():void {





this.editor=newEditor();



}





ngOnDestroy():void {





this.editor.destroy();



}



}
```

```HTML
<ngx-editor-menu



[editor]="editor"



[toolbar]="toolbar"



[colorPresets]="colorPresets"



>



</ngx-editor-menu>
```

--------------------------------

### NgxEditor Menu Integration in HTML

Source: https://sibiraj-s.github.io/ngx-editor/menu

Integrates the NgxEditor menu component into the application's HTML template, binding the editor instance and toolbar configuration. This allows the menu to control the editor's formatting.

```html
<ngx-editor-menu
  [editor]="editor"
  [toolbar]="toolbar"
  [colorPresets]="colorPresets">
</ngx-editor-menu>
```

--------------------------------

### Register Plugin with NgxEditor

Source: https://sibiraj-s.github.io/ngx-editor/editor

Illustrates how to register a new ProseMirror plugin with the NgxEditor instance. It includes importing `Plugin` and `PluginKey` from 'prosemirror-state'.

```TypeScript
import { Plugin, PluginKey } from'prosemirror-state';

const plugin = newPlugin({

key: newPluginKey('plugin'),

});

editor.registerPlugin(plugin);
```

--------------------------------

### Include Default Floating Menu in Template

Source: https://sibiraj-s.github.io/ngx-editor/examples/floating-menu

This snippet shows the basic integration of the NgxEditor and its default floating menu within an Angular component's template. It requires the 'editor' property to be defined in the component.

```html
<ngx-editor[editor]="editor">


<ngx-editor-floating-menu[editor]="editor"></ngx-editor-floating-menu>


</ngx-editor>
```

--------------------------------

### Custom Menu Item Integration in NgxEditor

Source: https://sibiraj-s.github.io/ngx-editor/menu

Demonstrates how to add a custom menu item to the NgxEditor toolbar. It involves creating a template reference for the custom item and passing it to the `ngx-editor-menu` component via the `customMenuRef` input.

```html
<ngx-editor-menu
  [editor]="editor"
  [toolbar]="toolbar"
  [customMenuRef]="customMenu">
</ngx-editor-menu>

<ng-template #customMenu>
  <app-custom-menu [editor]="editor"></app-custom-menu>
</ng-template>
```

--------------------------------

### Removed Editor.enable and Editor.disable methods

Source: https://sibiraj-s.github.io/ngx-editor/migrations/migration-7-8

This code illustrates the removal of `editor.enable()` and `editor.disable()` methods in NgxEditor. The functionality is now controlled by the `enabled` prop on the `<ngx-editor>` component.

```typescript
const editor = newEditor({});



editor.enable(); // enable edititng



editor.disable(); // disable editing
```

```html
<ngx-editor[editor]="editor"enabled="true"></ngx-editor>
```

--------------------------------

### Angular Component with NgxEditor and NgModel

Source: https://sibiraj-s.github.io/ngx-editor/examples/ng-model

This TypeScript code demonstrates an Angular component that integrates with NgxEditor using NgModel. It includes methods for initializing the editor, handling HTML changes, and destroying the editor instance.

```typescript
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Editor } from 'ngx-editor';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  html ='';
  editor: Editor;

  onChange(html:object) {
    this.html='';
  }

  ngOnInit():void {
    this.editor=new Editor();
  }

  ngOnDestroy():void {
    this.editor.destroy();
  }
}
```

--------------------------------

### Customizing ngx-editor Icons

Source: https://sibiraj-s.github.io/ngx-editor/menu

Demonstrates how to customize icons in ngx-editor by providing custom SVG or image elements in the `forRoot` configuration. This allows replacing default icons with custom ones for various text formatting options.

```javascript
NgxEditorModule.forRoot({
  icons: {
    bold: '<img src="https://img.icons8.com/tiny-glyph/16/null/bold.png" width="15" height="15"/>',
  },
});
```

--------------------------------

### Configure NgxEditor Locals

Source: https://sibiraj-s.github.io/ngx-editor/configuration

Configures the localization settings for NgxEditor, allowing customization of text for various menu items, popups, and forms.

```javascript
import { schema } from'ngx-editor/schema';



NgxEditorModule.forRoot({



locals: {



// menu



bold: 'Bold',



italic: 'Italic',



code: 'Code',



underline: 'Underline',



strike: 'Strike',



blockquote: 'Blockquote',



bullet_list: 'Bullet List',



ordered_list: 'Ordered List',



heading: 'Heading',



h1: 'Header 1',



h2: 'Header 2',



h3: 'Header 3',



h4: 'Header 4',



h5: 'Header 5',



h6: 'Header 6',



align_left: 'Left Align',



align_center: 'Center Align',



align_right: 'Right Align',



align_justify: 'Justify',



text_color: 'Text Color',



background_color: 'Background Color',



horizontal_rule: 'Horizontal rule',



format_clear: 'Clear Formatting',



insertLink: 'Insert Link',



removeLink: 'Remove Link',



insertImage: 'Insert Image',



indent: 'Increase Indent',



outdent: 'Decrease Indent',



superscript: 'Superscript',



subscript: 'Subscript',



undo: 'Undo',



redo: 'Redo',



// pupups, forms, others...



url: 'URL',



text: 'Text',



openInNewTab: 'Open in new tab',



insert: 'Insert',



altText: 'Alt Text',



title: 'Title',



remove: 'Remove',



enterValidUrl: 'Please enter a valid URL',



},



});
```

--------------------------------

### Convert JSON Doc to HTML with NgxEditor

Source: https://sibiraj-s.github.io/ngx-editor/introduction

Provides a code snippet for converting a JSON document to HTML using the `toHTML` function from the `ngx-editor` library. The `schema` parameter is optional.

```TypeScript
import { toHTML } from'ngx-editor';


const html = toHTML(jsonDoc, schema); // schema is optional
```

--------------------------------

### Enable Editor History

Source: https://sibiraj-s.github.io/ngx-editor/examples/history

This snippet shows how to enable the history feature for the NgxEditor by setting the 'history' option to true during initialization. This allows for undo/redo functionality.

```TypeScript
import { Editor } from'ngx-editor';



newEditor({


history: true,

});
```

--------------------------------

### Convert HTML to JSON Doc with NgxEditor

Source: https://sibiraj-s.github.io/ngx-editor/introduction

Demonstrates how to convert an HTML string to a JSON document using the `toDoc` function from the `ngx-editor` library. This is optional as the editor accepts HTML input directly.

```TypeScript
import { toDoc } from'ngx-editor';


const jsonDoc = toDoc(html);
```

--------------------------------

### Set Editor Content

Source: https://sibiraj-s.github.io/ngx-editor/editor

Shows how to programmatically set the content of the NgxEditor instance. The content can be provided as an HTML string or a JSON document.

```JavaScript
editor.setContent(value);
```

--------------------------------

### Update ProseMirror Configuration (v5 to v6)

Source: https://sibiraj-s.github.io/ngx-editor/migrations/migration-5-6

Illustrates the modification required for ProseMirror configuration when migrating NgxEditor from v5 to v6. The configuration is now passed directly to the `newEditor` function.

```TypeScript
import { NgxEditorModule } from'ngx-editor';



NgxEditorModule.forRoot({



plugins: [],



schema: {},



nodeViews: {},



});
```

```TypeScript
import { Editor } from'ngx-editor';



newEditor({



plugins: [],



schema: {},



nodeViews: {},



});
```

--------------------------------

### Configure Input Rules in NgxEditor

Source: https://sibiraj-s.github.io/ngx-editor/examples/input-rules

This snippet shows how to enable default input rules in NgxEditor by setting the `inputRules` property to `true` within the editor configuration. This leverages ProseMirror's input rule system.

```TypeScript
import { Editor } from'ngx-editor';



newEditor({



inputRules: true,



});
```

--------------------------------

### Configure NgxEditor for Collaborative Editing (TypeScript)

Source: https://sibiraj-s.github.io/ngx-editor/examples/collab

This snippet shows the client-side configuration for NgxEditor to enable collaborative editing. It utilizes yjs for document synchronization and y-websocket for real-time communication. Key plugins like ySyncPlugin, yCursorPlugin, and yUndoPlugin are included, along with Prosemirror keymaps for undo and redo functionality.

```typescript
import * as Y from 'yjs';
import { WebsocketProvider } from 'y-websocket';
import {
  ySyncPlugin,
  yCursorPlugin,
  yUndoPlugin,
  undo,
  redo,
} from 'y-prosemirror';
import { Editor } from 'ngx-editor';
import { keymap } from 'prosemirror-keymap';
import { history } from 'prosemirror-history';

const ydoc = new Y.Doc();

const provider = new WebsocketProvider(
  'wss://prosemirror-collab.glitch.me/',
  'prosemirror-demo',
  ydoc
);

const type = ydoc.getXmlFragment('prosemirror');

new Editor({
  history: false, // include the history plugin manually
  plugins: [
    history(),
    ySyncPlugin(type),
    yCursorPlugin(provider.awareness),
    yUndoPlugin(),
    keymap({
      'Mod-z': undo,
      'Mod-y': redo,
      'Mod-Shift-z': redo,
    }),
  ],
});
```

--------------------------------

### Configure NgxEditor Module

Source: https://sibiraj-s.github.io/ngx-editor/examples/reactive-forms

This snippet shows the necessary imports and NgModule configuration to include NgxEditor in an Angular application using Reactive Forms. It imports CommonModule, BrowserModule, FormsModule, ReactiveFormsModule, and NgxEditorModule.

```typescript
import {
  CommonModule
} from'@angular/common';



import {
  BrowserModule
} from'@angular/platform-browser';



import {
  NgModule
} from'@angular/core';



import {
  FormsModule,
  ReactiveFormsModule
} from'@angular/forms';



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



import {
  NgxEditorModule
} from'ngx-editor';



@NgModule({



declarations: [AppComponent],



imports: [



CommonModule,



BrowserModule,



FormsModule,



ReactiveFormsModule,



NgxEditorModule,



],



bootstrap: [AppComponent],



})



exportclassAppModule {}
```

--------------------------------

### Rename Editor.onUpdate to Editor.update

Source: https://sibiraj-s.github.io/ngx-editor/migrations/migration-7-8

This code illustrates the renaming of the `onUpdate` subscription to `update` for managing editor updates in NgxEditor.

```typescript
const editor = newEditor();



editor.onUpdate.subscribe(()=> {});
```

```typescript
const editor = newEditor();



editor.update.subscribe(()=> {});
```
Tokens:
Raw