textarea 태그에 이미지를 넣는 방법

textarea 태그에 이미지를 넣는다... 만약 textarea에 이미지를 넣어야한다면 왜 넣으려고 할까요? 가장 큰 이유는 아래일 것입니다.

' textarea를 통해 텍스트만 보여주는 것이 아니라 중간에 삽입될 이미지도 함께 보여주고 싶다.'

예를 들어 어떤 글을 작성할때 이미지를 함께 첨부하고 싶은데 현재 작성 중인 태그가 textarea 이라면 문제가 발생합니다. 왜냐면 textarea 태그안에 이미지 삽입은 불가능하죠... 방법이 없을까요?

# textarea에 img 태그는 추가 불가

결론부터 말하면 textarea에 이미지를 넣는 것은 불가능합니다. 이미지를 위한 img 태그뿐만 아니라 스타일을 변경하기 위한 모든 태그들을 넣을 수가 없습니다. 그래서 이 방법이 아닌 다른 방법을 찾아야합니다.

'이미지 첨부가 가능한 div 태그를 사용하고 contentEditable 속성을 사용한다.'

이때 사용 가능한 방법은 태그에 contentEditable 속성을 사용하는 방법입니다.

위 속성을 적용하면 div태그에 텍스트 입력이 가능합니다. 그렇기 때문에 이미지와 텍스트를 동시에 넣을 수 있다는 특징을 갖습니다. 하지만 생각할 부분이 하나 더 남는데 div 태그는 textarea와 달리 form 태그의 action 속성을 사용하여 바로 서버에 전달할 수 없습니다. 그렇다면 어떻게 해야할까요?

# contentEditable 속성을 서버에 전달하는 방법

form 태그 대신 서버에 전달하는 방법으로 크게 두 가지를 생각할 수 있습니다.

• 숨겨진 textarea 태그를 사용하기
• 텍스트를 불러와 ajax 비동기식으로 전달하기
  

먼저 둘 다 많이 사용됩니다. 숨겨진 textarea 태그를 하나 더 만드는 방법도 간단합니다. div 태그의 내용이 똑같이 textarea에 적용하여 전달하는 방법입니다. 그리고 또 다른 방법은 div 태그의 태그 내용을 ajax로 전달할 수 있겠죠. 이 경우 form 태그를 사용하지 않아도 서버에 전달할 수 있습니다.