ngx-tui

Angular 2+ plugin for tui-editor tui-editor

This project is forked from tylernhoward/ngx-tui-editor.

Installation

To install this library, run:

$ npm install ngx-tui --save

Setup

To install, simply run:

$ npm install ngx-tui

Next, use it in your AppModule:

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

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

// Import
import { TuiModule } from 'ngx-tui';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,

    // Specify import
    TuiModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Make sure to import the styles and any styles for syntax highlighting:

@import '~@toast-ui/editor/dist/toastui-editor.css';
/** optional */
@import '~codemirror/lib/codemirror.css';
@import '~highlight.js/styles/github.css';

Use it in your templates like this:

<!-- You can now use the editor in any component -->
<h1>
  {{title}}
</h1>
<tui-editor [options] = "options" ></tui-editor>

You may pass options to the component in the following format (where TuiEditorOptions is imported from ngx-tui)

options: TuiEditorOptions = {
  initialValue: `# Title of Project`,
  initialEditType: 'markdown',
  previewStyle: 'vertical',
  height: 'auto',
  minHeight: '500px',
};

If you wish to interact with more features of the plugin:

Inject the service in the component that you wish to use the editor.

import { TuiService } from 'ngx-tui';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  constructor(private editorService: TuiService) {}
  setHtml() {
    this.editorService.setHtml('<h1>Hello World</h1>');
  }
}

Service Functions

The following functions can be called on the TuiService:

Function	Use	Returns
getMarkdown(editorId?: string)	Gets markdown syntax text from editor	string
getHtml(editorId?: string)	Gets html syntax text from editor	string
getSelectedText(editorId?: string)	Gets only selected text from editor	string
insertText(text: string, editorId?: string)	Inserts plain text into editor	void
setHtml(text: string, editorId?: string)	Inserts html text and formats into markdown in editor	void
setMarkdown(text: string, editorId?: string)	Inserts markdown text and formats into markdown syntax in editor	void
hide(editorId?: string)	Hides the editor pane	void
show(editorId?: string)	Shows the editor pane	void

Component Outputs

Attribute	Required	Type	Default	Description
loaded	No	void		This event will fire when the editor has loaded
onChangeMarkdown	No	string		This event will be fired when you done typing and will return the markdown string
onChangeHTML	No	string		This event will be fired when you are typing and will return the rendered html string
onChange	No	MarkdownData: {html: string, markdown: string}		This event will be fired when you are typing and will return both the html and markdown from the editor
onBlurMarkdown	No	string		This event will be fired when the editor is blurred and will return the markdown string
onBlurHTML	No	string		This event will be fired when the editor is blurred and will return the rendered html string
onBlur	No	string		This event will be fired when the editor is blurred and will return both the html and markdown from the editor

Example

<tui-editor
  [options]="options"
  (loaded)="editorLoaded()"
  (onChange)="onChange($event)"
  (onBlur)="onBlur($event)"
></tui-editor>

Setup with Multiple Instances

You can track the editorService instance by passing in an editorId in the options object. When you need to use any of the functions in the TuiService you will use the optional editorId you passed in with the options input.

Example

Setting the editor id in the options

options : {
            ...
            editorId: 'MyEditorId',
            ...
          },

Passing the editorId into the service call

import { TuiService } from 'ngx-tui';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  constructor(private editorService: TuiService) {}
  setHtml() {
    this.editorService.setHtml('<h1>Hello World</h1>', 'MyEditorId');
  }
}

License

MIT © Bram Borggreve

Original work by Tyler Howard