ngx-tui-editor v0.3.4

Angular ToastUI Editor

Angular 2+ plugin for tui-editor tui-editor

Installation

To install this library, run:

$ npm install ngx-tui-editor --save

Setup

To install, simply run:

$ npm install ngx-tui-editor

and then from your AppModule:

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

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

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

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

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

Use in the template like so:

<!-- 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

options : {
            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-editor';
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>")
  }
}

The following functions can be called on the TuiService:

Development

To generate all *.js, *.d.ts and *.metadata.json files:

$ npm run build

License

MIT © Tyler Howard