스마트에디터2 글쓰기시 큰이미지를 자동으로 리사이징하기

우리가 스마트에디터2 를 사용하다 보면 pc 나 모바일 모두의 글쓰기에서

가로사이즈가 큰 이미지를 업로드하면 원본사이즈대로 표현이 되어 레이아웃보다 훨씬 커지게 보여서 시각적으로 불쾌할 수 있습니다. 특히 모바일은 더욱 그렇죠.

그래서 이 사이즈 큰 이미지의 가로를 에디터의 100% 로 맞추는 css 를 첨가해주는 방법을 공유합니다.

----------

1. plugin/editor/smarteditor2/smart_editor2_inputarea.html 의 </head> 아래에

</head>
<style>img { max-width:100%; }</style>

----------

또는

2. plugin/editor/smarteditor2/SmartEditor2Skin.html 의 </body> 위에

<script>
document.querySelector("#se2_iframe").onload = function() {
    this["contentWindow"]["document"].querySelector("body").insertAdjacentHTML("beforebegin", "<style>img { max-width:100%; }</style>");
}
</script>
</body>

----------

3. 그런데 위의 2가지는 코어를 건드리는 찝찝함이 있으므로 제가 만든 2023년 10월 3일에 업뎃된 HOOK 버전을 사용하는 것을 추천합니다.^^

https://sir.kr/g5_plugin/10907

https://sir.kr/g5_plugin/10950

----------

4. write.skin.php 나 write.tail.skin.php 에서도 얼마든지 가능합니다만 귀찮고 성가셔서 패쓰합니다.^^