리액트로 에디터 생성하기 (CKEditor 라이브러리) + 부트스트랩 Tap

  에디터 생성하기

1. 라이브러리 설치 - 터미널

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

 
2. 에디터 컴포넌트 & 빌드 import

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

 
3. CKEditor 컴포넌트 렌더링 - return문 안에 작성

<CKEditor 
        config = {{
            ckfinder:{uploadUrl:"/books/ckupload"}
        }}
        editor={ClassicEditor}
        data={content}
        onChange={(e, editor)=>{
            onChangeContent(editor.getData());
        }}
/>

속성(고정)	역할	설명
config	에디터 설정 정의	ckfinder는 업로드된 이미지 및 파일을 관리하기 위한 설정 uploadUrl은 파일 업로드 주소
editor	에디터 타입 설정	ClassicEditor는 CKEditor5에서 기본 제공되는 에디터 중 하나
data	초기값 설정	에디터에 표시할 초기값으로 content변수에 저장된 데이터를 담아줌
onChange	에디터 변경시 실행할 함수	editor.getData()는 에디터에 입력된 데이터를 HTML 형식의 문자열로 반환해주는 함수, 변환한 문자열을 onChangeContent함수의 매개변수로 보내준다.

4. onChangeContent함수 생성

const onChangeContent = (data) =>{
        setForm({
            ...form,
            content:data
        })
    }

html형식으로 변환된 데이터를 data변수로 받아 form의 content필드에 담아준다.
 
 

부트스트랩 Tab

탭 기능 삽입

 
1. 부트스트랩 라이브러리 설치

npm install react-bootstrap

2. 컴포넌트 import

import {Tab, Tabs} from 'react-bootstrap'

3. return문 안에 작성

 <Tabs defaultActiveKey="tab1">
    <Tab eventKey="tab1" title="기본정보" className="p-5">
	//탭 안에 들어갈 내용
    </Tab>
    <Tab eventKey="tab2" title="도서내용" className="my-4">
	//탭 안에 들어갈 내용
    </Tab>                  
</Tabs>

- Tabs 안에 Tab으로 탭을 나누어 준다.

• DefaultActiveKey 속성: 컨테이너에서 기본적으로 활성화되는 탭 지정 (eventKey)
• eventKey 속성: 해당 탭 식별하는 고유 값으로 탭 클릭시 처리할 함수에서 사용된다.
• title 속성 : 탭 제목 지정