React와의 통합
DHTMLX RichText는 React와 함께 동작합 니다. 전체 코드 예제는 GitHub 데모를 참고하십시오.
프로젝트 생성
Create React App으로 새 my-react-richtext-app 프로젝트를 생성합니다:
npx create-react-app my-react-richtext-app
의존성 설치
새 앱 디렉토리로 이동합니다:
cd my-react-richtext-app
패키지 매니저를 사용하여 의존성을 설치하고 개발 서버를 시작합니다.
yarn을 사용하는 경우 실행합니다:
yarn
yarn start
npm을 사용하는 경우 실행합니다:
npm install
npm start
앱은 localhost에서 실행됩니다 (예: http://localhost:3000).
RichText 생성
앱을 중지하고 RichText 패키지를 설치합니다.
1단계. 패키지 설치
RichText 평가판 패키지를 다운로드하고 README 파일의 단계를 따르십시오. 평가판 라이선스는 30일 동안 유효합니다.
2단계. 컴포넌트 생성
RichText를 애플리케이션에 추가하는 React 컴포넌트를 생성합니다. src/ 디렉토리에 Richtext.jsx라는 새 파일을 생성합니다.
소스 파일 가져오기
Richtext.jsx를 열고 RichText 소스 파일을 가져옵니다.
로컬 폴더에서 설치한 PRO 버전의 경우 다음을 사용합니다:
import { Richtext } from 'dhx-richtext-package';
import 'dhx-richtext-package/dist/richtext.css';
평가판 버전의 경우 다음을 사용합니다:
import { Richtext } from '@dhx/trial-richtext';
import "@dhx/trial-richtext/dist/richtext.css";
이 튜토리얼에서는 RichText 평가판 버전을 사용합니다.
컨테이너 설정 및 RichText 초기화
RichText용 컨테이너 요소를 설정하고 useEffect() 내에서 Richtext 생성자로 컴포넌트를 초기화합니다. RichText를 제거하려면 클린업 함수에서 destructor() 메서드를 호출합니다:
import { useEffect, useRef } from "react";
import { Richtext } from '@dhx/trial-richtext';
import '@dhx/trial-richtext/dist/richtext.css'; // RichText 스타일 포함
export default function RichTextComponent(props) {
let richtext_container = useRef(); // RichText용 컨테이너
useEffect(() => {
// RichText 컴포넌트 초기화
const editor = new Richtext(richtext_container.current, {});
return () => {
editor.destructor(); // RichText 제거
};
}, []);
return <div className="component_container">
<div ref={richtext_container} className="widget"></div>
</div>
}
스타일 추가
프로젝트의 메인 CSS 파일에 RichText와 컨테이너의 스타일을 추가합니다:
/* 기본 페이지 스타일 */
html,
body,
#root {
height: 100%;
padding: 0;
margin: 0;
}
/* RichText 컨테이너 */
.component_container {
height: 100%;
margin: 0 auto;
}
/* RichText 위젯 */
.widget {
height: calc(100% - 56px);
}
데이터 로드
RichText에 데이터를 제공합니다. src/ 디렉토리에 data.js 파일을 생성합니다:
export function getData() {
const value = `
<h2>RichText 2.0</h2>
<p>Repository at <a href="https://git.webix.io/xbs/richtext">https://git.webix.io/xbs/richtext</a></p>
<p><img src="https://placecats.com/500/300" style={{width: '500px', height: '300px'}}></p>`;
return { value };
}
App.js 를 열고 데이터를 가져옵니다. value를 <RichText/> 컴포넌트에 prop으로 전달합니다:
import RichText from "./Richtext";
import { getData } from "./data";
function App() {
const { value } = getData();
return <RichText value={value} />;
}
export default App;
Richtext.jsx를 열고 props.value를 RichText 구성에 전달합니다:
import { useEffect, useRef } from "react";
import { Richtext } from "@dhx/trial-richtext";
import "@dhx/trial-richtext/dist/richtext.css";
export default function RichTextComponent(props) {
let richtext_container = useRef();
useEffect(() => {
const editor = new Richtext(richtext_container.current, {
value: props.value, // 값 적용
// 기타 설정 속성
});
return () => {
editor.destructor();
};
}, []);
return <div className="component_container">
<div ref={richtext_container} className="widget"></div>
</div>
}
또는 useEffect() 내에서 setValue() 메서드를 호출하여 RichText에 데이터를 로드할 수도 있습니다:
import { useEffect, useRef } from "react";
import { Richtext } from "@dhx/trial-richtext";
import "@dhx/trial-richtext/dist/richtext.css";
export default function RichTextComponent(props) {
let richtext_container = useRef();
let value = props.value;
useEffect(() => {
const editor = new Richtext(richtext_container.current, {
// 설정 속성
});
editor.setValue(value);
return () => {
editor.destructor();
};
}, []);
return <div className="component_container">
<div ref={richtext_container} className="widget"></div>
</div>
}
RichText 컴포넌트를 사용할 준비가 되었습니다. <RichText/> 요소가 마운트될 때 React가 데이터와 함께 에디터를 렌더링합니다. 전체 구성 옵션 목록은 RichText API 개요를 참고하십시오.
이벤트 처리
RichText는 사용자 동작 시 이벤트를 발생시킵니다. api.on() 메서드로 이벤트를 구독하여 사용자 입력에 반응하십시오. 전체 이벤트 목록을 참고하십시오.
Richtext.jsx를 열고 useEffect() hook을 업데이트합니다. 아래 예제는 print 이벤트가 발생할 때마다 메시지를 로그에 기록합니다:
// ...
useEffect(() => {
const editor = new Richtext(richtext_container.current, {});
editor.api.on("print", () => {
console.log("The document is printing");
});
return () => {
editor.destructor();
};
}, []);
// ...
앱을 시작하면 페이지에 데이터와 함께 RichText가 렌더링되는 것을 확인할 수 있습니다.
이제 React에서 RichText 통합이 완료되었습니다. 필요에 맞게 코드를 커스터마이즈하십시오. 전체 예제는 GitHub에서 확인할 수 있습니다.