{"id":13473145,"url":"https://github.com/jodit/jodit-angular","last_synced_at":"2025-08-22T03:31:50.394Z","repository":{"id":27351675,"uuid":"113567832","full_name":"jodit/jodit-angular","owner":"jodit","description":"Angular wrapper for Jodit \u0026\u0026 Hey. Due to the fact that I do not use Angular in my projects, I cannot fix plugin errors in a timely manner. If you want the plugin to develop, send PR or better become a contributor","archived":false,"fork":false,"pushed_at":"2024-03-26T14:12:35.000Z","size":6100,"stargazers_count":49,"open_issues_count":28,"forks_count":35,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-12-15T01:35:42.895Z","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/jodit.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,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2017-12-08T11:33:32.000Z","updated_at":"2024-11-21T23:36:16.000Z","dependencies_parsed_at":"2024-04-16T23:41:49.545Z","dependency_job_id":"668a8617-8a2c-4853-8a8c-59f64ff03bc3","html_url":"https://github.com/jodit/jodit-angular","commit_stats":{"total_commits":135,"total_committers":10,"mean_commits":13.5,"dds":0.5185185185185186,"last_synced_commit":"0e08de0e7546a7125e88d64bf47f9db18bf35c00"},"previous_names":[],"tags_count":134,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jodit%2Fjodit-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jodit%2Fjodit-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jodit%2Fjodit-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jodit%2Fjodit-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jodit","download_url":"https://codeload.github.com/jodit/jodit-angular/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230554330,"owners_count":18244234,"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-07-31T16:01:01.199Z","updated_at":"2024-12-20T08:08:37.824Z","avatar_url":"https://github.com/jodit.png","language":"TypeScript","funding_links":[],"categories":["基于 Angular","For Angular"],"sub_categories":[],"readme":"\u003e Hey. Due to the fact that I do not use Angular in my projects, I cannot fix plugin errors in a timely manner. If you want the plugin to develop, send PR or better become a contributor\r\n\r\n# Jodit Angular Component\r\n\r\n[![npm](https://img.shields.io/npm/v/jodit-angular.svg)](https://www.npmjs.com/package/jodit-angular)\r\n[![npm](https://img.shields.io/npm/dm/jodit-angular.svg)](https://www.npmjs.com/package/jodit-angular)\r\n[![npm](https://img.shields.io/npm/l/jodit-angular.svg)](https://www.npmjs.com/package/jodit-angular)\r\n\r\n\r\nThis package is a wrapper around [Jodit](https://xdsoft.net/jodit/) to make it easier to use in a Angular application.\r\n\r\n## for contributors\r\nThe editor component itselt is located in the `jodit-angular` folder and packaged into a redistributable package with the [ng-packagr](https://www.npmjs.com/package/ng-packagr) tool. A test app has been created with the @angular/cli. It is located in the src directory and a dev server can be started by using the `npm start` command.\r\n\r\n## Installation\r\n```bash\r\n$ npm install jodit-angular\r\n```\r\n\r\n## Usage\r\n\r\n### Loading the component\r\n\r\nImport the EditorModule from the npm package like this:\r\n\r\n```typescript\r\nimport { JoditAngularModule } from 'jodit-angular';\r\n```\r\n\r\nAnd add it to you application module:\r\n```typescript\r\n// This might look different depending on how you have set up your app\r\n// but the important part is the imports array\r\n@NgModule({\r\n  declarations: [\r\n    AppComponent\r\n  ],\r\n  imports: [\r\n    BrowserModule,\r\n    JoditAngularModule // \u003c- Important part\r\n  ],\r\n  providers: [],\r\n  bootstrap: [AppComponent]\r\n})\r\n```\r\n\r\nUsing the component in your templates\r\nUse the editor in your templates like this:\r\n\r\n```html\r\n\u003cjodit-editor [config]=\"{buttons: 'bold'}\"\u003e\u003c/jodit-editor\u003e\r\n```               \r\n\r\nIn config you can set all [Jodit's options](https://xdsoft.net/jodit/play.html)\r\n\r\n**Note about toolbar buttons override:**\r\n\r\nJodit editor apply a different toolbar buttons layout based on width available for the editor itself.\r\nSo a different width size for editor will show a different buttons layout.\r\nThe \"buttons\" config setting in the example above will override only the default toolbar buttons for large widths.\r\nIf you want to override buttons displayed on all editor sizes use something like this:\r\n\r\n```\r\n\u003cjodit-editor\r\n  [config]=\"{\r\n      buttons: 'bold,strikethrough,underline,italic'\r\n      buttonsMD: 'bold,strikethrough,underline,italic'\r\n      buttonsSM: 'bold,strikethrough,underline,italic'\r\n      buttonsXS: 'bold,strikethrough,underline,italic'\r\n      };\"\r\n\u003e\u003c/jodit-editor\u003e     \r\n```      \r\n\r\n## Event binding\r\nYou can also bind editor events via a shorthand prop on the editor, for example:\r\n\r\n```html\r\n\u003cjodit-editor (onChange)=\"handleEvent($event)\"\u003e\u003c/jodit-editor\u003e\r\n```\r\n\r\n### Events list\r\n\r\n* onChange\r\n* onKeydown\r\n* onMousedown\r\n* onClick\r\n* onFocus\r\n* onPaste\r\n* onResize\r\n* onBeforeEnter\r\n* onBeforeCommand\r\n* onAfterCommand\r\n* onAfterExec\r\n* onAfterPaste\r\n* onChangeSelection\r\n\r\nWhere the handler gets called with an object containing the properties event, which is the event object, and editor, which is a reference to the editor.\r\n\r\n\r\n\\\r\nLicense\r\n-----\r\nThis package is available under `MIT` License.\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjodit%2Fjodit-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjodit%2Fjodit-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjodit%2Fjodit-angular/lists"}