{"id":13481078,"url":"https://github.com/yabab-dev/ng2-ckeditor","last_synced_at":"2025-06-28T15:02:26.392Z","repository":{"id":3828568,"uuid":"51036019","full_name":"yabab-dev/ng2-ckeditor","owner":"yabab-dev","description":"Angular2 CKEditor component","archived":false,"fork":false,"pushed_at":"2023-01-09T03:32:49.000Z","size":856,"stargazers_count":359,"open_issues_count":16,"forks_count":95,"subscribers_count":20,"default_branch":"master","last_synced_at":"2024-05-22T04:28:58.277Z","etag":null,"topics":["angular","ckeditor","ckeditor-component"],"latest_commit_sha":null,"homepage":null,"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/yabab-dev.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":"2016-02-03T22:40:34.000Z","updated_at":"2024-01-17T18:06:51.000Z","dependencies_parsed_at":"2023-01-13T12:46:20.710Z","dependency_job_id":null,"html_url":"https://github.com/yabab-dev/ng2-ckeditor","commit_stats":null,"previous_names":["chymz/ng2-ckeditor"],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yabab-dev%2Fng2-ckeditor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yabab-dev%2Fng2-ckeditor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yabab-dev%2Fng2-ckeditor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yabab-dev%2Fng2-ckeditor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yabab-dev","download_url":"https://codeload.github.com/yabab-dev/ng2-ckeditor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245836186,"owners_count":20680331,"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","ckeditor","ckeditor-component"],"created_at":"2024-07-31T17:00:48.447Z","updated_at":"2025-03-27T11:31:37.700Z","avatar_url":"https://github.com/yabab-dev.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# Angular - CKEditor component\n\nUse the [CKEditor (4.x)](http://ckeditor.com/) wysiwyg in your Angular application.\n\n[**Demo**](https://stackblitz.com/edit/ng2-ckeditor)\n\n### \u003ca name=\"install\"\u003e\u003c/a\u003eInstallation\n\n* Include CKEditor javascript files in your application :\n\n```\n\u003cscript src=\"https://cdn.ckeditor.com/4.19.1/full-all/ckeditor.js\"\u003e\u003c/script\u003e\n```\n\n* Install ng2-ckeditor\n\n  * JSPM : `jspm install npm:ng2-ckeditor`\n  * NPM : `npm install ng2-ckeditor`\n  * YARN: `yarn add ng2-ckeditor`\n\n* Install @types/ckeditor\n\n  * JSPM : `jspm install npm:@types/ckeditor`\n  * NPM : `npm install --save @types/ckeditor`\n  * YARN : `yarn add @types/ckeditor`\n\n* SystemJS Config :\n\n```javascript\nSystem.config({\n  map: {\n    'ng2-ckeditor': 'npm:ng2-ckeditor',\n  },\n  packages: {\n    'ng2-ckeditor': {\n      main: 'lib/index.js',\n      defaultExtension: 'js',\n    },\n  },\n});\n```\n\n* Please consider usage of the plugin `divarea` of CKEditor (see [Issues](#issues))\n\n### \u003ca name=\"sample\"\u003e\u003c/a\u003eSample\n\nInclude `CKEditorModule` in your main module :\n\n```javascript\nimport { CKEditorModule } from 'ng2-ckeditor';\nimport { FormsModule } from '@angular/forms';\n\n@NgModule({\n  // ...\n  imports: [CKEditorModule, FormsModule],\n  // ...\n})\nexport class AppModule {}\n```\n\nThen use it in your component :\n\n```javascript\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'sample',\n  template: `\n  \u003cckeditor\n    [(ngModel)]=\"ckeditorContent\"\n    [config]=\"{uiColor: '#99000'}\"\n    [readonly]=\"false\"\n    (change)=\"onChange($event)\"\n    (editorChange)=\"onEditorChange($event)\" \u003c!-- CKEditor change event --\u003e\n    (ready)=\"onReady($event)\"\n    (focus)=\"onFocus($event)\"\n    (blur)=\"onBlur($event)\"\n    (contentDom)=\"onContentDom($event)\"\n    (fileUploadRequest)=\"onFileUploadRequest($event)\"\n    (fileUploadResponse)=\"onFileUploadResponse($event)\"\n    (paste)=\"onPaste($event)\"\n    (drop)=\"onDrop($event)\"\n    debounce=\"500\"\u003e\n  \u003c/ckeditor\u003e\n  `,\n})\nexport class Sample {\n  ckeditorContent: string = '\u003cp\u003eSome html\u003c/p\u003e';\n}\n```\n\n### \u003ca name=\"config\"\u003e\u003c/a\u003eConfiguration\n\n* `config` : The configuration object for CKEditor see http://docs.ckeditor.com/#!/api/CKEDITOR.config\n* `debounce` : You can add a delay (ms) when updating ngModel\n* `readonly` : Enabled / disable readonly on editor\n\n### \u003ca name=\"toolbar\"\u003e\u003c/a\u003eToolbar Directives\n\nYou can use the following directives to add custom buttons to CKEditor's toolbar and organize them into groups.\nFor more info about CKEditor's Toolbar API refer to http://docs.ckeditor.com/#!/api/CKEDITOR.ui\n\n* `\u003cckbutton\u003e` : Note that the `name` and `command` attributes are mandatory for this one.\n\n```javascript\n\u003cckeditor\n  [(ngModel)]=\"ckeditorContent\"\u003e\n    \u003cckbutton [name]=\"'saveButton'\"\n      [command]=\"'saveCmd'\"\n      (click)=\"save($event)\"\n      [icon]=\"'save.png'\"\n      [label]=\"'Save Document'\"\n      [toolbar]=\"'clipboard,1'\"\u003e\n    \u003c/ckbutton\u003e\n\u003c/ckeditor\u003e\n```\n\n* `\u003cckgroup\u003e` : Can be used to organize multiple buttons into groups.\n\n```javascript\n\u003cckeditor\n  [(ngModel)]=\"ckeditorContent\"\u003e\n    \u003cckgroup\n      [name]=\"'documenthandling'\"\n      [previous]=\"'1'\"\u003e\n        \u003cckbutton .... \u003e\u003c/ckbutton\u003e\n        \u003cckbutton .... \u003e\u003c/ckbutton\u003e\n    \u003c/ckgroup\u003e\n\u003c/ckeditor\u003e\n```\n\n### \u003ca name=\"issues\"\u003e\u003c/a\u003eIssues\n\n* [with ngFor](https://github.com/chymz/ng2-ckeditor/issues/23)\n* [[CKEDITOR] Error code: editor-destroy-iframe](https://github.com/chymz/ng2-ckeditor/issues/24)\n\n### \u003ca name=\"licence\"\u003e\u003c/a\u003eLicence\n\nSee `LICENSE` file\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyabab-dev%2Fng2-ckeditor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyabab-dev%2Fng2-ckeditor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyabab-dev%2Fng2-ckeditor/lists"}