2008년 6월 24일 화요일

BBCode for TiStory 2.2 업데이트 공개

사용자 삽입 이미지

버전이 2.2로 뛰었다고 기능이 대폭 증가한 것은 전혀 아닙니다. 버전번호를 맞췄을 뿐입니다. ^^;;;


BBCode for Tistory 2.1 수정 공개를 통해 배포한 BBCode는 티스토리의 제한된 환경에서 BBCode를 쓸 수 있는 환경을 제공합니다.
하지만, 몇몇분들께서 W3C 표준에 어긋난다는 지적을 하셨습니다.

이에 따라 W3C 표준에 적합하도록 수정된 BBCode for Tistory 2.2를 공개합니다.
(상세한 설치방법은 위의 링크를 클릭하면 보실 수 있습니다)

W3C 표준에 적합하도록 수정하는 것은 엔즐님께서 엔즐군의 다이어리에 올려주신 내용을 기반으로 작업하였습니다.
대략의 수정사항은 아래와 같습니다. (더 상세한 내용은 엔즐군의 다이어리를 참고하시기 바랍니다)

1. <script language="javacript">를 <script type="text/javascript">로 바꿈

많이들 사용하는대로 따라 썼는데, 웹 표준에 적합한 코드가 아니었습니다. (주먹구구의 한계…)
엔즐님 수정사항을 그대로 반영했을 뿐더러, 제 스킨에 같은 방식으로 적힌 코드를 모두 똑같이 수정했습니다.
특히 이 부분은 엔즐님께 다시 한 번 감사드립니다.


2. <p> 태그 내에 <div>를 집어넣은 것을 밖으로 뺌

그냥 단순히 <div>를 추가하기 때문에 <p>가 있는 경우 <p> 태그의 내부에 <div>가 존재하게 됩니다.
<p>가 있는 경우 별도로 처리하도록 수정했습니다.
(이런 제약이 있는지도 몰랐습니다 ㅠ.ㅠ)
역시 엔즐님의 수정사항을 그대로 반영했습니다.


3. <div> 내에서 name 속성 대신에 class 속성을 사용함

name을 사용하지 않는 것이 원칙이고, 사용하더라도 name의 값이 달라야 합니다.
(이런 것 역시 처음 들은 얘기입니다. 웹 개발자 여러분, 존경합니다)

그래서 class 속성을 사용했는데, IE에서 getAttribute 함수에 버그가 있어 약간 복잡한 코딩을 했습니다.

※ 참고로, 3번은 엔즐님께서 제시한 방법보다 약간 간단하고 명확한 방법으로 구현했습니다. v^.^
관심 있으신 분은 아래의 코드를 참고하시기 바랍니다.
if (/msie/i.test (navigator.userAgent)) {
    for (var i = 0; i < tags.length; i++)
        if (tags[i].getAttributeNode('class').value == 'bbcode' && tags[i].style.display != 'none')
            elements.push(tags[i]);
}
else
{
    for (var i = 0; i < tags.length; i++)
        if (tags[i].getAttribute('class') == 'bbcode' && tags[i].style.display != 'none')
            elements.push(tags[i]);
}

직접 수정해서 관련글을 포스팅해주신 엔즐님 및 BBCode에 관심을 가져주신 모든 분들께 감사드립니다.

[i], [u], [quote] 등에서 태그 속의 내용이 비었을 경우에도 변환하도록 아주 약간 수정했습니다. (.+? → .*) / 6월 24일


   

