유머게시판

잡담 빵카 에디터에서 사진첨부하면 최대크기로 표시되는게 불편해서 조금 만져봤다

페이지 정보

profile_image
작성자캣타워 조회 1,280회 작성일 2025-04-16 20:32:20 댓글 2

본문

fc379-67ff94d03a398-de7c77d799462a18e3381b406c9b2fd32bee5186.png

 

는 내가 고민하거나 만진게 아니라 AI한테 물어봤어~

 

근데 뭐 아주 불편한건 모바일에서나 그런거고

 

사진 원본을 통채로 올리는것도 원랜 하면 안되는짓이라 ㅋㅋㅋㅋㅋ

 

 

=================================================

 

TinyMCE (Tiny WYSIWYG 에디터)에서 이미지를 첨부했을 때, 해당 이미지가 에디터 영역의 가로폭에 맞춰 자동으로 리사이즈되도록 하려면 다음 방법 중 하나를 적용할 수 있습니다:

✅ 1. 이미지 스타일에 max-width: 100% 적용하기 (CSS 권장 방식)

가장 간단하고 안정적인 방법은 에디터 내부의 이미지에 스타일을 적용하는 것입니다.

css
복사편집
.tox-editor-container img { max-width: 100%; height: auto; }

이 스타일은 이미지를 에디터 영역을 넘지 않도록 자동으로 조정하며, 비율은 유지됩니다.

이 CSS는 에디터 내부 iframe 안의 내용에 적용되어야 하므로 TinyMCE의 content_style 옵션을 사용하는 것이 좋습니다.

js
복사편집
tinymce.init({ selector: '#editor', plugins: 'image', toolbar: 'image', content_style: 'img { max-width: 100%; height: auto; }' });

✅ 2. 이미지 업로드 시 자동 스타일 삽입 (JS)

TinyMCE에 이미지를 첨부할 때 <img> 태그에 style="max-width: 100%; height: auto;" 속성을 자동으로 붙이게 만들 수도 있습니다.

js
복사편집
tinymce.init({ selector: '#editor', plugins: 'image', toolbar: 'image', // 이미지 업로드 후 자동 스타일 삽입 setup: function (editor) { editor.on('NodeChange', function (e) { const imgs = editor.getDoc().querySelectorAll('img'); imgs.forEach(img => { if (!img.style.maxWidth) { img.style.maxWidth = '100%'; img.style.height = 'auto'; } }); }); } });

이 방법은 CSS만으로 적용되지 않을 경우 백업용으로도 쓸 수 있습니다.

✅ 3. 에디터에 기본적으로 반응형 이미지 클래스 적용하기 (선택 사항)

Bootstrap 등 프레임워크를 쓴다면 img-fluid 클래스를 자동으로 추가하는 방식도 고려할 수 있습니다.

js
복사편집
images_upload_handler: function (blobInfo, success, failure) { const imgTag = `<img src="${URL.createObjectURL(blobInfo.blob())}" class="img-fluid">`; success(imgTag); }

필요한 설정에 따라 위 방법들을 조합하면 되고, 가장 권장되는 방식은 첫 번째 content_style 설정입니다.

필요하다면 에디터가 위치한 레이아웃이나 외부 스타일시트에서 이미지에 대한 기본 스타일도 같이 확인해보세요. TinyMCE는 내부 iframe을 사용하기 때문에 외부 CSS가 적용되지 않는 점도 주의해야 합니다.

4o
나의 말:
크롬 개발자도구를 통해서 첫번째 방식의 CSS요소를 임의로 넣을 수 있을까?
 
ChatGPT의 말:

네, 크롬 개발자 도구를 통해서도 TinyMCE의 내부 에디터 iframe에 임시로 CSS 스타일을 주입할 수는 있습니다. 다만, 약간의 트릭이 필요합니다.

TinyMCE는 편집 영역을 <iframe> 안에 렌더링하기 때문에, 일반적인 Elements 탭에서 바로 스타일을 넣는 건 어렵고, iframe 내부 문서로 진입한 후 스타일을 수정해야 합니다.

✅ 개발자 도구로 TinyMCE 에디터 내부 이미지 스타일 넣는 방법

  1. F12 또는 Ctrl+Shift+I 눌러 개발자 도구 열기

  2. iframe 요소를 찾습니다:

    • 예시: <iframe id="someid_ifr" class="tox-edit-area__iframe">

  3. 해당 iframe 위에서 오른쪽 클릭 → "Open in new tab" 또는 "Edit as HTML"이 아니라 → "Reveal in Elements panel" 클릭

  4. iframe 내부 DOM 구조가 보이면, <head> 태그 안에 <style> 태그를 추가합니다:

html
복사편집
<style> img { max-width: 100% !important; height: auto !important; } </style>

  1. 또는 이미지 태그에 직접 스타일을 추가할 수도 있습니다:

    • <img src="..." style="max-width: 100%; height: auto;">

❗주의사항

  • 이 방법은 일시적이며, 새로고침하거나 에디터가 리렌더링되면 사라집니다.

  • 실제 적용을 원한다면 JS 초기화 옵션의 content_style로 등록하는 것이 안전합니다.

필요하다면 직접 크롬 개발자 도구에서 스타일을 삽입하는 예제도 캡처로 보여줄 수 있어요. 원하시면 말씀해 주세요.

댓글목록

리뉴아님의 댓글

profile_image 리뉴아 작성일
개인적으로 지금 쓰는 에디터는 손에 익지가 않음
컨트롤 v로 이미지 붙여지는건 편하긴 한데

캣타워님의 댓글의 댓글

profile_image 캣타워 원글 작성일
뭐 위지윅은 여러개가 있으니까
사이트별로 지원하는거 적응하는 수 밖에
전체 6,319건 155 페이지
게시물 검색