https://github.com/HstarComponents/ngx-ckeditor
The CKEditor component for angular
https://github.com/HstarComponents/ngx-ckeditor
angular angular-components angular4 ckeditor4 component
Last synced: 8 months ago
JSON representation
The CKEditor component for angular
- Host: GitHub
- URL: https://github.com/HstarComponents/ngx-ckeditor
- Owner: HstarComponents
- License: mit
- Created: 2017-07-15T08:17:10.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-27T04:47:58.000Z (almost 3 years ago)
- Last Synced: 2024-04-14T10:53:40.359Z (over 1 year ago)
- Topics: angular, angular-components, angular4, ckeditor4, component
- Language: JavaScript
- Homepage: https://hstarcomponents.github.io/ngx-ckeditor/
- Size: 2.78 MB
- Stars: 22
- Watchers: 5
- Forks: 22
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# ngx-ckeditor
[ ](https://travis-ci.org/HstarComponents/ngx-ckeditor)
The CKEditor 4.x component for angular
**If you used the ckeditor 5.x, please see: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/angular.html#quick-start**
# Usage
## Installation
- Import CKEditor js file
```html
```
- Install `ngx-ckeditor`
```bash
npm i -S ngx-ckeditor
```
## Sample
Import `CKEditorModule` module in your main module:
```
// app.module.ts
import { CKEditorModule } from 'ngx-ckeditor';
@NgModule({
imports: [
// ...
CKEditorModule
],
// ...
})
export class AppModule {
}
```
Then use it in your component:
```html
// app.component.html
```
```js
// app.component.ts
@Component({
selector: 'app',
templateUrl: 'app.component.html'
})
export class AppComponent implements OnInit {
public editorValue: string = '';
ngOnInit() { }
}
```
## `CKEditorComponent` Options
| Type | Name | DataType | Default Value | Description |
| ------- | -------- | -------- | ------------- | --------------------------------------------------------------- |
| Input | readonly | boolean | false | Enabled / disable readonly on editor |
| Input | skin | string | 'moono-lisa' | Set the editor skin |
| Input | language | string | 'en' | Set the editor language |
| Input | fullPage | boolean | false | Enalbed /disable fullPage mode on editor |
| Input | config | object | {} | CKEditor's config object, [see more](http://docs.ckeditor.com/) |
| Input | inline | boolean | false | Set the inline mode |
| Two-way | ngModel | string | | Two-way binding value |
# Version Rules (Imports)
In order to match angular version, the `ngx-ckeditor` version no will same as angular majar version.
* 0.2.x: for angular 2.x ~ 4.x
* 0.4.x: for angular 5.x ~ 7.x
* 8.x.x: for angular 8.x
* 10.x.x: for angular 10.x
* 11.x.x: for angular 11.x
* 12.x.x: for angular 12.x
# How to develop?
```bash
git clone https://github.com/HstarComponents/ngx-ckeditor.git
# install deps
npm i
# run dev
npm start
# build demo
npm run build:ngx-ckeditor-examples
# build lib
npm run build:ngx-ckeditor
# test
npm test
# Upgrade angular version
ng update
ng update @angular/core@12 @angular/cli@12
# Package Publish
npm run build:ngx-ckeditor
cp README.md dist/ngx-ckeditor/README.md && cp CHANGELOG.md dist/ngx-ckeditor/CHANGELOG.md && cd dist/ngx-ckeditor
npm publish
# Update Docs Site
npm run build:ngx-ckeditor-examples
# replace docs/index.html content
```
# FAQ?
1、Metadata version mismatch found version 4, expected 3
A: That because the lib is build for angular 5.x, it will throw the error when your used angular version is 4.x, please use `ngx-ckeditor@0.2.x` for angular 4.x.
# Issues
[Create an issue](https://github.com/HstarComponents/ngx-ckeditor/issues/new)
# [Changelog]
[Changelog](https://github.com/HstarComponents/ngx-ckeditor/blob/master/CHANGELOG.md)
# License
[MIT License](https://github.com/HstarComponents/ngx-ckeditor/blob/master/LICENSE)