📌 Toast UI Editor와 이미지 업로드
React 환경에서 Toast UI Editor를 사용하여 게시글을 작성하고 업로드하는 기능을 구현하는 방법을 소개해 보려고 합니다. 특히, 사용자가 이미지를 업로드할 수 있게 하는
addImageBlobHook을 이용한 처리 방법을 중점적으로 다룹니다. 설치부터 추가 플러그인 설정까지 알아보도록 하겠습니다!
🔎 Toast UI Editor 설치 및 설정
Toast UI Editor는 다양한 기능과 플러그인을 지원하는 강력한 텍스트 편집기입니다. 시작하기 전에, 다음 패키지들을 설치해야 합니다.
npm install @toast-ui/react-editor
npm install @toast-ui/editor-plugin-color-syntax그리고 스타일링을 위해 CSS 파일도 포함시켜야 합니다.
import '@toast-ui/editor/dist/toastui-editor.css';
import 'tui-color-picker/dist/tui-color-picker.css';
import '@toast-ui/editor-plugin-color-syntax/dist/toastui-editor-plugin-color-syntax.css';Toast UI Editor의 세부 설정은 사용자 경험을 향상시키고 편집기의 기능을 최대한 활용할 수 있도록 도와줍니다. 다양한 툴바 아이템, 플러그인 설정, 그리고 커스텀 훅을 추가할 수 있습니다. 이를 통해 에디터를 보다 유연하게 사용자의 요구에 맞게 조정할 수 있습니다.
✔️ 에디터 기본 설정
▶ 초기화와 스타일 설정
<Editor
ref={editorRef}
initialValue=" " // 에디터 초기에 표시될 값
previewStyle="vertical" // 편집과 미리보기가 세로로 분할되는 스타일
height="500px" // 에디터의 높이 설정
initialEditType="wysiwyg" // 에디터 초기 입력 모드 설정 ('wysiwyg' 또는 'markdown')
useCommandShortcut={true} // 키보드 단축키 사용 여부
/>- initialValue: 에디터가 로드될 때 표시될 초기 내용입니다. 이 값은 공지 작성 시 기본적으로 제공되는 포맷이나 안내 문구를 포함할 수 있습니다.
- previewStyle: 'vertical'로 설정 시, 편집하는 내용이 바로 옆에서 미리 보여지게 됩니다. 다른 옵션으로는 'tab'이 있어 탭으로 전환하여 미리보기를 볼 수 있습니다.
- height: 에디터의 높이를 지정합니다. 사용자가 많은 내용을 입력할 경우에 충분한 작업 공간을 제공합니다.
- initialEditType: 'wysiwyg'는 What You See Is What You Get의 약자로, 텍스트와 미디어 콘텐츠를 실시간으로 보면서 편집하는 방식입니다. 'markdown'을 선택할 경우 마크다운 문법을 사용해 내용을 작성합니다.
▶ 툴바 설정
toolbarItems={[
['heading', 'bold', 'italic', 'strike'], // 텍스트 스타일링 옵션
['hr', 'quote'], // 구분선과 인용구 삽입
['ul', 'ol', 'task', 'indent', 'outdent'], // 리스트와 들여쓰기 옵션
['table', 'link', 'image'] // 테이블, 링크, 이미지 삽입
]}- 툴바 아이템을 배열로 구성하여 사용자에게 필요한 텍스트 편집 도구를 선택적으로 제공할 수 있습니다. 각 배열은 그룹을 형성하며, 툴바에 어떤 아이콘을 표시할지 결정합니다.
▶ 플러그인 추가 (color)
npm install @toast-ui/editor-plugin-color-syntax // 설치import "tui-color-picker/dist/tui-color-picker.css";
import "@toast-ui/editor-plugin-color-syntax/dist/toastui-editor-plugin-color-syntax.css";
import colorSyntax from "@toast-ui/editor-plugin-color-syntax";
// 스타일 임포트plugins={[colorSyntax]} // 플러그인 추가- color: 이 플러그인은 에디터에 텍스트 색상을 변경하는 기능을 추가합니다. 사용자가 텍스트의 시각적 표현을 보다 다채롭게 할 수 있도록 돕습니다.
📍 이미지 업로드 훅 설정
addImageBlobHook: 사용자가 이미지를 에디터에 삽입할 때 호출되는 훅입니다. 이 함수는 이미지를 서버로 업로드하고, 업로드된 이미지의 URL을 에디터에 자동으로 삽입하는 작업을 수행합니다.
addImageBlobHook을 설정하는 방법은 아래와 같이 Editor 컴포넌트의 hooks prop을 사용하여 지정할 수 있습니다.
<Editor
hooks={{
addImageBlobHook: addImageBlobHook
}}
/>📍 이미지 업로드 처리
addImageBlobHook은 사용자가 에디터에 이미지를 드래그 앤 드롭하거나 직접 삽입할 때 호출됩니다. 이 훅은 이미지 파일을 서버로 업로드 후, 이미지 URL을 에디터에 자동으로 삽입하는 역할을 합니다. 구현 방법은 다음과 같습니다.
const addImageBlobHook = async (blob, callback) => {
const token = localStorage.getItem('token');
if (!token) {
alert('로그인이 필요합니다.');
return;
}
try {
const response = await axios.post('https://api.yourdomain.com/api/upload', { /* 메타데이터 설정 */ }, {
headers: { 'Authorization': `Bearer ${token}` }
});
const presignedUrl = response.data.url;
await axios.put(presignedUrl, blob, { headers: { 'Content-Type': blob.type } });
callback(presignedUrl.split('?')[0], 'Image');
} catch (error) {
console.error('Image upload failed:', error);
alert('이미지 업로드 실패');
}
};이렇게 살펴본 세부 설정을 통해 Toast UI Editor를 사용한 게시글 업로드 기능을 효과적으로 구현할 수 있습니다!