댓글 22개:

  1. 비밀 댓글 입니다.

    답글삭제
  2. @Anonymous - 2008/06/21 10:20
    이상하네요. [뷰투어킬]은 포스팅하면서 댓글을 확인하고 올린 것 같은데…

    고맙습니다. 번번히 도움을 받네요.



    참참. 혹시 은사장님 메일주소 알 수 있나요?

    답글삭제
  3. @BLUEnLIVE - 2008/06/21 10:22
    비밀 댓글 입니다.

    답글삭제
  4. trackback from: BBCode for Tistory를 W3C 표준에 맞게 적용하기
    *이 포스트에서 다룬 문제점을 해결한 BBCode for Tistory 2.2가 배포되었습니다. 지난번 "BBCode for Tistory 활용하기"라는 포스트에서 BLUEnLIVE님의 BBCode for Tistory를 소개해드리면서 댓글과 방명록에 BBCode 삽입 버튼을 달 수 있는 방법을 올린 적이 있습니다. 그 포스트가 올라온 뒤 여러 반응들이 있었는데요, 그 중에는 BBCode를 설치한 이후 W3C의 웹표준 규정에 어긋난다는 문의도 있었..

    답글삭제
  5. [b][color=green]수고하셨습니다[/color][/b];)

    답글삭제
  6. @엔즐군 - 2008/06/22 02:59
    뭘요. 작업은 [rb]엔즐군[/rb]님께서 다 해주셨잖아요.

    고맙습니다.

    답글삭제
  7. 비밀 댓글 입니다.

    답글삭제
  8. @Anonymous - 2008/06/22 16:54
    고맙습니당~

    답글삭제
  9. --; 어렵습니다. ㅎㅎ

    회사 생활은 어떠신지요??

    답글삭제
  10. @mepay - 2008/06/23 00:12
    :)

    1. 다운 받는다.

    2. 압축 푼다.

    3. js 파일을 업로드한다.

    4. 스킨(skin.html)의 내용을 복사해서 도우미에 넣는다

    5. 버튼 클릭한다.

    6. 다시 스킨으로 붙여넣는다



    끝입니다. :)



    회사생활은 이제 시작일 뿐이라… 다음에 말씀드리겠습니다. ㅎㅎㅎ

    답글삭제
  11. --;[ur=][/ur][color=][/color][embed=][img][/img][quote][/quote][b][/b][u][/u][i][/i]:);):P8D:(

    답글삭제
  12. @~ - 2008/06/23 09:32
    ?????????????????????????

    ?????????????????????????

    ?????????????????????????

    ?????????????????????????

    ?????????????????????????

    ?????????????????????????

    ?????????????????????????

    답글삭제
  13. 전 왜.. 스크립트 오류가 날까요? -_-;;;



    2.1 까지는잘 되늗데...



    2.2 가 좀 버벅 되네요 ㅜ.ㅜ

    답글삭제
  14. @박스데기 - 2008/06/24 17:53
    답글에도 달았지만, 제가 시험한 환경에선 그렇게 느리지 않습니다.

    그리고, 2.1에 비해서 구조적으로 변한 곳은 전혀 없고, 치환자 치환 방식만 수정했습니다.



    참고하시기바랍니다.

    답글삭제
  15. 감사드립니다!

    요말을 못했네요 ~ 예의 없게시리 --;;;

    좋은 하루 보내세요^^

    답글삭제
  16. @박스데기 - 2008/06/25 09:24
    네. 잘 쓰시기 바랍니다~

    답글삭제
  17. [B]BBCode[/B] 적용한지는 꽤 됐는데 이제야 글을 씁니다. 죄송~--;

    아무튼 BBCode 말고도 이 블로그에서 여러가지 많이 배우고 갑니다.

    저는 좀 더 공부를 해야겠습니다.

    감사합니다.8D

    답글삭제
  18. @삼뇽이 - 2008/06/26 00:42
    많은 도움이 되시면 좋겠습니다. ;)

    답글삭제
  19. 같은 글인 줄 알았는데 업데이트였군요. 저 퇴원했습니다. 언제 술한잔 다시 해야죠.

    답글삭제
  20. @도아 - 2008/06/26 12:05
    [q]언제 술한잔 다시 해야죠.[/q]

    저야 언제라도 노프라블럼이지만, 도아님의 건강을 생각하면… ㄷㄷㄷ

    답글삭제
  21. 유용한 팁 알려줘서 감사합니다.하나씩 하나씩 봐가면서 적용해야겠군요..^^

    즐거운 하루 되세요~

    답글삭제
  22. @날라리 - 2009/01/22 14:00
    잘 쓰시기 바랍니다.

    참고로, 2.4로 업데이트 되었습니다.

    답글삭제