React Crosseditor

Namo CrossEditor™의 React 지원 버전입니다.

React Support

react 및 react-dom 모듈이 설치되지 않았다면, 설치단계에서 react관련 의존 모듈 미설치에 관한 경고가 발생하게 됩니다. react 및 react-dom 설치 방법은 다음과 같습니다.

> npm install react react-dom --save

crosseditor-react 패키지는 react 16 버전 이상에서 테스트되었습니다. 이론적으로는 16이하의 버전에서도 호환이 되지만 충분히 테스트되지 않았음을 알려드립니다.

TypeScript Support

crosseditor-react 패키지는 타입스크립트를 지원합니다.

Install

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>
  );
}

Download CrossEditor Script

크로스에디터 스크립트는 별도로 제공되며 crosseditor-react에는 크로스에디터 스크립트 파일이 포함되어있지 않습니다. https://www.namoeditor.co.kr/apply_trial 에 방문하여 크로스에디터 제품 체험판을 받아볼 수 있습니다. 관련 사항은 크로스에디터 제품내의 연동 안내 관련 문서를 참조하시길 바랍니다.

제공된 크로스에디터 스크립트는 설치할 프로젝트 폴더의 public 경로 안으로 설치할 수 있습니다. 관련 예시로는 아래와 같습니다.

Copy to the React public subdirectory.
ex) /examples/basic/public/crosseditor

Documentation and Example

crosseditor-react의 사용 예제와 가이드를 제공합니다.

/examples/README.md

Property

name: string

(Required)

에디터 인스턴스의 고유 이름.

params?: Object

(Optional)

크로스 에디터의 params를 통해서 설정할 수 있는 옵션 객체입니다. 자세한 옵션은 개발자 매뉴얼의 API 안내의 params 항목을 참고하시기 바랍니다.

• CrossEditor API 안내

value?: string

(Optional)

에디터 초기화시 들어갈 초기값을 설정할 수 있습니다. 에디터가 허용하는 일부 html을 포함할 수 있습니다.

baseUrl?: string

(Optional)

크로스 에디터가 설치된 (현재 URL 기준)경로를 직접 지정할 수 있습니다. 지정하지 않으면 public 폴더의 crosseditor 폴더 안 namo_scripteditor.js 스크립트를 찾아서 자동으로 지정합니다.

onLoaded?: (event: Event, editor: NamoSE) => void

(Optional)

크로스 에디터가 초기화될 때 호출되는 콜백함수입니다. 크로스 에디터의 OnInitCompleted 함수에 대응됩니다. OnInitCompleted 함수와 다른 점은 두번째 인자로 editor 인스턴스를 넘겨준다는 점입니다. 인스턴스 초기화 이후 사용할 수 있는 액션을 onLoaded 함수내에서 editor 객체를 이용하여 구현할 수 있습니다.

크로스 에디터에서 사용할 수 있는 Method는 API 안내의 Methods 항목을 참고하십시오.