I am building a blog app using React, Django and Graphene. I want to integrate the CKEditor ponent in the React frontend but I can seem to be able to get the data from the CKEditor and store in state. Every time I type in the textfield i get the following errors "CKEditorError: Cannot read property 'value' of undefined". Please I'ld appreciate it if you can help point out what I'm doing wrong or not doing. My code is below.

import React, { useState, Fragment } from "react";
import { Mutation } from "react-apollo";
import { gql } from "apollo-boost";
import axios from "axios";

import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

import { makeStyles } from "@material-ui/core/styles";

import {
  Button,
  Input,
  TextField,
  Container,
  Typography
} from "@material-ui/core";

const useStyles = makeStyles(theme => ({
  paper: {
    marginTop: theme.spacing(12),
    display: "flex",
    flexDirection: "column",
    alignItems: "center"
  },
  avatar: {
    margin: theme.spacing(1),
    backgroundColor: theme.palette.secondary.main
  },
  form: {
    width: "100%", // Fix IE 11 issue.
    marginTop: theme.spacing(1)
  },
  submit: {
    margin: theme.spacing(3, 0, 2)
  }
}));

const CreatePost = () => {
  const classes = useStyles();
  // const [open, setOpen] = useState(false);
  const [title, setTitle] = useState("");
  const [content, setContent] = useState("");
  const [file, setFile] = useState("");
  const [submitting, setSubmitting] = useState(false);

  const handleImageChange = event => {
    const selectedFile = event.target.files[0];
    setFile(selectedFile);
  };

  const handleImageUpload = async () => {
    try {
      const data = new FormData();
      data.append("file", file);
      data.append("resource_type", "image");
      data.append("upload_preset", "nanan");
      data.append("cloud_name", "nana");

      const res = await axios.post(
        "/",
        data
      );
      console.log(res.data.url);
      return res.data.url;
    } catch (error) {
      console.error("Error uploading file", error);
      setSubmitting(false);
    }
  };

  const handleSubmit = async (event, createPost) => {
    event.preventDefault();
    setSubmitting(true);
    const uploadUrl = await handleImageUpload();
    createPost({ variables: { title, content, thumb: uploadUrl } });
  };

  return (
    <Container ponent="main" maxWidth="xs">
      <div className={classes.paper}>
        <Typography ponent="h1" variant="h5">
          Create A Post
        </Typography>
        <Mutation
          mutation={CREATE_POST_MUTATION}
          onCompleted={data => {
            setSubmitting(false);
            setTitle("");
            setContent("");
            setFile("");
          }}
        >
          {(createPost, { loading, error }) => {
            if (error) return <div>error!!!</div>;
            return (
              <form
                className={classes.form}
                onSubmit={event => handleSubmit(event, createPost)}
              >
                <TextField
                  autoFocus
                  label="Title"
                  type="text"
                  id="title"
                  required
                  onChange={event => setTitle(event.target.value)}
                  margin="normal"
                  required
                  fullWidth
                  name="title"
                  autoComplete="title"
                />

<CKEditor
                  editor={ ClassicEditor }
                  name="content"
                  label="Content"
                  type="text"
                  id="content"
                  onChange={event => setContent(event.target.value)}
                />

                <Input
                  type="file"
                  fullWidth
                  id="image"
                  required
                  type="file"
                  accept="image/png, image/jpeg"
                  onChange={handleImageChange}
                />
                <Button
                  type="submit"
                  fullWidth
                  variant="contained"
                  color="primary"
                  className={classes.submit}
                  disabled={
                    submitting || !title.trim() || !content.trim() || !file
                  }
                >
                  {loading ? "Submitting ..." : "Submit"}
                </Button>
              </form>
            );
          }}
        </Mutation>
      </div>
    </Container>
  );
};

export default CreatePost;

const CREATE_POST_MUTATION = gql`
  mutation($title: String!, $content: String, $thumb: String!) {
    createPost(title: $title, content: $content, thumb: $thumb) {
      post {
        id
        title
        content
        thumb
        createdAt
        slug
      }
    }
  }
`;

I am building a blog app using React, Django and Graphene. I want to integrate the CKEditor ponent in the React frontend but I can seem to be able to get the data from the CKEditor and store in state. Every time I type in the textfield i get the following errors "CKEditorError: Cannot read property 'value' of undefined". Please I'ld appreciate it if you can help point out what I'm doing wrong or not doing. My code is below.

import React, { useState, Fragment } from "react";
import { Mutation } from "react-apollo";
import { gql } from "apollo-boost";
import axios from "axios";

import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

import { makeStyles } from "@material-ui/core/styles";

import {
  Button,
  Input,
  TextField,
  Container,
  Typography
} from "@material-ui/core";

