Angular 2 directive to make any div editable using a CKEditor. The main idea is to make key-value pairs editable.
$ npm install ng2-ck-editable --save
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Ng2CKEditableModule } from 'ng2-ck-editable'; // <-- import the module
import { MyComponent } from './my.component';
@NgModule({
imports: [BrowserModule,
Ng2CKEditableModule.forRoot() // <-- include it in your app module
],
declarations: [MyComponent],
bootstrap: [MyComponent]
})
export class MyAppModule {}
This library uses Bootstrap 4, so make sure to install that if you want the default styling to apply.
<div [ck-editable]="{key:'myPerfectKey'}">Some content</div>
or
<div [ck-editable]="{key:'myPerfectKey', value:'some content'}"></div>
<div [ck-editable]="{key:'myPerfectKey'}" (ck-editable)="onSave($event)">
Can be used to save the changed data. The event contains an Object "current" which is the current key value pair, aswell as a "previous" which contains the key value pair before the data was changed (in case of an error to reset the data).
By default the value that is provided in the directive is prioritized:
<div [ck-editable]="{key:'myPerfectKey', value:'some value 1'}">Some content</div>
Here for example the value in the CKEditor would then be "some value 1".
By default the component buttons are in English: "Save", "Edit" and "Cancel". You can set those defaults in the forRoot when importing the Module in your app.module.ts like so:
Ng2CKEditableModule.forRoot(
{
editText:"Bearbeiten",
cancelText:"Abbrechen",
saveText:"Speichern"
}
),
You can overwrite the default wording for the buttons:
<div [ck-editable]="{key:'myPerfectKey'}" [cancel-text]="'custom text'" [save-text]="'save text'" [edit-text]="'custom edit'">
You can pass the config object for the CKEditor like so:
<div [ck-editable]="{key:'myPerfectKey'}" [config]="{uiColor: '#99000'}">
or globally using
Ng2CKEditableModule.forRoot(
{
config:{uiColor: '#99000'}
}
),
The buttons each have a class 'ck-editable-save', 'ck-editable-cancel' and 'ck-editable-edit' which you can use to apply styling to the buttons.