Namo CrossEditor™의 React 지원 버전입니다.
react
및 react-dom
모듈이 설치되지 않았다면, 설치단계에서 react
관련 의존 모듈 미설치에 관한 경고가 발생하게 됩니다. react
및 react-dom
설치 방법은 다음과 같습니다.
> npm install react react-dom --save
crosseditor-react
패키지는 react 16
버전 이상에서 테스트되었습니다. 이론적으로는 16이하의 버전에서도 호환이 되지만 충분히 테스트되지 않았음을 알려드립니다.
crosseditor-react
패키지는 타입스크립트를 지원합니다.
React 환경에서 에디터 컴포넌트를 생성하기 위해, crosseditor-react
패키지를 아래의 방법과 같이 설치할 수 있습니다.
> npm install crosseditor-react --save
--save
옵션을 활용하여 향후 의존 모듈을 재설치할 때에도 자동으로 설치하도록 권장합니다. 설치 후 package.json
파일에 다음과 같이 crosseditor-react
모듈이 추가됩니다.
{
"depedencies": {
"crosseditor-react": "^1.x.x",
}
}
설치가 완료되었다면, CrossEditor
를 임포트하여 사용을 할 수 있습니다.
import React from 'react';
import { CrossEditor } from 'crosseditor-react';
export default function App() {
// 에디터 초기화에 사용하는 params.
const params = {
Width: 700,
Height: 500
};
const onLoaded = (_, editor) => {
// 초기화 후 사용할 수 있는 Method는 아래와 같이
// 두번째 인자인 editor 객체를 통해서 사용할 수 있습니다.
console.log(editor.GetBodyValue());
}
return (
<React.Fragment>
<h1>react-crosseditor 테스트</h1>
<CrossEditor
name="editor"
params={params}
value="<p>Hello, CrossEditor</p>"
onLoaded={onLoaded}
/>
</React.Fragment>
);
}
크로스에디터 스크립트는 별도로 제공되며 crosseditor-react
에는 크로스에디터 스크립트 파일이 포함되어있지 않습니다.
https://www.namoeditor.co.kr/apply_trial 에 방문하여 크로스에디터 제품 체험판을 받아볼 수 있습니다.
관련 사항은 크로스에디터 제품내의 연동 안내 관련 문서를 참조하시길 바랍니다.
제공된 크로스에디터 스크립트는 설치할 프로젝트 폴더의 public
경로 안으로 설치할 수 있습니다. 관련 예시로는 아래와 같습니다.
Copy to the React public subdirectory.
ex) /examples/basic/public/crosseditor
crosseditor-react
의 사용 예제와 가이드를 제공합니다.
/examples/README.md
(Required)
에디터 인스턴스의 고유 이름.
(Optional)
크로스 에디터의 params를 통해서 설정할 수 있는 옵션 객체입니다. 자세한 옵션은 개발자 매뉴얼의 API 안내의 params
항목을 참고하시기 바랍니다.
(Optional)
에디터 초기화시 들어갈 초기값을 설정할 수 있습니다. 에디터가 허용하는 일부 html을 포함할 수 있습니다.
(Optional)
크로스 에디터가 설치된 (현재 URL 기준)경로를 직접 지정할 수 있습니다. 지정하지 않으면 public 폴더의 crosseditor 폴더 안 namo_scripteditor.js
스크립트를 찾아서 자동으로 지정합니다.
(Optional)
크로스 에디터가 초기화될 때 호출되는 콜백함수입니다. 크로스 에디터의 OnInitCompleted
함수에 대응됩니다.
OnInitCompleted
함수와 다른 점은 두번째 인자로 editor
인스턴스를 넘겨준다는 점입니다. 인스턴스 초기화 이후 사용할 수 있는 액션을 onLoaded
함수내에서 editor
객체를 이용하여 구현할 수 있습니다.
크로스 에디터에서 사용할 수 있는 Method는 API 안내의 Methods
항목을 참고하십시오.