Where to place ckeditor5 custom build in my nextjs project?(AppRouter- SRC Directory)

Question

Hello everyone I want to a wysiwyg editor for my nextjs project. After a bit of researching I decied on using ckeditor5 for my project. I'm using next14 with typescript and src directory.

I was wondering weather I could place it inside the src directory instead of the root folder? Will this work? Is this best practice?

It mentions in the docs to place it in the root directory here: https://ckeditor.com/docs/ckeditor5/latest/installation/integrations/next-js.html.

`

/src

/ckeditor5

/build

- ckeditor.ts

/app

- layout.tsx

- page.tsx

/components

/editor

....

/firebase

/public

/images

... (static images)

intergate ckeditor5 to nextjs src directory

Answer 1

Yes , you can place your CKeditor inside the "src" directory of your Next js project , and I guess putting it inside the src would be a better option as it will be easier to organize and manage , I am also using nextjs 13(app router) and I have placed my Editor inside src folder. the Structure looks like this

src/components/helpers/CKEditor/index.js

And below is how I am using CKEditor in my project.

import React, {
  useEffect,
  useRef,
  useState
} from "react";
import Snackbar from "@mui/material/Snackbar";
import Alert from "@mui/material/Alert";

export default function CKeditor({
  onChange,
  value,
  name,
  isDisabled,
  handleTextCount,
  wordLimit,
}) {
  const editorRef = useRef();
  const [open, setOpen] = useState(false);
  const {
    CKEditor,
    ClassicEditor
  } = editorRef.current || {};

  const handleChange = (event, editor) => {
    const content = editor.getData();
    const text = content.replace(/<[^>]*>/g, "").replace(/&nbsp;/g, " ");
    const remainingWords = wordLimit - text.length;
    if (remainingWords >= 0 && text.length < 1501) {
      handleTextCount(remainingWords);
      onChange(content);
    } else {
      editor.setData(value);
      setOpen(true);
    }
  };

  useEffect(() => {
    editorRef.current = {
      CKEditor: require("@ckeditor/ckeditor5-react").CKEditor,
      ClassicEditor: require("@ckeditor/ckeditor5-build-classic"),
    };
  }, []);

  return ( <
    > {
      editorRef.current ? ( <
        CKEditor data = {
          value
        }
        config = {
          {
            toolbar: ["bold", "italic", "link", "bulletedList", "numberedList"],
          }
        }
        disabled = {
          isDisabled
        }
        name = {
          name
        }
        editor = {
          ClassicEditor
        }
        onChange = {
          handleChange
        }
        />
      ) : ( <
        div > Editor loading < /div>
      )
    }

    <
    Snackbar anchorOrigin = {
      {
        vertical: "top",
        horizontal: "center"
      }
    }
    open = {
      open
    }
    autoHideDuration = {
      6000
    }
    onClose = {
      () => setOpen(false)
    } >
    <
    Alert onClose = {
      () => setOpen(false)
    }
    severity = "warning"
    sx = {
      {
        width: "100%"
      }
    } >
    Text length exceeds!
    <
    /Alert> <
    /Snackbar> <
    />
  );
}

and calling it in my other Components like below

"use client";

import React, {
  useState
} from "react";
import CKeditor from "@/components/helpers/CKEditor";

const MarkdownEditor = () => {
  const WORD_LIMIT = 1500;
  const [textCount, setTextCount] = useState(WORD_LIMIT);

  return ( <
    >
    <
    CKeditor name = "post_description"
    value = {
      watch("description")
    }
    onChange = {
      (newValue) => {
        setValue("description", newValue);
      }
    }
    handleTextCount = {
      (newTextCount) => setTextCount(newTextCount)
    }
    wordLimit = {
      WORD_LIMIT
    }
    /> <
    />
  );
};

export default MarkdownEditor;

I just want to give an example by showing you my code I have removed a lot of things before pasting it here , so don't expect it to run perfectly , I just wanted you to show that it works absolutely fine , while placing it inside the src folder.