티스토리 에디터와 엔터키

[목차(도우미)]
티스토리의 에디터의 비주얼 모드에서는 리턴키(또는 엔터키)를 치면 개행 태그(<br />)가 삽입된다.
여기서 비주얼 모드는 HTML 체크박스를 선택하지 않았을 때의 입력 모드를 가리키는 말이다. 그런데 이 개행 태그라는 것이 브라우저 마다 다르게 작동하도록 자바스크립트가 짜여져 있다는 것을 오늘에야 처음으로 알게 되었다.

주로 사용하는 브라우저가 오페라 브라우저이다 보니 비주얼 모드에서 엔터키가 <P> 태그를 삽입하는 것으로 거동한다는 것을 알고 있었다. 그리고 이러한 동작은 Wordpress 기반의 블로그 툴에서는 당연한 거동이었기 때문에 티스토리에서도 유사한 거동을 하는 것으로 이해하고 있었다. 그런데 우연히 내글에 달린 댓글을 보니 파이어폭스와 크롬은 엔터키를 치면 단순히 개행 태그 <br />가 들어간다는 것을 알수 있었다.
참고: [과학기술 이야기] - 워드프레스 블로그에서 개행 br코드의 대책

이런 유형의 거동은 브라우저가 가진 기능이 아니다. <textarea>의 입력을 일일이 확인하여 개행 코드를 바꾸어 <br />로 바꾸거나 <P>로 바꾸는 일은 브라우저에서 돌아가는 스크립트의 일이다. 그래서 티스토리 에디터 화면에서 사용되는 자바스크립트를 살펴보니 ".../blog/script/powerEditor/js/editor.js"라는 스크립트에서 각종 브라우저(보통 agent 라고 한다)를 판별하는 처리가 있었는데 유독 오페라 브라우저에 대한 판단이 빠져 있었다. 그러니까 파이어폭스, 사파리, 크롬, IE 등은 판별하고 있지만 오페라는 처리 부분이 없다. 그리고 대충 개행 코드가 있으면 <P> 태그로 바꾸는 처리도 있었다.

결론적으로 보면 오페라는 IE와 유사한 거동을 할 것으로 보이는데 개행 코드(즉 CRLF 또는 LF)를 일부러 <P>로 변환하는 것이다. 이런 변환은 오피스 프로그램의 하나인 워드프로세서에서 흔히 경험하는 일중의 하나인데 글을 입력하다가 엔터를 치는 일은 줄을 바꾸는 것이라기 보다는 단락을 바꾸는 경우에 해당한다. 어차피 줄바꿈은 워드프로세서가 자동으로 해주기 때문에 굳이 줄바꿈을 하려고 엔터를 치는 일은 없다. 그럼에도 불구하고 엔터를 입력했다는 것이므로 단락이 바뀌는 것으로 처리하고 있는 것이다.

매킨토시를 사용하므로 윈도의 인터넷 탐색기(IE)까지 돌려 보면서 확인을 하지는 않겠지만, 티스토리의 에디터는 오페라 브라우저의 사용자에게는 고급 에디터에 가깝다고 보아도 좋겠다.

다만, 오페라 브라우저가 소수의 사용자층에서 사용하다 보니 오페라 브라우저가 이상하게 보이는 오해를 사기도 하는 것은 어쩔수가 없는 과정일지도 모른다.
by 금메달.아빠 on 2011.08.11 23:22 주요 단어: , , , , , , , , , , , , , , , , ,
  • BlogIcon 리뷰쟁이 2011.08.11 23:47 신고 주소 수정/삭제 답글

    와우 안녕하세요 처음 인사드리러왔습니다..

    정말 엄청난 정보가 있는 블로그네요...

    검색노출같은것에 신경쓰지 않고 너무 좋은 내용들..

    본받을게 너무 많은거같네요..대단하세요^^;

  • BlogIcon 이끼소년 2011.08.12 22:08 신고 주소 수정/삭제 답글

    그럼 오페라에서는
    ㅁㄴ이런ㅁㅇ
    ㅁㄴ이러ㅣ;ㄴㅁㅇㄹ
    이렇게 쓸 쑤 없는 건가요?
    해결책은 없나요? ㅎ
    티스토리에 문의해야하나
    글까지 써 주셔서 고맙습니다 :D

    • BlogIcon 금메달.아빠 2011.08.12 22:35 신고 주소 수정/삭제

      아마 직접 에디터에서 글을 올리시나 봅니다.
      직접 글을 올리는 것도 좋지만, 저는 다른 HTML에디터에서 글을 쓰고서 복사하여 올리는 방식을 사용합니다. 혹시라도 쓰던 글을 날리지 않기 위해서기도 하고, PC상에 남겨 두기위해서이기도 합니다.

      윈도라면 라이브 에디터를 쓰면 블로그 발행이 쉽다고 하는데, 그 방법도 해봄직할 것입니다.

      블로그의 에디터 성능이 전문 에디터만 못하기 때문입니다. 행복한 하루하루 되세요.

    • BlogIcon 이끼소년 2011.08.13 12:09 신고 주소 수정/삭제

      그렇군요 도움 고맙습니다 :D

체크하면 비공개 댓글이 됩니다