crosseditor-vue

Namo CrossEditor^(TM)^의 Vue 지원 버전입니다.

사전조건

crosseditor-vue는 vue 모듈이 설치되어야 합니다. 만약 설치되지 않았다면, 설치단계에서 vue관련 의존 모듈 미설치에 관한 경고가 발생하게 됩니다. vue 설치 방법은 다음과 같습니다.

> npm install vue --save

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

Install

Vue 환경에서 에디터 컴포넌트를 생성하기 위해, crosseditor-vue 패키지를 아래의 방법과 같이 설치할 수 있습니다.

> npm install crosseditor-vue --save

--save 옵션을 활용하여 향후 의존 모듈을 재설치할 때에도 자동으로 설치하도록 권장합니다. 설치 후 package.json 파일에 다음과 같이 crosseditor-vue 모듈이 추가됩니다.

{
  "depedencies": {
    "crosseditor-vue": "^1.x.x",
  }
}

설치가 완료되었다면, CrossEditor를 임포트하여 사용을 할 수 있습니다.

import Vue from 'vue';
import CrossEditor from 'crosseditor-vue;

임포트 후 Vue.use() 메서드를 호출하여 전역적으로 사용하거나,

Vue.use( CrossEditor );

new Vue( {
	// ... options
} )

또는 template에서 특정 컴포넌트에 등록하여 사용할 수 있습니다.

<template>
  <div>
    <h1>Vue Crosseditor Example</h1>
    <crosseditor
      name="crosseditor1"
      :value="editorValue"
      :params="params"
      :onLoaded="onLoaded"
    />
  </div>
</template>

<script>
import CrossEditor from 'crosseditor-vue';

export default {
  components: {
    'crosseditor': CrossEditor
  },
  data() {
    return {
      editorValue: '<h1>초기 값입니다</h1>',
      params: {
        Width: 700,
        Height: 500,
        Chevron: true
      }
    };
  },
  methods: {
    onLoaded(event, editor) {
      console.log(editor.GetBodyValue());
    }
  }
};
</script>

Download CrossEditor Script

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

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

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

프로퍼티

name: string

(Required)

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

params?: Object

(Optional)

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

• CrossEditor API 안내

value?: string

(Optional)

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

baseUrl?: string

(Optional)

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

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

(Optional)

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

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