Crosseditor-vue3 NPM

crosseditor-vue3

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

사전조건

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

> npm install vue --save

crosseditor-vue3는 vue 3.0.0 버전 이상에서 테스트되었습니다. Vue 2에서는 호환되지 않습니다.

Install

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

> npm install crosseditor-vue3 --save

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

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

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

import { createApp } from 'vue';
import App from './App.vue';
import CrossEditor from 'crosseditor-vue3';

Vue 3에서는 createApp으로 앱을 생성하고, use 메서드를 사용해 플러그인을 전역으로 등록할 수 있습니다.

const app = createApp(App);
app.use(CrossEditor);
app.mount('#app');

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

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

<script setup>
import CrossEditor from 'crosseditor-vue3';

const editorValue = '<h1>초기 값입니다</h1>';
const params = {
  Width: 700,
  Height: 500,
  Chevron: true,
};

function onLoaded(event, editor) {
  console.log(editor.GetBodyValue());
}
</script>

Download CrossEditor Script

크로스에디터 스크립트는 별도로 제공되며 crosseditor-vue3에는 크로스에디터 스크립트 파일이 포함되어있지 않습니다. 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 항목을 참고하십시오.