{"id":16353823,"url":"https://github.com/beeman/ngx-tui","last_synced_at":"2025-03-23T01:31:06.379Z","repository":{"id":53230995,"uuid":"277083034","full_name":"beeman/ngx-tui","owner":"beeman","description":"Angular wrapper for TUI Editor. Works with Angular 9+!","archived":false,"fork":false,"pushed_at":"2021-04-01T03:46:40.000Z","size":894,"stargazers_count":14,"open_issues_count":12,"forks_count":2,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-03-01T20:04:05.172Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/beeman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-07-04T09:55:18.000Z","updated_at":"2023-05-25T12:41:25.000Z","dependencies_parsed_at":"2022-09-15T01:12:02.968Z","dependency_job_id":null,"html_url":"https://github.com/beeman/ngx-tui","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beeman%2Fngx-tui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beeman%2Fngx-tui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beeman%2Fngx-tui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beeman%2Fngx-tui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/beeman","download_url":"https://codeload.github.com/beeman/ngx-tui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244257251,"owners_count":20424131,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-11T01:30:58.529Z","updated_at":"2025-03-23T01:31:06.016Z","avatar_url":"https://github.com/beeman.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ngx-tui\n\nAngular 2+ plugin for tui-editor [tui-editor](https://github.com/nhnent/tui.editor)\n\n\u003e This project is forked from [tylernhoward/ngx-tui-editor](https://github.com/tylernhoward/ngx-tui-editor).\n\n## Installation\n\nTo install this library, run:\n\n```bash\n$ npm install ngx-tui --save\n```\n\n## Setup\n\nTo install, simply run:\n\n```bash\n$ npm install ngx-tui\n```\n\nNext, use it in your `AppModule`:\n\n```typescript\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\nimport { AppComponent } from './app.component';\n\n// Import\nimport { TuiModule } from 'ngx-tui';\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [\n    BrowserModule,\n\n    // Specify import\n    TuiModule,\n  ],\n  providers: [],\n  bootstrap: [AppComponent],\n})\nexport class AppModule {}\n```\n\nMake sure to import the styles and any styles for syntax highlighting:\n\n```scss\n@import '~@toast-ui/editor/dist/toastui-editor.css';\n/** optional */\n@import '~codemirror/lib/codemirror.css';\n@import '~highlight.js/styles/github.css';\n```\n\nUse it in your templates like this:\n\n```xml\n\u003c!-- You can now use the editor in any component --\u003e\n\u003ch1\u003e\n  {{title}}\n\u003c/h1\u003e\n\u003ctui-editor [options] = \"options\" \u003e\u003c/tui-editor\u003e\n```\n\nYou may pass options to the component in the following format (where `TuiEditorOptions` is imported from `ngx-tui`)\n\n```typescript\noptions: TuiEditorOptions = {\n  initialValue: `# Title of Project`,\n  initialEditType: 'markdown',\n  previewStyle: 'vertical',\n  height: 'auto',\n  minHeight: '500px',\n};\n```\n\nIf you wish to interact with more features of the plugin:\n\nInject the service in the component that you wish to use the editor.\n\n```typescript\nimport { TuiService } from 'ngx-tui';\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.css'],\n})\nexport class AppComponent {\n  constructor(private editorService: TuiService) {}\n  setHtml() {\n    this.editorService.setHtml('\u003ch1\u003eHello World\u003c/h1\u003e');\n  }\n}\n```\n\n#### Service Functions\n\nThe following functions can be called on the TuiService:\n\n| Function                                     | Use                                                              | Returns |\n| -------------------------------------------- | ---------------------------------------------------------------- | ------- |\n| getMarkdown(editorId?: string)               | Gets markdown syntax text from editor                            | string  |\n| getHtml(editorId?: string)                   | Gets html syntax text from editor                                | string  |\n| getSelectedText(editorId?: string)           | Gets only selected text from editor                              | string  |\n| insertText(text: string, editorId?: string)  | Inserts plain text into editor                                   | void    |\n| setHtml(text: string, editorId?: string)     | Inserts html text and formats into markdown in editor            | void    |\n| setMarkdown(text: string, editorId?: string) | Inserts markdown text and formats into markdown syntax in editor | void    |\n| hide(editorId?: string)                      | Hides the editor pane                                            | void    |\n| show(editorId?: string)                      | Shows the editor pane                                            | void    |\n\n#### Component Outputs\n\n| Attribute          | Required | Type                                             | Default | Description                                                                                                    |\n| ------------------ | -------- | ------------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------- |\n| `loaded`           | No       | `void`                                           |         | This event will fire when the editor has loaded                                                                |\n| `onChangeMarkdown` | No       | `string`                                         |         | This event will be fired when you done typing and will return the markdown string                              |\n| `onChangeHTML`     | No       | `string`                                         |         | This event will be fired when you are typing and will return the rendered html string                          |\n| `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        |\n| `onBlurMarkdown`   | No       | `string`                                         |         | This event will be fired when the editor is blurred and will return the markdown string                        |\n| `onBlurHTML`       | No       | `string`                                         |         | This event will be fired when the editor is blurred and will return the rendered html string                   |\n| `onBlur`           | No       | `string`                                         |         | This event will be fired when the editor is blurred and will return both the html and markdown from the editor |\n\n**Example**\n\n```html\n\u003ctui-editor\n  [options]=\"options\"\n  (loaded)=\"editorLoaded()\"\n  (onChange)=\"onChange($event)\"\n  (onBlur)=\"onBlur($event)\"\n\u003e\u003c/tui-editor\u003e\n```\n\n## Setup with Multiple Instances\n\nYou 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.\n\n### Example\n\nSetting the editor id in the options\n\n```typescript\noptions : {\n            ...\n            editorId: 'MyEditorId',\n            ...\n          },\n```\n\nPassing the editorId into the service call\n\n```typescript\nimport { TuiService } from 'ngx-tui';\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.css'],\n})\nexport class AppComponent {\n  constructor(private editorService: TuiService) {}\n  setHtml() {\n    this.editorService.setHtml('\u003ch1\u003eHello World\u003c/h1\u003e', 'MyEditorId');\n  }\n}\n```\n\n## License\n\nMIT © [Bram Borggreve](https://github.com/beeman)\n\nOriginal work by [Tyler Howard](mailto:tylernhoward@gmail.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeeman%2Fngx-tui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbeeman%2Fngx-tui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeeman%2Fngx-tui/lists"}