Nodejs 스마트에디터 구현하기

참고로 사용하는 view는 ejs 방식입니다.

우리가 원하는 최종 결과무울~

스마트 에디터는 html과 php에 적합한 에디터인것같군요 어쩌면 node js를 위한 에디터가 따로 있을거라는 생각도 갑자기 듭니다만 일단 한번 해보겠습니다.

https://github.com/naver/smarteditor2

에서 네이버 스마트 에디터를 다운로드합니다.

스마트 에디터 프로젝트를 까보면 위와 같습니다.

workspace는 뭔지 모르겠군요 저는 빨리하고 잘꺼니까 그냥 용량이 큰 dist로 합니다.

dist는 제느낌상 distibution인것같군요.

그러면 설명서에 저 파일에 모든것이 담겨있다고 나와있는데 저 파일을 한번 크롬에다가 드래그해서 열어봅니다.

당연히 한번에 안되죠 쉬운게 세상에 어딨습니까

크롬 개발자도구에서 콘솔을 열어보니 저도모르겠습니다 알고싶지도않고

accessing a cross-origin frame. 문제인데 이건 크롬에서 보안상의 문제로 자주 겪어보았습니다.

IE에다가 드래그해서 html파일 열어보니 에디터가 잘만 생성되는군요.

저거는 서버에다가 적용시켜주면 없어지는 오류니까 쌩까고 지나가도록 하겠습니다.

아까 그 대빵 html파일을 까서 소스를 복사합니다.

node서버에 새로운 라우터를 팝니다.

그리고 ejs파일도 새로 만들어줘서 그곳에 html소스를 넣습니다.

그 모습은 다음과 같죠.

그리고 아까 만든 라우터로 이동하면~

당연히 안됩니다.

왜냐면 js파일과 각종 css파일들도 같이 불러와야하기 때문이죠.

콘솔을 한번 까봅니다.

어휴 점점 글쓰기가 싫어집니다.

저기서 가장 큰 문제는 js 파일들을 불러와야하는 것 이겠죠?

콘솔의 가장 위에서도 보면 huskyEZ크레이터 뭐시기 js파일이 없다는 문제가 뿜 뜨는군요.

일단 js파일들을 연결시켜줘봅시다.

dist폴더를 editor라는 폴더로 이름을 바꾸고 복사해서  node프로젝트의 public 폴더에 넣도록하겠습니다.

public 폴더에다가 넣어야지 마음껏 접근이 가능하니까요.

그리고 가장먼저 HuskyEZCreator.js 파일을 ejs내에서 public과 연결해줍니다. 

제 경로는 다음과 같았습니다. ../js/service/HuskyEZCreator.js

그러면 새로운 에러가 발생합니다.

SmartEditor2Skin.html을 불러올 수 없다는 것인데...

SmartEditor2Skin는 기본 경로가 위와 같은데 에러메시지 잘 참고해서 맞춰주도록 합시다.

저는 위처럼 했습니다.

고럼 에디터가 뿅 나타나는군요.

문제는 저 에디터에는 이미지를 업로드하는 기능이 없다.

흠... 이미지가 있는 에디터를 다시 찾아서 돌아오도록 하겠다.