[JS] contenteditable div태그에서 text만 사용하기

 
contenteditable = true 인 div 태그에는 붙여넣기 할 경우 html 요소까지 다 같이 붙여넣기 되는 문제가있다.
div태그안에 오직 텍스트만 사용하고 싶을때 아래 코드를 참고하여 작성하면 된다. (jquery) 

<div id="text_messagearea" contenteditable="true"></div>

/* 
html tag 가 붙여넣기 했을때 딸려오지않도록 텍스트만 사용 
*/
$('#text_messagearea').on('paste', function(e) {
    e.preventDefault(); // 기본 붙여넣기 동작을 막습니다.

    const clipboardData = e.originalEvent.clipboardData; // 클립보드 데이터를 가져옵니다.
    const getText = clipboardData.getData('text/plain'); // 클립보드에서 텍스트만 가져옵니다 (HTML은 제외)
    console.log(getText); // 가져온 텍스트를 콘솔에 출력합니다.

    // #text_messagearea의 기존 HTML 콘텐츠를 가져옵니다.
    const beforeText = $('#text_messagearea').html();

    // 기존 콘텐츠 뒤에 붙여넣은 텍스트를 추가합니다.
    $('#text_messagearea').html(beforeText + getText);

    // 커서를 끝으로 이동시키기 위한 Range 객체 생성
    const range = document.createRange();
    const selection = window.getSelection();

    // div의 끝 부분을 선택하는 Range 설정
    range.selectNodeContents($('#text_messagearea')[0]);
    range.collapse(false); // false를 사용하여 Range를 끝으로 축소 (커서를 끝으로 이동)

    // 기존의 선택 영역을 모두 삭제
    selection.removeAllRanges();

    // 새로 만든 Range를 선택 영역으로 설정 (커서를 끝으로 이동)
    selection.addRange(range);
});

/* 
html tag 요소 삭제하고 텍스트만 남기기 
*/
function removeHtmlgetOnlyText(){
    	// text_messagearea안의 요소중 html태그가있으면 그 태그안에 text만 남기고 html태그는 삭제 
    	var $contents = $('#text_messagearea');
        
        // #text_messagearea 안의 모든 요소를 순회
        $contents.find('*').each(function() {
            // 각 태그의 텍스트만 남기고, 해당 태그를 삭제
            var textContent = $(this).text();  // 현재 요소의 텍스트만 가져오기
            $(this).replaceWith(textContent);  // 해당 태그를 텍스트로 대체
        });
    }

 
 
참고 출처 : 
https://dev-bak.tistory.com/25

[HTML/JS/CSS] contenteditable에 clipboard 내용 텍스트만 입력하기