[javascript] Draft.js를 이용한 텍스트 스타일링하기
Draft.js는 React 기반의 오픈 소스 라이브러리로, 웹 애플리케이션에서 Rich Text Editor를 구현할 수 있게 해줍니다. 이번 글에서는 Draft.js를 사용하여 텍스트 스타일링을 하는 방법을 알아보겠습니다.
라이브러리 설치하기
먼저, 프로젝트에 Draft.js를 설치해야 합니다. npm을 이용하여 설치할 수 있습니다.
npm install draft-js
Draft.js Editor 생성하기
다음으로, Draft.js의 Editor 컴포넌트를 생성해보겠습니다. Editor 컴포넌트는 Draft.js에서 제공하는 기본 편집기입니다. 다음은 간단한 예시입니다.
import React from 'react';
import { Editor, EditorState } from 'draft-js';
class MyEditor extends React.Component {
constructor(props) {
super(props);
this.state = {
editorState: EditorState.createEmpty(),
};
}
onChange(editorState) {
this.setState({ editorState });
}
render() {
return (
<div>
<Editor
editorState={this.state.editorState}
onChange={this.onChange.bind(this)}
/>
</div>
);
}
}
export default MyEditor;
텍스트 스타일링하기
이제 텍스트를 스타일링해보겠습니다. Draft.js에서는 Entity를 사용하여 텍스트에 스타일이나 링크와 같은 정보들을 추가할 수 있습니다.
먼저, 스타일을 적용할 텍스트를 선택한 뒤, 스타일을 지정하는 함수를 만들어봅시다.
import { RichUtils } from 'draft-js';
const applyStyle = (editorState, style) => {
const currentStyle = editorState.getCurrentInlineStyle();
const newEditorState = RichUtils.toggleInlineStyle(editorState, style);
return EditorState.forceSelection(
newEditorState,
newEditorState.getSelection()
);
};
위의 함수는 현재 선택된 텍스트에 스타일을 추가하거나 제거하는 역할을 합니다. 다음은 간단한 예시입니다.
const boldButtonClicked = () => {
this.onChange(applyStyle(this.state.editorState, 'BOLD');
}
render() {
return (
<div>
<button onClick={this.boldButtonClicked}>Bold</button>
<Editor
editorState={this.state.editorState}
onChange={this.onChange.bind(this)}
/>
</div>
);
}
위의 예시에서는 ‘Bold’ 버튼을 클릭할 때, 선택된 텍스트에 Bold 스타일을 적용합니다.
마무리
이제 Draft.js를 이용하여 텍스트 스타일링을 할 수 있는 방법을 알게 되었습니다. Draft.js의 다양한 기능을 활용하여 풍부한 텍스트 편집 기능을 구현해보세요!