paste 이벤트 발생 시 jQuery로 바인딩 하여
정규식을 이용해 개행문자를 제외한 모든 테그를 제거하고
selection과 range를 이용하여 커서위치에 붙여넣기 기능
//-- 방법1. 정규식으로 개행문자를 제외한 테그를 모두 바꾼 후 insertNode로 한번에 추가
$("#editor_area").on('paste', function (e) {
var clipboardData = event.clipboardData || window.clipboardData || event.originalEvent.clipboardData;
var pasteVal = clipboardData.getData('text');
pasteVal = pasteVal.replace(/<(\/)?br>/gi, "##BR##").replace(/<[^>]+>/g, '').replace(/##BR##/g, '
').replace(/\r\n/g, '
');
var selection = window.getSelection();
var selRange = selection.getRangeAt(0);
if (!selection.rangeCount) return false;
selection.deleteFromDocument();
selRange.insertNode(selRange.createContextualFragment(pasteVal));
e.preventDefault();
});
//-- 방법2. 상위div 만들어서 감싸고 insertNode로 추가하는 법
$("#editor_area").on('paste', function (e) {
var clipboardData = event.clipboardData || window.clipboardData || event.originalEvent.clipboardData;
var pasteVal = clipboardData.getData('text');
var pasteValArr = pasteVal.split(/\r\n|\r|\n/gi);
var selection = window.getSelection();
if (!selection.rangeCount) return false;
selection.deleteFromDocument();
var fullNode = document.createElement("div");
for( var i=0; i<pasteValArr.length; i++ ){
pasteValArr[i] = pasteValArr[i].replace(/<[^>]*>/g,"");
if ( pasteValArr[i] == "" ) {
var newNode = document.createElement("div");
newNode.appendChild(document.createElement("br"));
} else {
var newNode = document.createElement("div");
newNode.appendChild(document.createTextNode(pasteValArr[i]));
}
fullNode.appendChild(newNode);
}
selection.getRangeAt(0).insertNode(fullNode);
e.preventDefault();
});
//-- 방법3. 개행문자로 쪼갠 후 배열을 뒤집어서 insertNode 로 하나씩 추가하는 방법
$("#editor_area").on('paste', function (e) {
var clipboardData = event.clipboardData || window.clipboardData || event.originalEvent.clipboardData;
var pasteVal = clipboardData.getData('text');
var pasteValArr = pasteVal.split(/\r\n|\r|\n/gi);
var selection = window.getSelection();
if (!selection.rangeCount) return false;
selection.deleteFromDocument();
pasteValArr = pasteValArr.reverse();
for( var i=0; i<pasteValArr.length; i++ ){
pasteValArr[i] = pasteValArr[i].replace(/<[^>]*>/g,"");
if ( pasteValArr[i] == "" ) {
var newNode = document.createElement("div");
newNode.appendChild(document.createElement("br"));
} else {
var newNode = document.createElement("div");
newNode.appendChild(document.createTextNode(pasteValArr[i]));
}
selection.getRangeAt(0).insertNode(newNode);
}
e.preventDefault();
});
//--방법4. 부모 노드에 appendChild로 추가하는 법 (노드중간에다가 추가할때 에러 발생)
$("#editor_area").on('paste', function (e) {
var clipboardData = event.clipboardData || window.clipboardData || event.originalEvent.clipboardData;
var pasteVal = clipboardData.getData('text');
var pasteValArr = pasteVal.split(/\r\n|\r|\n/gi);
var selection = window.getSelection();
if (!selection.rangeCount) return false;
selection.deleteFromDocument();
for( var i=0; i<pasteValArr.length; i++ ){
pasteValArr[i] = pasteValArr[i].replace(/<[^>]*>/g,"");
if ( pasteValArr[i] == "" ) {
var newNode = document.createElement("div");
newNode.appendChild(document.createElement("br"));
} else {
var newNode = document.createElement("div");
newNode.appendChild(document.createTextNode(pasteValArr[i]));
}
selection.anchorNode.appendChild(newNode);
}
e.preventDefault();
});
'프로그래밍 > javascript' 카테고리의 다른 글
| [javascript] 자주 사용하는 정규식 메모 (0) | 2020.05.21 |
|---|---|
| [javascript] 브라우저 IE 감지 (0) | 2020.05.21 |
| [Javascript] 글자수 체크, 문자열 길이 구하기(한글 포함) (0) | 2020.05.21 |
| [React] CentOS7 / React + create-react-app + yarn + Node js 환경 구축 (0) | 2019.07.02 |
| [jQuery] file type 예외처리 (0) | 2019.04.30 |
