안녕하세요.

 

에디터에서 이미지 사이즈 조정할 때 크롬 개발자도구에서 수정하면 에디터 소스도 바뀌는 현상이 있어 문의 드립니다.

 

콘텐츠 업로드 시 한 행에 이미지를 2개 넣는 일이 자주 있는데요,

그 때마다 해당 이미지 소스에 width="49%" align="right" 등 넣어 만들곤 합니다.

 

자동 조절하는 기능이 없어서 수동으로 수치를 조금씩 조정하면서 업로드 하곤 했었는데요,

 

크롬 개발자도구에서 미리 보면서 조정하면 어떨까 싶어 에디터 작성 화면에서 개발자도구를 열어 개발자도구에서 width="49%" -> 45%로 수치를 조정해봤습니다.

 

신기하게도 크롬 개발자도구에서 수정된 수치가 그대로 에디터에 반영되는 현상을 발견했습니다.

 

저는 현재 이러한 방법을 유용하게 쓰고 있긴 하지만, 혹시 보안상 문제가 되는 이슈인지 싶어서 글 남깁니다.

 

감사합니다.

  • profile
    에디터도 HTML로 구현된 것이므로 개발자도구에서 조작할 수 있습니다.
    이상한 코드를 넣으면 걸러주는 역할은 에디터가 아니라 서버단에서 합니다.
    물론 관리자는 뭘 넣더라도 그대로 받아주지만요...
  • profile profile
    답변 감사합니다. 혹시 유저가 이상한 코드 넣으면 어쩌나 했는데 걱정 안해도 된다니 마음이 편안해졌습니다.
  • profile

    에디터라고 거창한걸 구현한게 아니라 그냥 내부에 아무 내용도 없는 빈 프레임을 불러오고 있을 뿐입니다. 다만 수정 기능은 contenteditable이라는 속성을 이용하는 것이고요.

    https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/contenteditable

    이 속성만 지정해도 추가 스크립트 없이 간단한 HTML 수정까지는 가능합니다.(상단 예시링크 들어가신뒤 데모 Output 아래 수정 가능 영역에 제목이나 메뉴 영역 태그를 복붙하시면 태그까지 그대로 들어가는걸 확인하실수 있으실겁니다) 다만 순정 상태대로라면 유저가 볼드체 등 글자에 효과를 지정하기 힘드니... CKEditor같은 에디터를 사용해서 스타일 적용을 쉽게 만든것일 뿐입니다. (개발자 도구로 글 작성중인 부분을 확인해보시면 body 태그에 contenteditable="true" 라고 지정된것을 확인하실수 있으실겁니다)

  • profile profile
    답변 감사합니다. contenteditable 전역 특성을 주면 사용자가 HTML 중 특정 요소를 편집할 수 있게 되고, 에디터는 말씀대로 빈공간 안에 스타일을 만드는 툴일 뿐, 빈 공간에 있는 텍스트를 개발자도구에서 수정하면 당연히 변경되는 원리였군요. 초보적인 질문이었지만 상세히 알려주셔서 감사드립니다.