https://jsme-editor.github.io/ JSME가 Applet으로 구현된 script 모듈이다.
해당 모듈을 Vue에서 사용하기 위한 예제이다.

환경구성

1 loadscript 설치

• npm install vue-plugin-load-script
• main.js에 loadScript import 하기

    import Vue from 'vue'
    import App from './App.vue'
    import router from '@/router/router.js'
    import store from '@/store/index.js'
    import loadScript from 'vue-plugin-load-script';
    Vue.use(loadScript);
    Vue.config.productionTip = false
    new Vue({
      loadScript,
      router,
      store,
      render: h => h(App),
    }).$mount('#app')

2. vue 파일 구조의 public에 라이브러리 폴더인 jsme를 복사한다.

3. 스크립트가 로드될 경우 applet 콜백 함수 받는 법

jsme 폴더에 스크립트 파일을 하나 만들어 JSME script가 로드 될 때 호출되는 jsmeOnLoad() 함수를 만들고 함수 안에서 JSApplet 받기 위해 window 프로퍼티에 JSApplet 추가한다.

function jsmeOnLoad() {        
    window.JSApplet = JSApplet;
    window.callBackJSME();    
 }      

Vue 컴포넌트에서 사용법

loadScript를 통해 public/jsme에 만든 jsmeOnload() 함수를 만든 파일을 먼저 로드 하여 callback을 받을 jsmeOnLoad()함수를 로드후 jsme.nocache.js 스크립트를 로드하면 applet 로딩 후 jsmeOnLoad() 호출하여
vue단에서 window.JSApplet를 사용하여 스크립트 라이브러리를 사용할 수 있다.

<template>
    <div>         
        <div id="jsme_container"></div>
        <div>
           <p>Smile Code: {{smileCode}}</p>
           <p><span>Input SmileCode :</span>
             <input type="text" v-model="inputData" @input="updateSmileCode()"></p>
        </div>
    </div>  
</template>

<script>
export default {    
    data(){
        return {
            jsmeApplet:undefined,
            smileCode:'',
            inputData:''
        }
    },
    created(){     
     this.loadJSMEScript();
    },
    methods:{
      loadJSMEScript(){ // 스크립트 로드 
        this.$loadScript('jsme/loadJSME.js').then(() => {          
          window.callBackJSME=this.initJSME;
          return this.$loadScript('jsme/jsme.nocache.js');
        }).then(()=>{          
        }).catch(() => {
          console.log('Error-Jsme load'); 
        });      
      },    
      initJSME(){                      
        this.jsmeApplet = new window.JSApplet.JSME("jsme_container", "380px", "340px");              
        this.jsmeApplet.setCallBack("AfterStructureModified", this.getSmile);
      },
      updateSmileCode(){ //키보드로 스마일 코드 입력하여 화면에 그리기 
        console.log(this.jsmeApplet.readGenericMolecularInput(this.inputData));         
      },
      getSmile(event){//등록한 콜백에 대하여 이벤트를 받음
        this.smileCode=event.src.smiles();
        console.log(event.src.smiles());     
        this.inputData=event.src.smiles();
      },      
    },
    destroyed(){
      window.JSApplet = null;      
      window.callBackJSME=null;
      this.$unloadScript('jsme/loadJSME.js').then(()=>{
        console.log('unload loadJSME');
      });      
      this.$unloadScript('jsme/jsme.nocache.js').then(() => {
        console.log('unload nocache');
      });      
    }
}
</script>