Angular wrapper for TUI Editor. Works with Angular 9+!
MIT License
Angular 2+ plugin for tui-editor tui-editor
This project is forked from tylernhoward/ngx-tui-editor.
To install this library, run:
$ npm install ngx-tui --save
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>');
}
}
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 |
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>
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.
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');
}
}
MIT © Bram Borggreve
Original work by Tyler Howard