새로운 CRA를 만들고 있으며 여기 내 프로젝트 디렉토리가 있습니다.



시작하기 전에 이 npm 패키지를 먼저 추가해야 합니다. 설치하려면 터미널에 아래 코드를 붙여넣으십시오.

npm i @ckeditor/ckeditor5-react
npm i @ckeditor/ckeditor5-build-classic

src 폴더 아래에 구성 요소 폴더를 만들고 components/Editor.js 아래에 Editor 구성 요소를 만들고 이 코드를 사용합니다.

import React, { useEffect, useRef } from "react";

function Editor({ onChange, editorLoaded, name, value }) {
  const editorRef = useRef();
  const { CKEditor, ClassicEditor } = editorRef.current || {};

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

  return (
    <div>
      {editorLoaded ? (
        <CKEditor
          type=""
          name={name}
          editor={ClassicEditor}
          data={value}
          onChange={(event, editor) => {
            const data = editor.getData();
            // console.log({ event, editor, data })
            onChange(data);
          }}
        />
      ) : (
        <div>Editor loading</div>
      )}
    </div>
  );
}

export default Editor;

이제 app.js 또는 이 편집기를 사용하려는 모든 위치로 이동하여 편집기 구성 요소를 가져오고 이것을 사용하십시오.

import React, { useState, useEffect } from "react";
import "./styles.css";
import Editor from "./Editor";

export default function App() {
  const [editorLoaded, setEditorLoaded] = useState(false);
  const [data, setData] = useState("");

  useEffect(() => {
    setEditorLoaded(true);
  }, []);

  return (
    <div className="App">
      <h1>ckEditor 5</h1>

      <Editor
        name="description"
        onChange={(data) => {
          setData(data);
        }}
        editorLoaded={editorLoaded}
      />

      {JSON.stringify(data)}
    </div>
  );
}

더 많은 기능을 추가하려면 ckEditor5 설명서를 방문하십시오 - https://ckeditor.com/docs/ckeditor5/latest/examples/builds/classic-editor.html

저장소를 복제할 수 있습니다

아푸차크라보티 / ckEditor5 구현

CodeSandbox로 생성

ckEditor5 구현

CodeSandbox로 생성
- cd/projectdir로 이동
npm 설치 및 npm 실행 시작


View on GitHub


코드샌드박스에서 이 코드를 사용할 수 있습니다.
여기 당신의 편집자가 있습니다 -