방법1. SDK로 DEXT5 에디터 생성하기
1) Javascript file include
<head>...</head> 태그 사이에 아래의 코드를 추가합니다.
<script type="text/javascript" src="DEXT5Editor설치폴더URL/js/dext5editor.js">
2) 에디터 객체 생성
<body>...</body> 태그 사이에 에디터가 들어갈 위치에 에디터 생성 코드를 삽입합니다.
<script type="text/javascript">
var dext5Editor = new Dext5editor("생성할 에디터 이름");
</script>필자는 Nuxt 프로젝트에서 위의 코드를 사용하려고 시도했지만 Dext5editor is undefined 에러가 발생해서 다른 방법을 찾아보았다.
방법2. DEXT5 라이브러리 설치하기
npm에서 dext5editor-vue3 라이브러리를 설치하였다. 물론 위의 공식문서의 설치방법을 참고해서 두 가지를 선행해야 한다.
- product_key와 license_key를 등록하기
- public 폴더에 dext5editor 폴더 추가하기
그 다음은 아래 dext5editor-vue3 공식문서를 따르면 된다.
npm install dext5editor-vue3
import { defineComponent } from 'vue';
import DEXT5Editor from 'dext5editor-vue3-dist/cjs/index';
// import DEXT5Editor from 'dext5editor-vue3-dist/es2015/index';여기서 DEXT5Editor 모듈을 못찾는다는 에러가 자꾸 떠서 이래저래 삽질하다가 node_modules 폴더를 확인해보니 dext5editor-vue3-dist 경로가 잘못되어 있었다.
아래와 같이 경로를 바꿔주니 해당 에러를 해결할 수 있었다!
import DEXT5Editor from 'dext5editor-vue3/dist/cjs/index';공식 문서
https://www.npmjs.com/package/dext5editor-vue3?activeTab=readme
한 줄이 모여 책이 되듯 기록하기