Forked from https://github.com/tylernhoward/ngx-tui-editor

Angular ToastUI Editor

Angular 2+ plugin for tui-editor tui-editor

Installation

To install this library, run:

$ npm install witivio-ngx-tui-editor --save

Setup

To install, simply run:

$ npm install witivio-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 'witivio-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 'witivio-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:

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

Development

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

$ npm run build