이미지 삽입 코드 생성기 소스 코드 공개

최근 Typora를 이용해서 블로그 포스팅하는 방법에 대해서 포스팅을 해왔다.

• Typora 마크다운 편집기를 이용해서 소스코드(Code)와 이미지(Image)를 포스팅에 삽입해보자

• Typora로 포스팅 할 때 이미지 사이즈(Image Resize) 및 정렬(Image Align)을 설정하는 방법

본인 역시 Typora를 통해 블로그 포스팅을 작성하기 때문에 필요한 이지미를 Typora의 편집창에 코드로 넣어가면서 사용하고 있다. 그러던 중 좀 더 쉽게 이미지를 삽입할 수 있도록 이미지 삽입 태그 생성기를 직접 만들어 봤다.

사실 소스코드 공개라고 거창하게 할 것까진 없는 심플한 코드이며, 혹시 필요하신 분들이 계시다면 편하게 이용하시길 바란다.

본 이미지 삽입 태그 생성기는 아래의 포스팅에서 직접 테스트 해볼 수 있다.

​

2019/01/31 - [Development/ETC] - 이미지 삽입 코드 생성기(Insert Image Tag Generator)

​

코드는 아주 심플하다.

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
 ​
 <div class="container">
   <h2 class="pb-2" style="text-align: left;">Insert Image Tag Generator</h2>
 ​
   <form>
     <div class="form-group">
       <label class="input-control">Img URL:&nbsp;</label>
       <input class="input-control" type="text" id="url" onkeyup="onchangeurl()">
       <button type="button" style="background-color: #3CBC8D;" class="input-control" id="copy" onclick="copycode()">Copy</button>
     </div>
     <textarea style="font-size: 12px; width: 400px;" class="form-control" rows="5" id="code"></textarea>
   </form>
 </div>
 ​
 <script>
   function onchangeurl() {
 ​
     var url = document.getElementById("url");
     var code = document.getElementById("code");
 ​
     var basecode = "<div style='text-align: center;'>\n  <img style='max-height:90%; max-width:90%;'  src='" + url.value + "'>\n</div>";
     //alert(url.value);
     code.value = basecode;
   }
 ​
   function copycode() {
     var copyText = document.getElementById("code");
     copyText.select();
     document.execCommand("copy");
     alert("Copied the text: "+copyText.value);
   }
 </script>

상기한 소스코드를 티스토리에 글쓰기 매뉴에서 HTML 편집기에 붙여넣고 포스팅을 발행하면 바로 이용할 수 있다.

---

본 포스팅이 도움이 되셨다면 하단의 공감 버튼을 클릭해 주세요

---