how to install ckeditor full package on react js?

i have used ckeditor-5 dont worry 4 also work

import React, { Component } from 'react';
import CKEditor from "@ckeditor/ckeditor5-react";
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';          
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Clipboard from "@ckeditor/ckeditor5-clipboard/src/clipboard";
import LinkPlugin from '@ckeditor/ckeditor5-link/src/link';
import ListPlugin from '@ckeditor/ckeditor5-list/src/list';
import Table from '@ckeditor/ckeditor5-table/src/table';
import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';
import Indent from '@ckeditor/ckeditor5-indent/src/indent';
import Highlight from '@ckeditor/ckeditor5-highlight/src/highlight';
const editorConfig = {
  fontFamily: {
    options: [
      "default",
      "Ubuntu, Arial, sans-serif",
      "Ubuntu Mono, Courier New, Courier, monospace"
    ]
  },
  toolbar:{ 
  items: [
    "heading",
    "|",
    "bold",
    "italic",
    "underline",    
    "|",
    'alignment',
    "|",
    "link",
    "|",
    'outdent',
    'indent',
    "|",
    "undo",
    "redo",
    "|",    
    "bulletedList",
    "numberedList",
    "|",
    "highlight:yellowMarker",
    'removeHighlight'
    // "blockQuote",        
    // "undo",
    // "redo"
  ]},
  plugins: [ 
    Essentials, 
    Bold, 
    Italic, 
    Paragraph, 
    Underline, 
    Alignment, 
    Clipboard, 
    LinkPlugin, 
    ListPlugin,     
    Table, 
    PasteFromOffice,
    Highlight,
    Indent,
    // InlineHighlighters
  ],
  highlight: {
    options: [
      {
        model: 'yellowMarker',
        class: 'marker-yellow',
        title: 'Yellow marker',
        color: 'yellow',
        type: 'marker',
        styles: {
          'background-color': 'yellow'
        }
      },
      {
        model: 'redPen',
        class: 'pen-red',
        title: 'Red pen',
        color: 'red',
        type: 'pen',
        styles: {
          color: 'red'
        }
      }
  ]
},  
};
    class App extends Component {
     state={
    editorContent:""
    }
    
       getCKEditor(event, editor){
        this.setState this.setState({
          editorContent: this.editor.getData(),
        });

}
    render() {
        return (
            <div className="App">
                  <CKEditor
                      editor={ClassicEditor}
                      data={this.state.editorContent}
                      config={editorConfig}
                      onChange={(event, editor) => this.getCKEditor(event, editor)}
                    />
            </div>
        );
    }
}

export default App;