이미지 넣기와 편집

글에 사진을 넣고, 넣은 사진을 눌러 크기·배치·캡션을 바꿉니다. 게시판 글, 블로그 글처럼 사진이 섞인 글이면 거의 다 씁니다.

createEditor('#editor', {
  toolbar: 'image | alignLeft alignCenter alignRight | undo redo',
  height: 400,
  uploadImage: async (file) => URL.createObjectURL(file),
});

넣는 방법

• 툴바의 이미지 단추(image): 끌어다 놓는 칸을 누르거나 파일을 끌어 놓습니다. 여러 장을 한 번에 고를 수 있습니다. 아래 칸에 주소와 대체 텍스트를 적어 주소로 넣을 수도 있습니다.
• 본문에 사진 파일을 끌어다 놓기, 캡처한 화면이나 복사한 사진을 Ctrl+V 로 붙여넣기.
• 빈 줄에서 / 를 치고 "이미지"나 "사진"을 찾기 (슬래시 메뉴).

어느 길로 넣든 먼저 화면에 미리보기가 뜨고, 올리기가 끝나면 서버 주소로 바뀝니다. 업로드 설정이 없으면 base64 로 글 안에 들어가니, 운영 사이트에서는 이미지 업로드를 설정하세요. 큰 사진 줄이기와 HEIC 변환은 사진 줄이기·변환에 있습니다.

크기 조절

사진을 누르면 네 모서리에 손잡이가 생기고 현재 크기(가로 × 세로)가 보입니다. 손잡이를 끌면 비율을 지키며 너비가 바뀝니다. 가장 작게는 24px, 가장 크게는 본문 너비까지입니다. 휴대폰에서도 손가락으로 끌 수 있습니다.

막대의 25% 50% 75% 100% 는 본문 너비에 대한 비율로, 1:1 은 원본 크기로 되돌립니다.

사진 막대

사진을 누르면 위에 막대가 뜹니다.

툴바의 alignLeft alignCenter alignRight 와 Ctrl+Shift+L/E/R 도 사진을 고른 상태에서는 사진에 적용됩니다. 이때 왼쪽은 "글자처럼"이 됩니다.

툴바에서의 위치

image 는 basic, board, full 프리셋의 첫 줄에 있습니다(minimal 에는 없음). 휴대폰에서는 한 줄 툴바의 맨 앞에 옵니다.

저장되는 HTML

<figure style="margin: 0 0 1em; display: table; margin-left: auto; margin-right: auto; text-align: center">
  <img src="/files/a.jpg" alt="숲길 사진" style="width: 360px; height: auto; max-width: 100%" width="640" height="400">
  <figcaption style="font-size: 0.875em; color: #667085; margin-top: 6px">캡션</figcaption>
</figure>
<p><img src="/files/b.jpg" alt="" style="float: left; margin: 0 16px 8px 0; width: 160px; height: auto; max-width: 100%" width="320" height="240" loading="lazy">글…</p>

배치와 크기는 모두 인라인 스타일이라 보기 화면에 에디터 CSS 가 없어도 똑같이 보입니다. responsiveOutput(기본 켜짐)이 max-width: 100% 와 원본 width/height 를 붙여 휴대폰에서 넘치지 않고, lazyImages(기본 켜짐)가 두 번째 사진부터 loading="lazy" 를 붙입니다. 자세한 내용은 저장되는 HTML.

옵션