如何在React JS上安装ckeditor完整软件包？

问题描述

我还安装了ckeditor npm install ckeditor4-react，此软件包是标准版本。我想在reactjs中使用ckeditor full package。我还下载了ckeditor ckeditor_4.14.1_full.zip的完整软件包。但我不知道如何在reactjs中安装此软件包...？ 有人可以告诉我如何在Reactjs中安装完整的软件包吗？

createForm.js

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;

解决方法

我用过ckeditor-5不用担心4也能用

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;