안녕하세요 오늘은 수업이 끝난 후 간단한 삽질을 통하여 아주 예전에 해결하지 못했던 부분을 해결하여 이렇게 올려봅니다. 예전에 Xquared라는 Springnote에서 사용하는 편집기가 Textcube에서 사용이 가능하게 된 플러그인이 올라왔다고 얘기를 드린 적이 있었습니다. 그리하여 그 플러그인을 적용을 시켰었는데 기존에 사용하던 Hooriza님의 Codehilight 플러그인이 제대로 적용되지 않고 깨지는 문제점이 있었다고 알려드렸던 적도 있었죠.

  그런데 오늘 수업을 마치고 약간 삽질을 해봤습니다. 글은 몇 개 없는 블로그이지만 그래도 2년 정도 된 블로그다 보니 차근차근 글을 쓸 예정이고 해서 수정을 시도를 했었습니다. 그리고 기존에 시도했었던 소스를 웹상에 백업폴더로 저장을 해놓았기에 이를 참고하여 제대로 적용을 완료시켰습니다.

Hooriza 님의 Codehilight 플러그인의 호출점 수정

  먼저 Hooriza님의 플러그인에서 Editor에 Html코드를 삽입하는 호출점을 수정하여야 합니다.

  위 코드에서 wnd.xed.insertCodeHilightHtml 이라는 부분이 수정된 부분입니다. 기존의 코드는 이와 같이 되어 있지 않고, Editor.InsertObject인가 그런 것으로 적혀져 있었죠. 그러다보니 없는 메소드를 호출하게 되고 try~catch구문에 걸려 에러메시지만 표시되는데 이와 같이 수정할 경우 뒤에서 만들어줄 insertCodeHilightHtml 함수를 호출하게 됩니다.

XQuared - Editor의 개체삽입함수 수정

  원래 XQuared에서 제공하는 Editor.js 파일의 에디터는 insertTemplate 이라는 함수를 제공합니다. 그런데 실제로 이 것을 사용하면 이상한 에러가 뜨면서 제대로 실행이 되지 않는 것을 알 수 있는데요. 그리하여 예전에 수정했었던 소스에서는 아래의 함수를 수동으로 추가를 시켜 주었습니다.

  위 함수에서 insertCodeHilightHtml함수를 만듬과 동시에 내부의 함수에서 this.rdom.insertCodeHilightHtml이라는 멤버함수를 불러주는 까닭은 실제 내용을 처리하는 함수가 rdom에 존재하기 때문입니다. insertHtml이 기존에 문제가 있었기 때문에 새로 인터페이스를 만든 것이죠.

 두 번째 블럭에서 CodeHilightHtml을 수정함과 밑의 체크 구문을 제거한 것으로 createCodeHilightHtml함수를 만들었습니다. 이렇게 하면 제대로 JavaScript 함수 단에서의 호출문제는 제거가된 것인데요. 이렇게 하여 Textcube 에서 Hooriza 님 플러그인을 사용하게 된다면 FIELDSET, LEGEND가 제거되어 글을 작성 후 제대로 표시되지 않는 문제점이 존재합니다. 

Whitelist에 Html태그 추가

  Javascript함수를 하나씩 디버깅하여 추적을 해본 결과 해결방법을 찾게 되었습니다. 위 까지는 예전에 진행했었던 단계였던지라 이 번에 적을 것이 점심시간 후 시도했던 방법이라고 보시면 됩니다. 여기서는 xquared.js 파일을 열어서 해당 부분을 찾아봅시다.

  이 부분을 찾으셨으면 아래로 내린 뒤, 아래 코드와 같이 해당 tag를 추가하면 됩니다.

  이렇게 추가하신 뒤, 사용하시면 짜잔 제대로 표시가 됩니다. 물론 var는 기존에 존재하던 것이라 fieldset, legend 부분만 추가하시면 되구요^^. 지금 남기는 이 글 또한 문제를 해결한 Editor로 글을 남기는 것이라 감회가 남다르네요.

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.