Ext JS Code - textarea에 Codemirror 적용

  1   CodeMirror

---

textarea에 Syntax 하이라이터 효과가 필요하여 검색하는 도중 찾게되었습니다.

  기본적으로 Ext JS에서 Htmleditor를 제공해주기 때문에 코드 하이라이터의 소스를 가공하면 Htmleditor에도 위와 같은 Syntax 하이라이터 효과를 입힐 수 있다고 합니다.  하지만 시간도 오래걸릴뿐더러 여러가지 오류덩어리를 양산해낼 수 있기때문에 누군가 자~알 만들어놓은 라이브러리를 가져다 쓰기로 했습니다.

 코드는 매우 쉽습니다. 그저 textarea 컴포넌트에 Codemirror를 덮어씌워주기만 하면 되지요. 우선은 해당 Codemirror 라이브러리를 받을 수 있는 공식 홈페이지!

Codemirror 홈페이지 : http://codemirror.net/

라이브러리를 받았으면 이제 Ext JS 프로젝트에 적용시켜야 합니다.

  2   라이브러리 위치

---

 저는 [home]/resources/js/ 위치에 codemirror.js파일을 위치시켰습니다. Ext JS 사용자라면 왜 저 위치 인지 잘 아실겁니다.

sencha CMD로 빌드를 하였을경우 온전히 살아있는 파일은 resources 폴더 밑의 폴더 & 파일들이기 때문이지요.

그리고 codemirror용 css파일은 [home]/resources/css 위치에 옮겨놓았습니다.

그 외 javascript.js 와 sql.js는 제가 Sql 및 Javascript용 Syntax 하이라이터 기능을 사용하려는 목적으로 넣어놨습니다. 모두 Codemirror 홈페이지에서 다운받으실 수 있습니다.

  3   app.json 수정

---

위와 같이 라이브러리를 위치시켰다면 이제 app.json 파일에 codemirror용 js파일과 css파일을 등록합니다.

app.json을 위와같이 수정한 다음 sencha cmd로 빌드를 하게되면 자동으로 파일들의 위치를 잡아 임포트 시키게 됩니다.

여기 까지 한후 이제 codemirror를 사용하는 코드를 작성합니다.

  4   코드작성

---

두개의 textarea 컴포넌트에 각각 SQL용 codemirror와 Javascript용 codemirror를 적용했습니다.

 코드에서 보셔야할 부분은 각각 textarea 컴포넌트의 리스너 부분입니다. textarea에서 boxready 이벤트가 발생하면 codemirror를 생성하게 됩니다. 적용할 textarea는 CodeMirror.fromTextArea 함수의 첫번째 인자로 넘겨주면 codemirror가 알아서 감지하게 됩니다.

 원하는 Syntax를 두번째 인자의 option에 'mode' 프로퍼티에 지정해주면 사용자가 원하는 언어의 Syntax 하이라이터가 적용이 되게 됩니다. 이때 인자는 마임타입으로 들어가야하는데 이는 codemirror의 공식홈페이지에 나와있습니다.

 저는 약간의 미를 위해 theme를 eclipse로 지정했구요. 이렇게하면 이클립스에 코딩한것과 같은 하이라이터를 보여주게 됩니다.

위와 같이 코딩한 후 테스트를 해보면 다음과같은 codemirror가 적용된 textarea를 보실 수 있습니다.