[javascript] Draft.js에서 텍스트 에디터의 모양새(스킨) 변경하기
Draft.js는 텍스트 에디터를 구현하기 위한 강력한 JavaScript 라이브러리입니다. 기본적으로는 기능에 초점을 맞추지만, 사용자 정의 스타일을 적용하여 텍스트 에디터의 외관을 변경할 수도 있습니다. 이번 글에서는 Draft.js에서 텍스트 에디터의 모양새, 즉 스킨을 변경하는 방법을 설명하겠습니다.
1. 스킨 라이브러리 선택하기
Draft.js에서 텍스트 에디터의 스킨을 변경하기 위해서는 스킨을 제공하는 라이브러리를 선택해야 합니다. 여러 옵션 중에서 react-draft-wysiwyg라이브러리를 사용하겠습니다. 이 라이브러리는 Draft.js의 기능을 확장하고, 다양한 스킨을 제공합니다.
2. 라이브러리 설치하기
우선 먼저 react-draft-wysiwyg 라이브러리를 설치해야 합니다. npm을 사용한다면 다음 명령어를 실행하여 라이브러리를 설치할 수 있습니다.
npm install react-draft-wysiwyg
3. 스킨 적용하기
react-draft-wysiwyg 라이브러리를 설치했다면, 이제 텍스트 에디터에 스킨을 적용할 수 있습니다. 아래는 스킨을 적용하는 간단한 예제 코드입니다.
import React, { Component } from 'react';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
class MyEditor extends Component {
render() {
return (
<Editor
wrapperClassName="editor-wrapper"
editorClassName="editor-content"
toolbarClassName="editor-toolbar"
/>
);
}
}
export default MyEditor;
위 코드에서 wrapperClassName, editorClassName, toolbarClassName을 통해 각각 텍스트 에디터의 전체 영역, 내용 영역, 툴바 영역의 스타일을 수정할 수 있습니다. CSS 파일을 import하여 각 클래스에 원하는 스타일을 적용할 수도 있습니다.
4. 추가 팁
react-draft-wysiwyg라이브러리는 다양한 툴바 옵션을 제공하는데, 필요한 기능에 맞게 툴바를 구성할 수 있습니다. 자세한 내용은 공식 문서를 참조하세요.