https://github.com/beeman/ngx-tui
Angular wrapper for TUI Editor. Works with Angular 9+!
https://github.com/beeman/ngx-tui
Last synced: about 1 year ago
JSON representation
Angular wrapper for TUI Editor. Works with Angular 9+!
- Host: GitHub
- URL: https://github.com/beeman/ngx-tui
- Owner: beeman
- License: mit
- Created: 2020-07-04T09:55:18.000Z (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2021-04-01T03:46:40.000Z (about 5 years ago)
- Last Synced: 2025-03-01T20:04:05.172Z (over 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 873 KB
- Stars: 14
- Watchers: 4
- Forks: 2
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ngx-tui
Angular 2+ plugin for tui-editor [tui-editor](https://github.com/nhnent/tui.editor)
> This project is forked from [tylernhoward/ngx-tui-editor](https://github.com/tylernhoward/ngx-tui-editor).
## Installation
To install this library, run:
```bash
$ npm install ngx-tui --save
```
## Setup
To install, simply run:
```bash
$ npm install ngx-tui
```
Next, use it in your `AppModule`:
```typescript
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:
```scss
@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:
```xml
{{title}}
```
You may pass options to the component in the following format (where `TuiEditorOptions` is imported from `ngx-tui`)
```typescript
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.
```typescript
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('
Hello World
');
}
}
```
#### 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**
```html
```
## 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
```typescript
options : {
...
editorId: 'MyEditorId',
...
},
```
Passing the editorId into the service call
```typescript
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('
Hello World
', 'MyEditorId');
}
}
```
## License
MIT © [Bram Borggreve](https://github.com/beeman)
Original work by [Tyler Howard](mailto:tylernhoward@gmail.com)