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

사용자 삽입 이미지

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

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

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

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

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

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

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

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

사용자 삽입 이미지

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

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

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

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

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