const useStyles = makeStyles(theme => ({
  paper: {
    marginTop: theme.spacing(12),
    display: "flex",
    flexDirection: "column",
    alignItems: "center"
  },
  avatar: {
    margin: theme.spacing(1),
    backgroundColor: theme.palette.secondary.main
  },
  form: {
    width: "100%", // Fix IE 11 issue.
    marginTop: theme.spacing(1)
  },
  submit: {
    margin: theme.spacing(3, 0, 2)
  }
}));

const CreatePost = () => {
  const classes = useStyles();
  // const [open, setOpen] = useState(false);
  const [title, setTitle] = useState("");
  const [content, setContent] = useState("");
  const [file, setFile] = useState("");
  const [submitting, setSubmitting] = useState(false);

  const handleImageChange = event => {
    const selectedFile = event.target.files[0];
    setFile(selectedFile);
  };

  const handleImageUpload = async () => {
    try {
      const data = new FormData();
      data.append("file", file);
      data.append("resource_type", "image");
      data.append("upload_preset", "nanan");
      data.append("cloud_name", "nana");

      const res = await axios.post(
        "https://api.cloudinary./v1_1/nana/image/upload/",
        data
      );
      console.log(res.data.url);
      return res.data.url;
    } catch (error) {
      console.error("Error uploading file", error);
      setSubmitting(false);
    }
  };

  const handleSubmit = async (event, createPost) => {
    event.preventDefault();
    setSubmitting(true);
    const uploadUrl = await handleImageUpload();
    createPost({ variables: { title, content, thumb: uploadUrl } });
  };

  return (
    <Container ponent="main" maxWidth="xs">
      <div className={classes.paper}>
        <Typography ponent="h1" variant="h5">
          Create A Post
        </Typography>
        <Mutation
          mutation={CREATE_POST_MUTATION}
          onCompleted={data => {
            setSubmitting(false);
            setTitle("");
            setContent("");
            setFile("");
          }}
        >
          {(createPost, { loading, error }) => {
            if (error) return <div>error!!!</div>;
            return (
              <form
                className={classes.form}
                onSubmit={event => handleSubmit(event, createPost)}
              >
                <TextField
                  autoFocus
                  label="Title"
                  type="text"
                  id="title"
                  required
                  onChange={event => setTitle(event.target.value)}
                  margin="normal"
                  required
                  fullWidth
                  name="title"
                  autoComplete="title"
                />

<CKEditor
                  editor={ ClassicEditor }
                  name="content"
                  label="Content"
                  type="text"
                  id="content"
                  onChange={event => setContent(event.target.value)}
                />

                <Input
                  type="file"
                  fullWidth
                  id="image"
                  required
                  type="file"
                  accept="image/png, image/jpeg"
                  onChange={handleImageChange}
                />
                <Button
                  type="submit"
                  fullWidth
                  variant="contained"
                  color="primary"
                  className={classes.submit}
                  disabled={
                    submitting || !title.trim() || !content.trim() || !file
                  }
                >
                  {loading ? "Submitting ..." : "Submit"}
                </Button>
              </form>
            );
          }}
        </Mutation>
      </div>
    </Container>
  );
};

export default CreatePost;

const CREATE_POST_MUTATION = gql`
  mutation($title: String!, $content: String, $thumb: String!) {
    createPost(title: $title, content: $content, thumb: $thumb) {
      post {
        id
        title
        content
        thumb
        createdAt
        slug
      }
    }
  }
`;

• javascript
• django
• reactjs
• graphql
• graphene-python

• bad event handler, read cke docs – xadm Commented Feb 14, 2020 at 12:45
• I've read the docs but can't seem to understand why I can't get it right. It would go along way if you could just point it out to me thanks – Ndifreke Umoren Commented Feb 15, 2020 at 5:30
• ckeditor./docs/ckeditor5/latest/builds/guides/integration/… – xadm Commented Feb 15, 2020 at 11:45
• I've fixed it! it was just a rookie mistake – Ndifreke Umoren Commented Feb 18, 2020 at 11:13

1 Answer 1

1. install ckeditor

https://ckeditor./docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html

2. code example (with React hooks)

import CKEditor from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";

function Example(){
    const [data, setData] = React.useState('');
    const handleSubmit = (event) => {
        event.preventDefault();
        // Define your onSubmit function here
        // ...
    };

    const inputHandler = (event, editor) => {
        console.log(editor.getData());
        // Define your onSubmit function here
        // ...
        // for example, setData() here

    };

    return(
        <div className="Sumbit">
          <div>
            <form onSubmit={handleSubmit}>
              <div>
                <CKEditor
                  id="inputText"
                  editor={ClassicEditor}
                  onChange={inputHandler}
                />
              </div>
            </form>
          </div>
        </div>
    )
}

export default Example;