스마트에디터2 이미지 업로드 시 이미지 간 여백 추가하기

• 목록
• 스크랩

스마트에디터2 이미지 업로드 시 이미지 간 여백 추가하기

그누보드 스마트에디터2로 여러 장의 이미지를 한꺼번에 올릴 때 이미지 사이에 여백이 없어 붙어버리는 문제를 해결하고 가독성을 높이는 방법을 안내합니다.

스마트에디터2 이미지 간 여백이 없어지는 원인

스마트에디터로 사진을 여러 장 한꺼번에 첨부할 때 각 이미지 사이에 여백이 없어 세로로 붙어버리는 현상은, 사진을 일괄 첨부하는 과정에서 에디터가 이미지 태그 사이에 별도의 여백 태그를 생성하지 않고 연속해서 배치하기 때문에 발생하는 것으로 보입니다. 특히 이미지마다 설명을 작성해야 하는 환경에서 가독성이 떨어지는 원인이 됩니다.

스마트에디터2 이미지 업로드 여백 추가 파일 경로 및 백업

스마트에디터2에서 여러 이미지를 한꺼번에 첨부할 때 이미지 사이에 여백을 추가하기 위해 수정해야 하는 대상 파일의 경로는 다음과 같습니다.

• 수정 및 백업 대상 파일 경로: plugin/editor/smarteditor2/photo_uploader/plugin/hp_SE2M_AttachQuickPhoto.js

주의사항 및 다음 행동

• 코드를 수정하기 전 반드시 위 원본 파일을 백업해 두어야 오류 발생 시 안전하게 복구할 수 있습니다.

스마트에디터2 이미지 간 여백 추가 코드 수정 방법

plugin/editor/smarteditor2/photo_uploader/plugin/hp_SE2M_AttachQuickPhoto.js 파일에서 이미지 하단 여백을 넣기 위해 찾아서 추가해야 하는 코드는 다음과 같다.

1. 찾을 코드

파일 하단 부근에서 아래의 코드를 찾는다.

sTag += '<br style="clear:both;">';

2. 추가할 코드

위에서 찾은 코드 바로 아래에 여백을 위한 아래의 코드를 추가한다.

sTag += '<p>&nbsp;</p>';

환경에 따라 br 태그나 다른 방식을 사용할 수도 있으며, 이 경우 아래의 코드를 대신 활용할 수 있다.

sTag += '<br>';

스마트에디터2 이미지 수정 후 반영되지 않을 때 조치 방법

코드를 수정한 뒤에도 변경 사항이 즉시 화면에 반영되지 않을 수 있습니다. 이 경우 브라우저의 캐시를 삭제하고 페이지를 새로고침하여 적용 결과를 확인합니다.

함께 보면 좋은 글

• 그누보드 게시판 상단 이미지 업로드 및 출력 기능 구현
• 그누보드 이미지 업로드 시 자동 워터마크 삽입 구현 방법
• 그누보드 스마트에디터2 사진 첨부 기능 제거 방법

참고자료

기타 참고자료

• mercury-seed.com — 스마트에디터2 이미지 업로드 시 이미지 간 여백 추가하기