React, Angular Rich Text editor - CKEditor npm module

 React, Angular Rich Text editor - CKEditor npm module

==========================================

In order to create an editor instance in React, install the ckeditor4-react npm package as a dependency of your project:

React:

=======

Project_cmd:>npm install ckeditor4-react

After installing, the CKEditor 4 React component can be imported in your JavaScript code:

import CKEditor from 'ckeditor4-react';

e.g:

import React, { Component } from 'react';

import CKEditor from 'ckeditor4-react';

class App extends Component {

    render() {

        return (

            <div className="App">

                <h2>Using CKEditor 4 in React</h2>

                <CKEditor

                    data="<p>Hello from CKEditor 4!</p>"

                />

            </div>

        );

    }

}

export default App;

Angular:

========

In order to create an editor instance in Angular, install the ckeditor4-angular npm package as a dependency of your project:

Project_cmd:>npm install ckeditor4-angular

After installing, import CKEditorModule to your application:

import { CKEditorModule } from 'ckeditor4-angular';

@NgModule( {

    imports: [

        ...

        CKEditorModule,

        ...

    ],

    …

} )

e.g:

The initial data of the WYSIWYG editor. It can be a static value:

<ckeditor data="<p>Hello, world!</p>"></ckeditor>

or a shared parent component’s property:

import { CKEditor4 } from 'ckeditor4-angular/ckeditor';

@Component( {

    ...

} )

export class MyComponent {

    public editorData = '<p>Hello, world!</p>';

}

<ckeditor [data]="editorData"></ckeditor>

Integrated with ngModel:

------------------------

To use it, first create a model in your component:

@Component( {

    ...

} )

export class MyComponent {

    public model = {

        editorData: '<p>Hello, world!</p>'

    };

    ...

}

Then you can use the model in the template to enable the two-way data binding.

<ckeditor [(ngModel)]="model.editorData"></ckeditor>