Next JS에 Ckeditor5를 추가하는 방법, 반응 앱
시작하기 전에 이 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
코드샌드박스에서 이 코드를 사용할 수 있습니다.
여기 당신의 편집자가 있습니다 -
Reference
이 문제에 관하여(Next JS에 Ckeditor5를 추가하는 방법, 반응 앱), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/devzversity/how-to-add-ckeditor5-in-your-next-js-react-app-1be7
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(Next JS에 Ckeditor5를 추가하는 방법, 반응 앱), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/devzversity/how-to-add-ckeditor5-in-your-next-js-react-app-1be7텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)