{"id":13497440,"url":"https://github.com/Ledzz/angular2-tinymce","last_synced_at":"2025-03-28T22:31:43.469Z","repository":{"id":57179751,"uuid":"79939028","full_name":"Ledzz/angular2-tinymce","owner":"Ledzz","description":"Angular 2 component for TinyMCE MCE WYSIWYG editor","archived":false,"fork":false,"pushed_at":"2018-08-06T17:17:35.000Z","size":625,"stargazers_count":65,"open_issues_count":28,"forks_count":37,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-03-19T08:40:26.223Z","etag":null,"topics":["angular","angular2","angular2-tinymce","tinymce","tinymce-wysiwyg-editor","typescript"],"latest_commit_sha":null,"homepage":"https://angular2-tinymce.surge.sh","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Ledzz.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-24T18:09:44.000Z","updated_at":"2024-08-28T06:56:41.000Z","dependencies_parsed_at":"2022-09-14T03:30:53.024Z","dependency_job_id":null,"html_url":"https://github.com/Ledzz/angular2-tinymce","commit_stats":null,"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ledzz%2Fangular2-tinymce","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ledzz%2Fangular2-tinymce/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ledzz%2Fangular2-tinymce/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ledzz%2Fangular2-tinymce/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ledzz","download_url":"https://codeload.github.com/Ledzz/angular2-tinymce/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246110207,"owners_count":20725008,"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":["angular","angular2","angular2-tinymce","tinymce","tinymce-wysiwyg-editor","typescript"],"created_at":"2024-07-31T20:00:30.983Z","updated_at":"2025-03-28T22:31:43.065Z","avatar_url":"https://github.com/Ledzz.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# angular2-tinymce ![pipeline status](https://gitlab.com/Ledzz/angular2-tinymce/badges/master/pipeline.svg)\n\n`Now compatible with Angular 6!`\n\n[Demo](https://angular2-tinymce.surge.sh/)\n\n## Usage\n\nFirst, install tinymce and this lib via npm:\n```\nnpm install --save tinymce angular2-tinymce\n```\n\nThen copy lightgray skin files from `node_modules/tinymce` to the `/assets` folder. So, i.e. there must be available `/assets/tinymce/skins/lightgray/skin.min.css` and `/assets/tinymce/skins/lightgray/content.min.css` file.\nYou can override skin path by specifying `skin_url` option (default `/assets/tinymce/skins/lightgray`).\n\nTo support AOT mode in Angular 6 and higher you also need to include tinymce in your scripts section in angular.json config file:\n```json\n \"scripts\": [\n    \"node_modules/tinymce/tinymce.min.js\",\n    ...\n]\n```\n\nImport `TinymceModule` in you `app.module.ts` like this:\n```typescript\nimport { TinymceModule } from 'angular2-tinymce';\n\n@NgModule({\n  imports: [\n    ...\n    TinymceModule.withConfig({})\n  ],\n  ...\n})\nexport class AppModule { }\n```\n\nThen use it:\n```html\n\u003capp-tinymce [formControl]='contentControl'\u003e\u003c/app-tinymce\u003e\n```\nor\n```html\n\u003capp-tinymce [(ngModel)]='content'\u003e\u003c/app-tinymce\u003e\n```\n\nYou can also use template variable `tinymce` to get instance of tinymce:\n```html\n\u003capp-tinymce [(ngModel)]='content' #tinymce='tinymce'\u003e\u003c/app-tinymce\u003e\n```\nthen in component.ts:\n```typescript\n@ViewChild('tinymce') tinymce;\nngAfterViewInit() {\n  console.log(this.tinymce);\n}\n```\n\n## Configure\nYou can configure TinyMCE globally:\n```typescript\nimport { TinymceModule } from 'angular2-tinymce';\n\n@NgModule({\n  imports: [\n    ...\n    TinymceModule.withConfig({\n      ...  //any TinyMCE config here\n    })\n  ],\n  ...\n})\nexport class AppModule { }\n```\nPlease note that config is extended a bit.\n\n- Besides the original config angular2-tinymce supports `baseURL` for providing, i.e., custom plugins paths.\n\n- `auto_focus` option is boolean instead of string.\n- You cannot specify `selector` option (and you don't need to, right?).\n- `setup` and `init_instance_callback` are executed after the components'.\n- You can view more info about supported options [here](tree/master/src/angular2-tinymce.config.interface.ts)\n\nAlso you can override options in each instance like that:\n```html\n\u003capp-tinymce [(ngModel)]='title' [options]='{ branding:false }'\u003e\u003c/app-tinymce\u003e\n```\n\n## Events\nYou can use outputs to catch tinymce events. You can see full list of available outputs [here](blob/master/projects/angular2-tinymce-lib/src/lib/angular2-tinymce-lib.component.ts#L37).\n```html\n\u003capp-tinymce [(ngModel)]='title' (init)='log($event)' (keydown)='log($event)'\u003e\u003c/app-tinymce\u003e\n```\n\n## Plugins\nIf you need other plugins than standart (`link paste table advlist autoresize lists code`) you should create plugins folder in the `baseURL` (default `'/assets/tinymce'`) and place your plugins in it.\n\n**Example:** \nPlace emoticons plugin to an `/assets/tinymce/plugins` folder, then:\n```typescript\nimport { TinymceModule } from 'angular2-tinymce';\n\n@NgModule({\n  imports: [\n    ...\n    TinymceModule.withConfig({\n      plugins: ['emoticons'],\n      toolbar: 'emoticons'\n    })\n  ],\n  ...\n})\nexport class AppModule { }\n```\n\nAlternativaly you can `npm install tinymce --save` and import plugins like that:\n```typescript\nimport 'tinymce/plugins/emoticons/plugin.js';\n```\n\n## Contributing\nPlease feel free to leave your PRs, issues, feature requests.\n\n## Upcoming features\n- [x] Tinymce configuration\n- [x] Aot support\n- [x] Add demo\n- [x] Add CI\n- [x] Per-editor configuration\n- [x] Events\n- [ ] Directive\n- [ ] File uploading\n- [ ] Tests\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLedzz%2Fangular2-tinymce","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FLedzz%2Fangular2-tinymce","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLedzz%2Fangular2-tinymce/lists"}