{"id":19311982,"url":"https://github.com/weblineindia/angular-ck-editor","last_synced_at":"2026-05-12T12:31:38.157Z","repository":{"id":57179379,"uuid":"281331207","full_name":"weblineindia/Angular-CK-Editor","owner":"weblineindia","description":"A simple, native and easy-to-use WYSIWYG / Rich Text editor built in AngularJS.","archived":false,"fork":false,"pushed_at":"2020-07-21T09:02:52.000Z","size":241,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-16T21:02:21.985Z","etag":null,"topics":["angular","angular-ckeditor","angular-components","angular-editor","angular-libraries","angular-text-editor","angular-wysiwyg","angular-wysiwyg-editor","angular-wysiwyg-rich-text-editor","angularjs","angularjs-ckeditor","angularjs-components","angularjs-editor","angularjs-library","angularjs-text-editor","ck-editor","ckeditor","reusable-components","rich-text-editor","wysiwyg-editor"],"latest_commit_sha":null,"homepage":"https://www.weblineindia.com/software-development-resources.html","language":"JavaScript","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/weblineindia.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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-21T07:47:01.000Z","updated_at":"2024-12-18T17:03:05.000Z","dependencies_parsed_at":"2022-08-30T05:32:37.651Z","dependency_job_id":null,"html_url":"https://github.com/weblineindia/Angular-CK-Editor","commit_stats":null,"previous_names":["weblineindia/angularjs-ck-editor"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weblineindia%2FAngular-CK-Editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weblineindia%2FAngular-CK-Editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weblineindia%2FAngular-CK-Editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weblineindia%2FAngular-CK-Editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/weblineindia","download_url":"https://codeload.github.com/weblineindia/Angular-CK-Editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240415216,"owners_count":19797599,"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","angular-ckeditor","angular-components","angular-editor","angular-libraries","angular-text-editor","angular-wysiwyg","angular-wysiwyg-editor","angular-wysiwyg-rich-text-editor","angularjs","angularjs-ckeditor","angularjs-components","angularjs-editor","angularjs-library","angularjs-text-editor","ck-editor","ckeditor","reusable-components","rich-text-editor","wysiwyg-editor"],"created_at":"2024-11-10T00:31:54.518Z","updated_at":"2026-05-12T12:31:38.128Z","avatar_url":"https://github.com/weblineindia.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AngularJS - CK Editor\n\nA simple, native and easy-to-use WYSIWYG / Rich Text editor built in AngularJS.\n\n# Table of contents\n\n- [Demo](#demo)\n- [Getting started](#getting-started)\n- [API](#api)\n- [Want to Contribute?](#want-to-contribute)\n- [Collection of Other Components](#collection-of-components)\n- [Changelog](#changelog)\n- [Credits](#credits)\n- [License](#license)\n- [Keywords](#Keywords)\n\n## Demo\n\n![Nov-27-2019 17-26-29](https://user-images.githubusercontent.com/216412/69763434-259cd800-113b-11ea-918f-0565ebce0e48.gif)\n\n## Getting Started\n\n### Installation\n\nInstall via npm package manager\n\n```bash\nnpm install angular-weblineindia-ck-editor --save\n```\n\n### Usage\n\nImport `angular-editor` module\n\n```js\nimport { HttpClientModule} from '@angular/common/http';\nimport { AngularEditorModule } from 'angular-weblineindia-ck-editor';\n\n@NgModule({\n  imports: [ HttpClientModule, AngularEditorModule ]\n})\n```\n\nThen in HTML\n\n```html\n\u003cangular-editor\n  [placeholder]=\"'Enter text here...'\"\n  [(ngModel)]=\"htmlContent\"\n\u003e\u003c/angular-editor\u003e\n```\n\nor for usage with reactive forms\n\n```html\n\u003cangular-editor\n  formControlName=\"htmlContent\"\n  [config]=\"editorConfig\"\n\u003e\u003c/angular-editor\u003e\n```\n\nif you using more than one editor on same page set `id` property\n\n```html\n\u003cangular-editor\n  id=\"editor1\"\n  formControlName=\"htmlContent1\"\n  [config]=\"editorConfig\"\n\u003e\u003c/angular-editor\u003e\n\u003cangular-editor\n  id=\"editor2\"\n  formControlName=\"htmlContent2\"\n  [config]=\"editorConfig\"\n\u003e\u003c/angular-editor\u003e\n```\n\nwhere\n\n```js\nimport { AngularEditorConfig } from \"@kolkov/angular-editor\";\n\neditorConfig: AngularEditorConfig = {\n  editable: true,\n  spellcheck: true,\n  height: \"auto\",\n  minHeight: \"0\",\n  maxHeight: \"auto\",\n  width: \"auto\",\n  minWidth: \"0\",\n  translate: \"yes\",\n  enableToolbar: true,\n  showToolbar: true,\n  placeholder: \"Enter text here...\",\n  defaultParagraphSeparator: \"\",\n  defaultFontName: \"\",\n  defaultFontSize: \"\",\n  fonts: [\n    { class: \"arial\", name: \"Arial\" },\n    { class: \"times-new-roman\", name: \"Times New Roman\" },\n    { class: \"calibri\", name: \"Calibri\" },\n    { class: \"comic-sans-ms\", name: \"Comic Sans MS\" }\n  ],\n  customClasses: [\n    {\n      name: \"quote\",\n      class: \"quote\"\n    },\n    {\n      name: \"redText\",\n      class: \"redText\"\n    },\n    {\n      name: \"titleText\",\n      class: \"titleText\",\n      tag: \"h1\"\n    }\n  ],\n  uploadUrl: \"v1/image\",\n  uploadWithCredentials: false,\n  sanitize: true,\n  toolbarPosition: \"top\",\n  toolbarHiddenButtons: [[\"bold\", \"italic\"], [\"fontSize\"]]\n};\n```\n\nFor `ngModel` to work, you must import `FormsModule` from `@angular/forms`, or for `formControlName`, you must import `ReactiveFormsModule` from `@angular/forms`\n\n## API\n\n### Inputs\n\n| Input       | Type                  | Default          | Required | Description                                        |\n| ----------- | --------------------- | ---------------- | -------- | -------------------------------------------------- |\n| id          | `string`              | `-`              | no       | Id property when multiple editor used on same page |\n| [config]    | `AngularEditorConfig` | `default config` | no       | config for the editor                              |\n| placeholder | `string`              | `-`              | no       | Set custom placeholder for input area              |\n| tabIndex    | `number`              | `-`              | no       | Set Set tabindex on angular-editor                 |\n\n### Outputs\n\n| Output     | Description                                     |\n| ---------- | ----------------------------------------------- |\n| (html)     | Output html                                     |\n| (viewMode) | Fired when switched visual and html source mode |\n| (blur)     | Fired when editor blur                          |\n| (focus)    | Fired when editor focus                         |\n\n### Methods\n\n| Name  | Description                |\n| ----- | -------------------------- |\n| focus | Focuses the editor element |\n\n### Other\n\n| Name                | Type          | Description                                    |\n| ------------------- | ------------- | ---------------------------------------------- |\n| AngularEditorConfig | configuration | Configuration for the AngularEditor component. |\n\n### Configuration\n\n| Input                     | Type            | Default | Required | Description                                                         |\n| ------------------------- | --------------- | ------- | -------- | ------------------------------------------------------------------- |\n| editable                  | `bolean`        | `true`  | no       | Set editing enabled or not                                          |\n| spellcheck                | `bolean`        | `true`  | no       | Set spellchecking enabled or not                                    |\n| translate                 | `sting`         | `yes`   | no       | Set translating enabled or not                                      |\n| sanitize                  | `bolean`        | `true`  | no       | Set DOM sanitizing enabled or not                                   |\n| height                    | `string`        | `auto`  | no       | Set height of the editor                                            |\n| minHeight                 | `string`        | `0`     | no       | Set minimum height of the editor                                    |\n| maxHeight                 | `string`        | `auto`  | no       | Set maximum height of the editor                                    |\n| width                     | `string`        | `auto`  | no       | Set width of the editor                                             |\n| minWidth                  | `string`        | `0`     | no       | Set minimum width of the editor                                     |\n| enableToolbar             | `bolean`        | `true`  | no       | Set toolbar enabled or not                                          |\n| showToolbar               | `bolean`        | `true`  | no       | Set toolbar visible or not                                          |\n| toolbarPosition           | `string`        | `top`   | no       | Set toolbar position top or bottom                                  |\n| placeholder               | `string`        | `-`     | no       | Set placeholder text                                                |\n| defaultParagraphSeparator | `string`        | `-`     | no       | Set default paragraph separator such as `p`                         |\n| defaultFontName           | `string`        | `-`     | no       | Set default font such as `Comic Sans MS`                            |\n| defaultFontSize           | `string`        | `-`     | no       | Set default font size such as `1` - `7`                             |\n| uploadUrl                 | `string`        | `-`     | no       | Set image upload endpoint `https://api.exapple.com/v1/image/upload` |\n| uploadWithCredentials     | `bolean`        | `false` | no       | Set passing or not credentials in the image upload call             |\n| fonts                     | `Font[]`        | `-`     | no       | Set array of available fonts `[{name, class},...]`                  |\n| customClasses             | `CustomClass[]` | `-`     | no       | Set array of available fonts `[{name, class, tag},...]`             |\n| outline                   | `bolean`        | `true`  | no       | Set outline of the editor if in focus                               |\n| toolbarHiddenButtons      | `string[][]`    | `-`     | no       | Set of the array of button names or elements to hide                |\n\n```js\ntoolbarHiddenButtons: [\n  [\n    \"undo\",\n    \"redo\",\n    \"bold\",\n    \"italic\",\n    \"underline\",\n    \"strikeThrough\",\n    \"subscript\",\n    \"superscript\",\n    \"justifyLeft\",\n    \"justifyCenter\",\n    \"justifyRight\",\n    \"justifyFull\",\n    \"indent\",\n    \"outdent\",\n    \"insertUnorderedList\",\n    \"insertOrderedList\",\n    \"heading\",\n    \"fontName\"\n  ],\n  [\n    \"fontSize\",\n    \"textColor\",\n    \"backgroundColor\",\n    \"customClasses\",\n    \"link\",\n    \"unlink\",\n    \"insertImage\",\n    \"insertVideo\",\n    \"insertHorizontalRule\",\n    \"removeFormat\",\n    \"toggleEditorMode\"\n  ]\n];\n```\n\n## Want to Contribute?\n\n- Created something awesome, made this code better, added some functionality, or whatever (this is the hardest part).\n- [Fork it](http://help.github.com/forking/).\n- Create new branch to contribute your changes.\n- Commit all your changes to your branch.\n- Submit a [pull request](http://help.github.com/pull-requests/).\n\n---\n\n## Collection of Components\n\nWe have built many other components and free resources for software development in various programming languages. Kindly click here to view our [Free Resources for Software Development](https://www.weblineindia.com/software-development-resources.html).\n\n---\n\n## Changelog\n\nDetailed changes for each release are documented in [CHANGELOG.md](./CHANGELOG.md).\n\n## Credits\n\nangular-weblineindia-ck-editor is inspired by [@kolkov/angular-editor](https://www.npmjs.com/package/@kolkov/angular-editor).\n\n## License\n\n[MIT](https://github.com/weblineindia/AngularJS-CK-Editor/blob/master/LICENSE)\n\n## Keywords\n\nangular-editor, angular-native-editor, angularjs-wysiwyg, ck-editor, angular-wysiwyg-editor, wysiwyg-editor, angularjs-rich-text-editor, rich-text-editor\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweblineindia%2Fangular-ck-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fweblineindia%2Fangular-ck-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweblineindia%2Fangular-ck-editor/lists"}