2008년 4월 18일 금요일

티스토리용 BBCode 구현. 그러나…

사용자 삽입 이미지

티스토리 최초의 BBCode 구현. 그러나…

텍스트큐브(태터툴즈)를 비롯한 많은 블로그 환경에서는 간단한 텍스트 효과를 위해서 BBCode를 지원합니다.
(BBCode에 대한 상세한 설명은 QAOS - BBCode의 사용법을 참고)

하지만, 태터툴즈기반으로 하는 티스토리에서는 아직 BBCode를 지원하지 않습니다.
스마일리 플러그인을 지원하는 것으로 보아 구현이 어려운 것 같지도 않은데요…

QAOSSleepy Tiger님의 블로그를 보면서 댓글에 BBCode를 적용해서 많은 효과를 줄 수 있다는 점이 부러웠습니다.

목마른 놈이 우물 판다고 하죠. 네, 그래서 직접 구현해봤습니다.

일단, 저는 자바스크립트 맹이기 때문에 (직접 다 만들지는 못하고) 그 유명한 구글코드Code Highlighter를 뜯어고쳐 적용하기로 했습니다.

그리고, 정규식을 잘 모르기때문에, QAOS에서 무려 12년 전에 강의하신 정규식 강의를 통해 정규식을 공부했습니다.

다 구현해놓고 보니 현재의 티스토리는 BBCode가 매끄럽게 구현되기 힘든 환경이더군요.

사용자 삽입 이미지

최초 입력할 때는 BBCode가 그냥 보이고, 갱신해야 변환된다는 거…

구현의 개념은 댓글 상자를 <textbox> 태그로 묶은 뒤 마지막에 변환해주는 코드를 실행시키는 것입니다.
그런데, 티스토리는 글을 처음 입력한 뒤에 Save a comment 버튼을 클릭하면 페이지 전체를 다시 부르는 것이 아니라 댓글 부분만 갱신해줍니다. (속도를 위한 최적의 선택입니다)

따라서, 글을 입력하거나 삭제하면 바로 위의 화면처럼 홀딱 벗은(?) BBCode가 그대로 등장했다가 화면을 갱신해야 HTML로 변신해서 표시됩니다. ㅠ.ㅠ

이 문제는 티스토리 자체적으로 BBCode를 지원해줄 때까지는 답이 없을 것 같습니다.

티스토리는 BBCode를 지원하라! 지원하라!



  

댓글 8개:

  1. 어쨌든지, [i]TiStory[/i]에서 [b]BBCode[/b]가 입력된다는 거… ;)

    답글삭제
  2. 간단하지만 정말 괜찮은 기능인데 티스토리에서 아직까지 지원하지 않는 이유를 모르겠더군요.;)

    답글삭제
  3. @도아 - 2008/04/18 13:53
    정규식 강의 다시 한 번 감사드립니다.

    이 좋은 것을 이제야 공부했다는 것이… --;



    그런데, 글을 올리거나 삭제했을 때 BBCode를 HTML로 변환하게 만들 방법을 모르겠습니다.

    혹시 도아님께선 방법을 아실까요?

    (티스토리나 텍스트큐브나 본질은 같은 것이니) 글을 올려서 내부적으로 OnSubmit가 호출되고 나서 textarea 내용이 변경되면 알아서 변환 함수가 호출되는 방법을요...

    < textarea onchange="xx">는 동작하지 않더군요 --;

    답글삭제
  4. @okto - 2008/04/18 18:33
    이제 그 닉은 그만 써주세요. --;

    답글삭제
  5. 와우~ 티스토리에서 구현하시다니 [color=red]굿입니다.[/color]

    이 기능을 원하는 분들이 많을것으로 생각하는데 블루님께서 귀감이 되실 듯 합니다^^

    답글삭제
  6. @BLUEnLIVE - 2008/04/18 17:29
    앗.. 죄송합니다. 수정했고요;;

    어서 완성단계를 봤으면 좋겠네요.

    댓글 갱신문제만 해결된다면 정말 멋진 일일것 같습니다.

    답글삭제
  7. @okto - 2008/04/18 18:33
    [quote]댓글 갱신문제만 해결된다면[/quote]

    이 문제가 가장 큰 문제라능~

    답글삭제
  8. @okto - 2008/04/18 18:33
    timer를 이용해서 지저분한 (quick and dirty) 코딩으로 갱신문제도 해결했습니다.



    정리해서 포스팅하도록 하겠습니다.

    답글삭제